Როგორ შევქმნათ სამკუთხედი CSS- ში: ყველაზე მოსახერხებელი გზები

ძალიან ხშირად თანამედროვე ლამაზი გვერდები შეიცავს ბევრ მიმზიდველ გრაფიკულ ელემენტს. მათ შორის, მარტივი გეომეტრიული ფიგურა გამოიყენება სამკუთხედისთვის, რომელიც გამოიყენება ელემენტების კომპლექტის შესაქმნელად. მაგალითად, მე ვიყენებ მათ როგორც კონკრეტულ ობიექტზე მომხარებლის კურსს, ისე, რომ საიტის მონახულება მას ყურადღებას აქცევს. რა თქმა უნდა, სამკუთხედის ძირითადი ფუნქცია დეკორატიულია, რადგან ბლოკები, რომლებიც მათ უფრო თანამედროვე და მიმზიდველი გახდება.

ყველამ არ იცის, თუ როგორ უნდა შექმნათ ასეთი ფორმები კასკადური სტილების გამოყენებით და გაინტერესებთ, როგორ ჩამოყალიბდეს სამკუთხედი CSS- ში.

აპლიკაციების დიზაინი

ვებ-დიზაინში, სამკუთხედები ყველგან გვხვდება. ისინი ქმნიან რჩევებს, მენიუებს, ინტერფეისის ყველა ელემენტის ელემენტებს. ზოგჯერ ისინი იყენებენ ჩატვირთვის პროცესის ინდიკატორის შექმნისას. და თუ ეს შესაძლებელი იყო მათ გარეშე, ახლა შეუძლებელია, და დეველოპერები ვალდებულნი არიან მოერგონ ასეთ მოთხოვნებს. ყოველივე ამის შემდეგ, დღეს CSS- ში შექმნილი სამკუთხედი არის ყველაზე მნიშვნელოვანი ნაწილი ურთიერთდამოკიდებულების ურთიერთკავშირის შესაქმნელად და ერთიანად გაერთიანებისას.

ბევრი განლაგება მხატვრების გვაწუხებს, როდესაც ისინი განლაგება, დიზაინი, რომელიც ხშირად სამკუთხედის. ყოველივე ამის შემდეგ, არ არსებობს თვისებები, რომლებიც პირდაპირ ქმნიან ამ გეომეტრიულ ფიგურას. ფაქტობრივად, არსებობს რამდენიმე მეთოდი ხელმისაწვდომია ამის გაკეთება.

როგორ შევქმნათ ჩარჩო

პირველი მეთოდი, რომელიც საშუალებას გაძლევთ შექმნათ სამკუთხედი CSS- ში. ეს არის ჩარჩო. მიუხედავად იმისა, რომ სასაზღვრო საკუთრებაში შექმნილი საზღვრები პირდაპირ არ არის დაკავშირებული სამკუთხედის მიმართ, ის ხშირად გამოიყენება ამ მიზნით.

ობიექტის ნულოვანი სიმაღლისა და სიგანის მითითებით, ასევე სქელი საზღვრის შექმნისას შეგიძლიათ იხილოთ კვადრატი, რომელიც შედგება ოთხი თანაბარი სამკუთხედებისგან. შეასრულა ის, რომ საჭიროა მხოლოდ საზღვრის დატოვება და დანარჩენი, გამჭვირვალე გახადოთ. ასე რომ, გამოდის სამკუთხედი შედგენილი CSS- ში სწორი მიმართულებით.

"საზღვრის" ქონების გამოყენებით კუთხეების შექმნა მოსახერხებელია, იმიტომ, რომ არ არის საჭირო გრაფიკული რედაქციის გამოყენებით სურათი. სამკუთხედის პარამეტრები ყოველთვის შეიძლება შეიცვალოს კოდით. და დრო გადაარჩენს დეველოპერს. ჩარჩოს სხვადასხვა სიგანეზე კომბინირება ადვილია იმისთვის, რომ მიიღოთ ფორმა. იმის გასაგებად, თუ როგორ მუშაობს ეს, შეგიძლიათ უბრალოდ ცარიელი ელემენტის შექმნა ნულოვანი, სიმაღლის სიგანე და სხვადასხვა ფერის ძალიან სქელი ჩარჩო თითოეულ მხარეს. ასე რომ, ოთხივე გამჭვირვალე სამი მხარე, მიიღეთ სხვადასხვა სახის სამკუთხედები:

• სამკუთხედი, რომელიც ეძებს მარცხნივ, რომლის მხარეები თანაბარია;
• სამკუთხედი, რომელიც გამოიყურება მარცხენა და გაბრტყელდება;
• გაფართოებული სამკუთხედი, მარცხნივ გამოიყურება;
• მარჯვენა სამკუთხედი მარჯვენა კუთხის მარცხენა მხარესთან;
• სამკუთხედი ეძებს ქვემოთ;
• სამკუთხედი ეძებს;
• სამკუთხედი ეძებს მარჯვნივ და ბევრი სხვა ჯიშები.

ფსევდო-დემენტორების გამოყენება

ამ ტექნიკით, შეგიძლიათ შექმნათ კუთხეები pop-up რჩევები და მინიშნებები. CSS- ის მეშვეობით ბლოკის ბლოკირების მიზნით, პროგრამისტებმა გამოიყენონ ისეთი ფსევდო-ელემენტები, როგორც და მის შემდეგ. თუ ისინი იყენებთ მათ ერთად, შეგიძლიათ დახაზოთ სამკუთხედი CSS- ში, რომელსაც აქვს ინსულტი.

მათ აერთიანებს მათ, დეველოპერები ბევრი ლამაზი ისრებით გამოყენებით პოზიცია: ნათესავი ქონების მშობელი ელემენტს. ეს კეთდება ისე, რომ ფსევდო-ელემენტები არ გადაადგილდებიან თავიანთი ადგილებისგან.

CSS- ის გამოყენების უპირატესობები სამკუთხედების შესაქმნელად არის:

• ზომისა და ფერის თვისებების სწრაფი და მარტივი რედაქტირება;
• ყველა ბრაუზერის მხარდაჭერა.

Cons:

• იმის გამო, რომ ჩარჩოები გამოიყენება, არ არსებობს შესაძლებლობა, გამოიყენოს გრადიენტი, ჩრდილები;
• ზოგჯერ, როცა მომხმარებელი Firefox- ის ბრაუზერის გვერდებზე უყურებს, გამჭვირვალობა არ იმუშავებს და ეს სურათს დამახინჯავს.

მზა გამოსახულების გამოყენებით

სამკუთხედების შექმნის შემდეგი მეთოდი არის კოდირებული სურათის გამოყენება. სამკუთხედი წინასწარ შედგენილია გრაფიკული რედაქციით და სპეციალური კოდით სპეციალიზირებული სერვისებით.

ამ მეთოდის პლიუს არის ის, რომ თქვენ შეგიძლიათ ძალიან ლამაზი დიზაინით ჩრდილები, გრადიენტი და ჩარჩოები და შემდეგ უბრალოდ კოდის ყველა. და ნაკლოვანებები ის არის, რომ ყველამ კარგად იცის გრაფიკული პროგრამები. გარდა ამისა, თუ გამოსახულება ძალიან დიდია, მაშინ კოდის ხაზი უბრალოდ დიდია. ეს უხერხულია დეველოპერებისთვის.

ცალკე პუნქტი არის გამოყენების ბრაუზერები Internert Explorer ძველი ვერსიები. მათში, ეს მეთოდი უბრალოდ არ იმუშავებს.

ინვერსიული კვადრატული მეთოდი

ერთი გზა არის CSS- ის ინვერსიული კვადრატის შექმნა. აქ არის ორი ბლოკი. მაგრამ ზოგიერთი ადამიანი ფსევდო-ელემენტებს იყენებს.

პირველი, კვადრატი იქმნება. ეს იქნება ბრუნვის ელემენტის შინაარსი. შემდეგ ის 45 გრადუსს გადააჭარბებს, რომ ბრილიანტი იყოს. შემდეგ ის გადადის და გარე ბლოკად გადაფარავს გადაფარვას: დაფარული ქონება. ეს გამოსავალი ასევე არ არის ჯვარედინი ბრაუზერი, ზოგჯერ სურათის არ იქნება ნაჩვენები როგორც სასურველი.

შედეგები

ასე რომ, არსებობს მრავალი მეთოდი სამკუთხედის შესაქმნელად. მაგრამ როგორ ვერ დაიკარგება ყველა ამ CSS თვისება? დირექტორია ამ შემთხვევაში ყოველთვის დაეხმარება out. იგი აღწერს კასკადური სტილების ყველა მახასიათებელს.

მათთვის, ვისაც არ სურს წასვლა პროგრამირების და CSS- ის სიის დათვალიერება, არის ონლაინ რედაქტორები, რომლებიც ქმნიან მარჯვენა ზომის და ფერების სამკუთხედებს. ვიზუალური რედაქტორში მომხმარებელი ირჩევს და შეცვლის ყველა ფორმის პარამეტრებს. კონვერტირებული CSS კოდი სამკუთხედის გენერატორი აყენებს ცალკე ფანჯარა პირდაპირ fly. შემდეგ გენერირებული კოდი უბრალოდ ჩასმული სტილის ფურცელში და მორგებულია გვერდის დიზაინზე.