Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

როგორ შევქმნათ ფორმის ელემენტები სიბსის სელექტორის გამოყენებით

by
Difficulty:IntermediateLength:MediumLanguages:

Georgian (ქართული) translation by Tsotne Kalandadze (you can also view the original English article)

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

შესაბამისად ვისწავლით ძალიან ბევრ სიახლეს: თანამედროვე CSS სელექტორებს, will-change მახასიათებელს, SVG - ის stroke მახასიათებელს და სხვა ძალიან ბევრი რამეს!

სანამ დავიწყებდეთ..

სწრაფი გაფრთხილება: მოცემულმა CSS ეფექტებმა შეიძლება არ იმუშაოს მოძველებულ ბრაუზერებში. მე შევამოწმე ისინი Chrome - ის, Firefox - ის და Safari - ის უახლეს ვერსიებზე. 

გაკვეთილში გამოვიყენებ Haml - ს (HTML კომპილატორი) და Sass - ს (CSS პრეპროცესორი), რათა დავაჩქარო კოდზე მუშაობის პროცესი! დემო ვერსიებში იქნება გამოყენებული Haml, თუმცა სხვა შიდა კოდი იქნება რეგულარული HTML.

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

Autoprefixer in your pen settings
მიუთითეთ პარამეტრებში AutoPrefixer - ი.

რადიო ღილაკი

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

SVG ვერსია

პირველი ნაბიჯი არის HTML - ის შექმნა. ამისთვის დაგჭირდებათ ერთი მთავარი, გარე კონტეინერი და შიდა კონტეინერი ორი შვილობილით: div რომელიც შეიცავს input - ს (შესავსებ ფორმას), ვიზუალურ ელემენტებს და input - ისთვის განკუთვნილი label. მე გამოვიყენებ fieldset - ს გარე კონტეინერისთვის. არ დაგავიწყდეთ, რომ input - ს დაამატოთ ID, რომელიც ემთხვევა label - ის for ატრიბუტს.

შემდეგი ნაბიჯი გახლავთ ძირითადი input - ის დამალვა, საბაზისო ვიზუალური სტილების დამატება და ასევე იმ ელემენტების დამალვა, რომლებიც გამოჩნდებიან მხოლოდ მაშინ, როდესაც რადიო ღილაკი იქნება მონიშნული. მთავარი იდეა გახლავთ input - ის ისე დამალვა, რომ ის მოვათავასოდ ვიზუალური ელემენტების ზემოდან, შესაბამისად მასზე დაჭერისას შეიქმნება ვიზუალურ ელემენტებზე დაჭერის ეფექტი.  მსგავსი ეფექტის მისაღებად, შეგვიძლია .svg - ის მივანიჭოთ position: relative, ხოლო input - ს მივანიჭოთ position: absolute, შემდეგ კი დავმალოთ ის.

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

ახლა კი შევქმნათ ფერის ცვლადები Saas - ის გამოყენებით; რამოდენიმე ნაცრისფერი და ღია ლურჯი მონიშნული ღილაკისთვის. გარდა ამისა გამოვიყენოთ ცვლადი $p, რომლის მნიშვნელობაც იქნება 12px, რადგან მოცემული რიცხვი იყოფა სხვადასხვა რიცხვზე (1, 2, 3, 4, 6). 

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

პირველ წრეს მივანიჭეთ ღია ნაცრისფერი, ხოლო მეორე წრეს ღია ლურჯი, შემდეგ კი მეორე წრე დავმალეთ transform: scale(0) - ის გამოყენებით. მოგვიანებით ჩვენ მოვახდენთ წრის ანიმირებას, ამიტომ ამ ეტაპზე შკალის (scale) მითითება მნიშვნელოვანია. 

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

პირველ რიგში შევქმნით ფერებს ღილაკის ყველა შესაძლო მდგომარეობისთვის, ხოლო შემდეგ მოვახდენთ მის ანიმირებას. სწორედ აქ დაგვჭირდება ტილდას სიმბოლო ~. მოცემული სიბსის სელექტორი (სიბსის კომბინატორი) მონიშნავს მეორე ელემენტს პირველის ნაცვლად, თუ კი პირველი მდებარეობს მის წინ და მათ ყავთ საერთო მშობელი ელემენტი.  მაუსის გადატარების დროს, ვიზუალური სტილის შესაქმნელად ვიყენებთ input:hover ~ div - ს.

დააჭირეთ პირველ რადიო ღილაკს, შემდეგ მეორეს და ნათლად დაინახავთ გადატარებისა და აქტიურ/მონიშნულ მდგომარეობებს.

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

HTML ვერსია

მსგავსი რადიო ღილაკის შექმნა SVG - ის გარეშეც არის შესაძლებელი:

CSS იქნება თითქმის იდენტური, იმ განსხვავებით, რომ დამატებით დაგვჭირდება სტილები div ელემენტებისთვის, რომლებიც ჩაანაცვლებენ SVG წრეებს. მოცემულ შემთხვევაში ვიყენებთ nth-of-type(n) რათა მოვნიშნოთ თითოეული div ელემენტი ისე, რომ არ დაგვჭირდეს მათთვის კლასის მინიჭება.

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

გრაფა/მოსანიშნი უჯრა

ფორმის შემდეგი ელემენტი გახლავთ მოსანიშნი უჯრა, იგივე გრაფა. მისი მდგომარეობები გახლავთ რადიო ღილაკის იდენტური: ორი ძირითადი მდგომარეობა (მონიშნული და მოუნიშნავი) და ორი შუალედური მდგომარეობა (მაუსის გადატარება და დაჭერა/აქტივაცია). 

SVG ვერსია

მარკირება გავს რადიო ღილაკისას, თუმცა წრეების ნაცვლად იყენებს ხაზებს.

პირველ ჯგუფში არსებული ხაზები იქნება ღია ნაცრისფერი, ანიმაციის გარეშე; გრაფაზე დაჭერის შემთხვევაში მოხდება მეორე ჯგუფში არსებული ხაზების ანიმირება. 

ასევე გვაქვს დამატებითი div ელემენტი, რომელსაც გამოვიყენებთ დაჭერის ეფექტის შესაქმნელად, სადაც ღია ლურჯი ფერი დაიკავებს ფონს. იმისათვის რომ ამ ეფექტმა იმუშაოს, div ტეგი უნდა იყოს ლურჯი წრე, რომლის სიგრძე და სიგანე, უნდა აღემატებოდეს ღილაკისას, ხოლო გარე კონტეინერს უნდა გააჩნდეს მახასიათებელი overflow: hidden; შესაბამისად წრის ნაპირები აღარ გამოჩნდება. წრის ფორმის div - ს უნდა მივანიჭოთ transform: scale(0), რადიო ღილაკის მსგავსად. 

Checkbox dimensions and circle dimensions
გრაფის ზომები მარცხენა მხარეს, ხოლო წრის ზომები მარჯვენა მხარეს.

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

შემდეგი ნაბიჯი გახლავთ ანიმაციის მომზადება, რომელიც წააგავს რადიო ღილაკის ეფექტებს, თუმცა წრის ნაცვლად, მოსანიშნი გრაფა თვითონ შეავსებს არსებულ უჯრას. ამისათვის დაგვჭირდება SVG ხაზებთან stroke-dashoffset - ის გამოყენება.

stroke-dashoffset - ის ანიმაციისთვის აუცილებელია ყველა ხაზის სიგრძის გამოთვლა. რისთვისაც CodePen - ზე შევქმენი ხელსაწყო, რომელიც გამოითვლის მოცემულ სიგრძეს, თუმცა თუ თქვენ იყენებთ მოსანიშნ გრაფას, მე ამისათვის უკვე მოვამზადე უფრო მოკლე ხაზები, რომელთა სიგრძეც გახლავთ 6.708, ასევე შევქმენი მოგრძო ხაზები შემდეგი სიგრძით: 14.873. ამ მნიშვნელობებს გამოვიყენებთ stroke-dashoffset - სა და stroke-dasharray - ისთან. მნიშვნელობების მინიჭება საჭიროა მხოლოდ პირველი გრაფისათვის (მეორე გრაფის ხაზები ავტომატურად მოუნიშნავ მდგომარეობაში იქნება).

გრაფაზე დაჭერის შემთხვევაში, stroke-dashoffset - ს ვაყანებეთ 0 - ზე, შესაბამისად (გადასვლების გამოყენებით) შეიქმნება ხაზის "დახატვის" ეფექტი. რადიო ღილაკის მსგავსად, საჭიროა დანარჩენი მდგომარეობებისთვის ანიმაციის შექმნა, მათ შორის მაუსის გადატარებისას ფონის ცვლილება და წრის შკალირება დაჭერისას.

საბოლოო ნაბიჯი გახლავთ გადასვლების (transition) დამატება. ამ შემთხვევაშიც შევქმნით გადასვლებს როგორც მოუნიშნავი, ასევე მონიშნული მდგომარეობისთვის. რადიო ღილაკის მსგავსად, გრაფის მონიშვნის მაჩვენებელიც გაქრება. 

HTML ვერსია

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

ორივე გრაფისათვის გამოვიყენებთ :before - სა და :after - ს, რაც გაამარტივებს მარკირებას. წინააღმდეგ შემთხვევაში დაგჭირდებათ მინიმუმ ოთხი ცარიელი ელემენტის შექმნა. ხაზების განთავსება მოგვიწევს "ხელით", შემდეგ კი მათი როტაცია საჭირო პოზიციაზე, მაგრამ ერთი გადასვლა (transform) საკმარისი იქნება როგორც როტაციისთვის, ასევე ხაზების დასახატად.

სიმბოლოს ვერსია

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

მინიშნება: HTML სიმბოლო დაგჭირდებათ მხოლოდ ბოლო ორი ელემენტისთვის, მაგრამ დემო ვერსიაში მე გამოვიყენე ის სამივე div ტეგთან, რათა შემძლებოდა მისი მრავალჯერ გამეორება.

რადგანაც არ შეგვიძლია სიმბოლოს დახატვა, თეთრი ვერსია ქრება და ჩნდება დაჭერის დროს. ქვემოთ შეგიძლიათ ნახოთ სამივე ვარიანტი!

რეგულარული ფორმები

მოცემული გაკვეთილის ბოლო ნაწილში განვიხილავთ რეგულარულ ტექსტურ ველს. შთაგონების წყაროდ გამოვიყენე Google Material - ის ველები. მოცემულ ველებს გააჩნიათ რამდენიმე განსხვავებული მდგომარეობა: ძირითადი, აქტიური/ფოკუსირებული (როდესაც მოციმციმე კურსორი ჩანს) და მაუსის გადატარების მდგომარეობა. 

წინა ორ ვარიანტთან შედარებით, დაგვჭირდება კიდევ უფრო მარტივი მარკირება. გვექნება fieldset, input, label და div ელემენტი ჩარჩოსთვის.

შემდეგი ეტაპი არის input - ისთვის სტილების შექმნა. ამჯერად ჩვენ არ დავმალავთ მას, რადგან გვესაჭიროება მისი მნიშვნელობის გამოტანა. ასევე შევქმნით label - ს, რომელიც იმოძრავებს ზემოთ და ქვემოთ ველზე ფოკუსირების დროს. ამისათვის საჭიროა label - ის განთავსება შესავსები ველის ზემოდან.  div ჩარჩოს ექნება მინიჭებული :after ფსევდო ელემენტი, რომელიც გამოჩნდება ჩარჩოს ზევით, შესავსებ ველზე დაჭერის შემთხვევაში; ფსევდო ელემენტს მივანიჭებთ scale(0) - ს რათა მოვამზადოთ ანიმაციისთვის.

თუ დემო ვერსიაში დააჭერთ შესავსებ ველს და დაიწყებთ ბეჭდვას, შეამჩნევთ რომ ტექსტი იბეჭდება ველის გარეთ. ამისათვის შევქმნით label - ის ანიმაციას, რათა მიღოს საჭირო პოზიცია დაჭერის შემთხვევაში. თქვენ შეგიძლიათ მთლიანად ტრანსფორმაციის (transform) გამოყენება გადახატვის თავიდან ასარიდებლად, თუმცა font-size - ისა და translateY - ს მეშვეობით შევქმენი გაცილებით უფრო ზუსტი ანიმაცია. div - ის :after ფსევდო ელემენტს მოვაშორებთ შკალირებას, რათა შევქმნათ დახატვის ანიმაცია.

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

HTML - ში არსებულ შესავსებ ველს შეგვიძლია მივანიჭოთ required, როგორც ცარიელი ატრიბუტი, ან დავამატოთ :required => true Haml - ში. საბოლოოდ კი, Sass/CSS - ში, :focus - ს ვამატებთ :valid მახასიათებელს.  ეს ყველაფერი ქმნის დამატებით ვიზუალურ მდგომარეობას. გამომდინარე იქედან, რომ საქმე გვაქვს მარტივ ტექსტურ ველთან, ერთადერთი ვალიდური მდგომარეობა არის შევსებული. 

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

შთაგონების წყარო

თუ გსურთ, რომ შექმნათ საკუთარი ფორმები მსგავსი ტექნიკის გამოყენებით, მაგრამ გჭირდებათ ვიზუალური ინსპირაცია, შეგიძლიათ შეამოწმოთ UI ნაკრებები, რომელიც ხელმისაწვდომია Envato Elements - ის ხელმომწერთათვის:

UI kits on Envato Elements
UI ნაკრებები Envato Elements - ზე

დასკვნა

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.