შექმენით CSS ღილაკები, თითო დეტალი თანმიმდევრობით.
ვიზუალურად დაამუშავეთ ღილაკი და მიიღეთ HTML და CSS თქვენს ვებსაიტზე გამოსაყენებლად. დაიწყეთ მზა სტილით, დაარეგულირეთ ტიპოგრაფია, ფერები, ფორმა და ჩრდილები, შემდეგ კი ექსპორტამდე გადახედეთ ინტერაქციის მდგომარეობებს.
დაათვალიერეთ 44 მზა სტილები Everyday, Classic, Shaped, Expressive, Gradients და Elite კოლექციებიდან. თითოეული მზა სტილი არის საწყისი წერტილი, რომლის რედაქტირებაც შეგიძლიათ.
როგორ მოქმედებს მზა სტილები თქვენს დიზაინზე
ჯერ აირჩიეთ, შემდეგ დააზუსტეთ
გამოიყენეთ სტილების კოლექცია გალერეის შესამცირებლად. მზა სტილის გამოყენება ცვლის როგორც ნაგულისხმევ, ისე ჰოვერ (hover) სტილებს, თუმცა ინარჩუნებს ღილაკის ტექსტს და კლასის სახელს.
სცადეთ მარტივი სოლიდური შევსება, მომრგვალებული კუთხე, მკაფიო კონტური ან უფრო დეკორატიული გაფორმება. როგორც კი იპოვით სასურველ მიმართულებას, გამოიყენეთ სხვა ჩანართები დეტალების თქვენს გვერდზე მოსარგებად.
დაარეგულირეთ წარწერა
დააყენეთ ღილაკის ტექსტი, შრიფტის ოჯახი, ზომა, სისქე, ინტერვალი, ხაზის სიმაღლე, განლაგება და ტექსტის ფერი. დააკვირდით, როგორ იცვლება წარწერა მუშაობის პროცესში.
დააზუსტეთ ტექსტი და ინტერვალები
ტიპოგრაფია, რომელიც შეესაბამება მოქმედებას
ტექსტი შეიცავს შრიფტის მართვის ელემენტებს და ღილაკის ტექსტის მეორე ველს. შრიფტის ზომა მერყეობს 10-დან 80 პიქსელამდე; ჩამოთვლილი შრიფტები ხელმისაწვდომია ვიზიტორის მოწყობილობაზე.
გამოიყენეთ მოკლე წარწერა, რომელიც აღწერს მოქმედებას. Fill-ში ჰორიზონტალური და ვერტიკალური შიდა სივრცე (padding) ამატებს ადგილს მის გარშემო შრიფტის ზომის შეცვლის გარეშე. შეამოწმეთ გრძელი წარწერები იმ გვერდზე, სადაც ღილაკი იქნება გამოყენებული.
აირჩიეთ სოლიდური ან გრადიენტური შევსება
გამოიყენეთ ერთი ფონის ფერი ან შეურიეთ ორი ფერი ხაზოვანი გრადიენტით. ფერების ამომრჩევი და ჰექს (hex) კოდების ველები საშუალებას გაძლევთ იმუშაოთ ვიზუალურად ან ზუსტი მონაცემებით.
დააყენეთ ფერები და გრადიენტის მიმართულება
ორი ფერი, ერთი მკაფიო მიმართულება
Fill-ში შეცვალეთ შევსების სტილი Linear gradient-ზე, რათა გამოჩნდეს მეორე ფერი და გრადიენტის კუთხე. კუთხე მერყეობს 0-დან 360 გრადუსამდე.
ჰექს ველები იღებს სრულ ექვსნიშნა ფერს ან სამნიშნა შემოკლებულ ვერსიას. გამოსცადეთ თეთრი ან ფერადი წარწერა გრადიენტის ორივე ბოლოზე; სტუდია ავტომატურად არ ამოწმებს ტექსტის კონტრასტს.
აკონტროლეთ კონტური და სიღრმე
დაარეგულირეთ დაკავშირებული ან დამოუკიდებელი კუთხეები, საზღვრის სისქე და სტილი, ბლოკის ჩრდილები და ტექსტის ჩრდილები. მიანიჭეთ ღილაკს ფორმა, რომელიც შეესაბამება მის კონტექსტს.
გამოიკვლიეთ კუთხეები, საზღვრები და ჩრდილები
მკაფიო მართკუთხედიდან რბილ აბამდე
Shape-ში დატოვეთ Link all corners ჩართული ერთი საერთო რადიუსისთვის, ან გამორთეთ თითოეული კუთხის ცალკე დასაყენებლად. საზღვრის სტილები მოიცავს: solid, dashed, dotted, double, inset, outset, ridge, groove და none.
Shadow-ში დააყენეთ ჰორიზონტალური და ვერტიკალური წანაცვლება, ბუნდოვანება, ფერი და გამჭვირვალობა. ბლოკის ჩრდილს ასევე აქვს გაშლის (spread) და ჩაზნექილი (inset) გადამრთველი. ტექსტის ჩრდილი ცალკეა, ასე რომ თქვენ შეგიძლიათ დაამატოთ სიღრმე წარწერას ღილაკის კონტურის შეცვლის გარეშე.
დააპროექტეთ ინტერაქციაც
დაარედაქტირეთ Default და Hover სტილები ცალ-ცალკე. გადახედეთ Default, Hover და Active გარეგნობას, შემდეგ შეადარეთ ღილაკი ღია და მუქ ფონებზე.
გაიგეთ რედაქტირებისა და გადახედვის მდგომარეობები
ორი რედაქტირებადი სტილი, სამი გადახედვის მდგომარეობა
რედაქტირების მდგომარეობა ირჩევს, თუ რომელ სტილს ცვლიან თქვენი მართვის ელემენტები. ტილოს მდგომარეობის ღილაკები მხოლოდ გადახედვას არეგულირებს. გადახედვაზე მაუსის გადატარება ან დაჭერა ასევე აჩვენებს მის ინტერაქციას.
Hover-ის მნიშვნელობები, რომლებიც ემთხვევა ნაგულისხმევს, მიჰყვება საბაზისო რედაქტირებებს, სანამ არ მოხდება მათი მორგება. ექსპორტირებული CSS საჭიროების შემთხვევაში მოიცავს hover წესს, focus-visible კონტურს, აქტიურ მოძრაობას და შემცირებული მოძრაობის წესს.
გადაიტანეთ CSS თქვენს პროექტში
დააკოპირეთ გენერირებული CSS და შესაბამისი HTML ღილაკი, ან ჩამოტვირთეთ სტილის ფაილი. კლასის სახელი ინარჩუნებს ორ ნაწილს დაკავშირებულს.
დააკოპირეთ, ჩამოტვირთეთ და შეინახეთ თქვენი ნამუშევარი
მარტივი კოდი, რომლის გამოყენებაც შეგიძლიათ პირდაპირ
აირჩიეთ გამორჩეული კლასის სახელი, დააკოპირეთ CSS მისი ჩანართიდან, შემდეგ დააკოპირეთ ღილაკი HTML-დან. ჩამოტვირთვა ინახავს .css ფაილს, რომელსაც კლასის სახელი ჰქვია; ის არ ჩამოტვირთავს სრულ ვებგვერდს.
გადახედვა და კოდის გენერირება ხდება თქვენს ბრაუზერში. სტუდია ცდილობს დაიმახსოვროს ერთი მონახაზი ამ ბრაუზერის ლოკალურ მეხსიერებაში; ექსპორტი გაუკეთეთ ყველაფერს, რისი შენახვაც გსურთ. Reset აბრუნებს სტუდიას საწყის სტილზე.
ტექსტი და სტილები შედის. HTML და CSS გამოდის.
ატვირთვა არ არის საჭირო. JavaScript უზრუნველყოფს ცოცხალ რედაქტორს თქვენს ბრაუზერში. დააკოპირეთ HTML და CSS ცალ-ცალკე, ან ჩამოტვირთეთ CSS სტილის ფაილი. გენერირებული შრიფტების დასტა იყენებს შრიფტებს, რომლებიც ხელმისაწვდომია მაყურებლის მოწყობილობაზე.
