მას შემდეგ, რაც გვერდებზე განლაგება უფრო რთული ხდება, დეველოპერებს საშუალება სჭირდებათ გაზომვის უფრო მეტი ერთეული დიზაინით. გარდა ჩვეულებრივი ინტერესი, em და REM და Pixels არსებობს ახალი ერთეული გაზომვის VW და VH, ორივე VMIN და VMAX დაკავშირებული მათ, უზრუნველყოფს უფრო ძლიერი გზები, რათა შეიქმნას ადაპტური დიზაინირომელიც ხშირად ხელს უწყობს @ Media Transition Points- ის გამოყენებას.
ჩვენ სცილდება ინტერესს
ტრადიციული CSS გაზომვის ერთეულები ვებ-დიზაინის შემდეგ პრობლემებს ქმნიან:
- გაზომვის პროცენტული ერთეული ყოველთვის არ მუშაობს, როგორც მოსალოდნელია. დეველოპერებს უნდა გახსოვდეთ გარე დეპოზიტები, ელემენტების ზომები. არ უნდა გამოიყენოთ გაზომვის პროცენტული ზომის სხეულის ელემენტის სიმაღლე. ჩაწერის ფონტის ზომა: 50% განსაზღვრავს ტექსტის ზომას მისი სტანდარტის ნახევარზე და არ ქმნის დამოკიდებულებას ტექსტის ზომასა და მის ელემენტის ზომას შორის.
- თითქმის შეუძლებელია ბრაუზერის ფანჯრის სხვადასხვა ზომის სრულყოფილი ფორმის ფიგურების შექმნა. ძალიან ძნელია იმის უზრუნველყოფა, რომ ელემენტს კარგად არის მოედანზე და ამავე დროს ადაპტირება.
გაზომვის ერთეული VW და VH დიდწილად ყველა ამ პრობლემის მოგვარებას.
იდეალური პროპორციების ხელშეწყობა
VW და VH- ის ერთეულების გამოყენებით, ძალიან ადვილია ვებ-გვერდებზე სრულყოფილი მოღვაწეების შექმნა. ეს ერთეული შეიძლება გამოყენებულ იქნას თითქმის ყველა ზომები cSS თვისებები. ამიტომ, თუ თქვენ უნდა შეიქმნას ელემენტს, რომ ნებისმიერი ბრაუზერის ფანჯარაში, ის იღებს 20% მისი სიგანე და რჩება მოედანზე, თქვენ უნდა მიუთითოთ იგივე ღირებულებები სიგანე და სიმაღლე თვისებები გამოყენებით VW საზომი ერთეული:
Div.twentysquare (ფონის: # 999 ; სიგანე: 20VW; სიმაღლე: 20VW; )
შევხედოთ დემონსტრირება ქვემოთ მოყვანილ მაგალითში, გადადით ბმულზე და ცდილობენ შეცვალოს ზომა ათვალიერებენ ერთეული, რომ ცვლილება ზომის მოღვაწეები.
იგივე მეთოდის გამოყენებით, თქვენ შეგიძლიათ მარტივად შექმნან მართკუთხედი, რომლის სიმაღლე ორჯერ მეტია, როგორც მისი სიგანე ბრაუზერის ფანჯარაში:
Div.networect (სიგანე: 20vw; სიმაღლე: 40VW;)
დააყენეთ ბანერი სრულყოფილი ზომის თანაფარდობა ძალიან მარტივია შემდეგი CSS კოდი:
Div.goldenrect (სიგანე: 100vw; სიმაღლე: 61.8VW; ფონის: წითელი;)
ოპტიმალური ტექსტი სკალირების ადაპტური ბლოკი, ჩაერთოს ყველა მოცულობის იმ პირობით, რომ ეს, უბრალოდ უნდა მითითებული შრიფტის ზომა VW საზომი ერთეულები.
თარგმანი - Djurka
ავტორიდან: მართკუთხედი შიგნით ოთხკუთხედებში: ეს არის ჩვენი ვებ-გვერდები ყოველთვის აშენებული. ჩვენ შევეცადეთ, რომ გათავისუფლდეს ამ შეზღუდვებს დიდი ხანია გამოყენებით CSS შექმნათ გეომეტრიული ფიგურები, მაგრამ ეს მაჩვენებლები არ იმოქმედა შინაარსი, რომელიც შიგნით ამშვენებს ელემენტები, ან, თუ როგორ სხვა ელემენტები განლაგებულია გვერდი შედარებით გაფორმებული.
ახალი CSS სპეციფიკა მოღვაწეები ცვლის ამჟამინდელ პოზიციას. მიერ წარმოდგენილი Adobe შუა რიცხვებში 2012, მიზნად ისახავს ვებ დიზაინერებს უნარი შეცვალოს ნაკადი შინაარსი და მის ირგვლივ შედარებით კომპლექსური მოღვაწეები - ის, რასაც ჩვენ ვერ მივაღწიეთ ადრე, თუნდაც გამოყენებით JavaScript.
მაგალითად, ყურადღება მიაქციეთ, თუ როგორ ტექსტშია ტექსტის ნაკადები შემდეგ დიზაინში. მოღვაწეების გარეშე, ტექსტს ექნება მართკუთხა ფორმა - დახვეწილი მიღება, რომელიც მომდევნო დონეზე აღწევს დიზაინს.
გაითვალისწინეთ, თუ როგორ ხდება ტექსტი ამ მაგალითში ფირფიტის კიდეების გასწვრივ. გამოყენებით CSS მოღვაწეები, ჩვენ შეგვიძლია შევქმნათ მსგავსი დიზაინი და ვებ გვერდი.
მოდით დეტალურად როგორ გამოიყურებოდეს მოღვაწეები და როგორ შეგიძლიათ დაიწყოთ მათი გამოყენება.
ბრაუზერის მხარდაჭერა
CSS მოღვაწეები კვლავ მხარს უჭერენ მხოლოდ WebKit Nightly და Chrome Canary, მაგრამ მათი დონის 1 მოდული მიაღწია კანდიდატის რეკომენდაციის სტატუსს, ამიტომ დაზუსტებული თვისებები და სინტაქსი საკმაოდ სტაბილურია. ეს ცოტა დრო დასჭირდება, სანამ დანარჩენი ბრაუზერები დაიწყებენ მათ შენარჩუნებას. ეს დონე კონცენტრირებულია ფიგურების იმ თვისებებზე, რომლებიც ფიგურის გარშემო შინაარსის ნაკადს შეცვლის. კერძოდ, იგი კონცენტრირებულია ფორმის გარეთ საკუთრებაზე და მასთან ასოცირდება.
კომბინაციაში სხვა ბოლო შესაძლებლობები, მაგალითად ჩასწორება და overlaying ნიღაბი, CSS ფილტრები და collance და გაერთიანების, CSS მოღვაწეები საშუალებას მოგვცემს შევქმნათ უფრო რთული და დახვეწილი დიზაინის გარეშე მიმართო გრაფიკული რედაქტორები, როგორიცაა Photoshop და Indesign ფაილი.
მომავალი CSS დონეების მოღვაწეები ასევე ყურადღებას უთმობენ შინაარსის შინაარსის დიზაინს. მაგალითად, დღეს, საკმარისია, რომ უბრალოდ შექმნათ rhombic ფიგურა CSS: უბრალოდ ჩართოთ ელემენტს 45 გრადუსი, და შემდეგ ჩართოთ შინაარსი შიგნით საპირისპირო მიმართულებაისე, რომ იგი მდებარეობს გვერდზე ჰორიზონტალურად. მაგრამ რობუმუსის შიგნით შინაარსი არ მიიღებს შესაბამის ფორმას და ყოველთვის დარჩება მართკუთხა. იმ დროისათვის ფორმის შიგნით ქონება ხორციელდება, ჩვენ შეგვიძლია გავაკეთოთ შინაარსი ძალიან rhombic, შექმნის მარკირებას, მსგავსი სურათის მსგავსი.
მალე CSS ფიგურები ასევე საშუალებას იძლევა ტექსტში შიგნით, როგორც ეს ბრილიანტები ნაცვლად ჩასწორება ან გამოყენებით overflow, თვით ტექსტში მდებარეობდა ნათესავი კიდეებს კონტეინერი.
Chrome Canary- ში CSS- ის გამოსაყენებლად საჭიროა Checkbox- ის ჩართვა, რაც საშუალებას მისცემს ხელმისაწვდომი ექსპერიმენტული თვისებები.
შექმნა CSS ფიგურა
თქვენ შეგიძლიათ გამოიყენოთ ფიგურა ელემენტის ფორმების თვისებების გამოყენებით. თქვენ გაივლის ფიგურა ფიგურა ხარისხის ღირებულება. ფუნქციის ფიგურა არის კოდის ნაწილი, სადაც თქვენ გაივლით პარამეტრებს, რომლებიც განსაზღვრავთ ფიგურას, რომელიც გსურთ გამოიყენოთ პუნქტში.
ციფრები შეიძლება შეიქმნას ერთ-ერთი შემდეგი ფუნქციის გამოყენებით:
თითოეული ფიგურა განისაზღვრება კომპლექტი ქულა. ზოგიერთი ფუნქცია აღწევს პარამეტრებს; სხვა - მიიღოს ოფსეტური პარამეტრების, მაგრამ ისინი საბოლოოდ მიაპყროს მოღვაწეები ელემენტს, როგორც კომპლექტი რაოდენობა. ჩვენ გავაანალიზებთ პარამეტრებს თითოეული ამ ფუნქციისთვის მაგალითებზე.
ფიგურა ასევე შეიძლება განისაზღვროს გამოსახულებისგან ალფა არხის მოხსნის გზით. როდესაც გამოსახულება გადადის ფორმის ქონებაზე, ბრაუზერი ხსნის გამოსახულებას გამოსახულების გამოსახულების ზღვარის ღირებულებით. ფიგურა განსაზღვრავს პიქსელებს, რომლის ალფა ღირებულება არის მითითებული ბარიერი. სურათს უნდა ჰქონდეს CORS თავსებადობა. თუ რაიმე მიზეზით გათვალისწინებული მიზეზი არ არის ხელმისაწვდომი (მაგალითად, არ არსებობს), მაშინ არ იქნება გამოყენებული ფიგურა.
ქვემოთ მოყვანილი ციფრები მიიღებს ფასეულობებს აღწერილი ფუნქციებს:
ფორმის გარეთ: იწვევს შინაარსს ფორმის (გარეთ)
ფორმის შიგნით: შინაარსი იღებს ფიგურის ფორმას შიგნიდან
თქვენ შეგიძლიათ გამოიყენოთ Shape-Outside ქონება კომბინაციაში Shape-Margin, რათა დაამატოთ გარე აბზაცის მთელი ფიგურა, რომელიც გადავა შინაარსი ფიგურა, რის გამოც სივრცეში მათ შორის. ასევე, როგორ და ფორმის გარეთ იღებს ფორმის ზღვარი ქონების, ფორმის შიგნით იღებს ფორმის padding ქონების, რომელიც დასძენს შიდა indent.
ფიგურის ან ფუნქციის თვისებების გამოყენებით, ფორმის ელემენტის გამოცხადება, შეგიძლიათ გააკეთოთ მხოლოდ ერთი ხაზი CSS კოდი:
ელემენტი (ფორმის გარეთ: წრე (); / * შინაარსი იქნება წრეების მითითებული წრე * /)
ელემენტი (ფორმის გარედან: URL (გზა / / სურათი-ერთად- shor.png);
ელემენტი (ფორმა - გარეთ: URL (გზა / / / სურათი - ერთად - ფორმის PNG);) |
მაგრამ ... თუ ამ ხაზის CSS- ს კოდის გამოყენება, ფიგურა არ იქნება გამოყენებული, თუ შემდეგი პირობები არ დაკმაყოფილდება:
ელემენტი უნდა იყოს მცურავი. Future CSS დონის მოღვაწეები საშუალებას გვაძლევს მოღვაწეთა არასამთავრობო მცურავი ელემენტები, მაგრამ არსებობს ასეთი შესაძლებლობა.
ელემენტი უნდა იყოს მითითებული. ელემენტებით განსაზღვრული სიმაღლე და სიგანე გამოყენებული იქნება კოორდინაციის სისტემის დასადგენად.
როგორც ხედავთ ფუნქციებს ზემოთ, ციფრები განისაზღვრება კომპლექტი ქულა. იმის გამო, რომ რაოდენობა აქვს კოორდინატებს, ბრაუზერი მოითხოვს კოორდინაციას სისტემას, სადაც თითოეული წერტილი უნდა განთავსდეს ელემენტზე. ამდენად, მაგალითად იმუშავებს ზემოთ, თუ მას ჰქონდა შემდეგი:
ელემენტი (float: მარცხენა, სიმაღლე: 10m; სიგანე: 15Em; ფორმის გარეთ: წრე ();
Element (float: მარცხენა; სიმაღლე: 10em; width: 15em; ფორმა - Outside: Circle ();) |
თუმცა, გარკვეული ზომის ამოცანა არ არის დაზარალებული მისი რეაგირებით (მოგვიანებით ვსაუბრობთ). მას შემდეგ, რაც თითოეული ფიგურა განისაზღვრება, როგორც კომპლექტი რაოდენობა მდებარეობს გამოყენებით წყვილი კოორდინატები, ცვლილება კოორდინატები წერტილი იმოქმედებს ის ფიგურა. მაგალითად, შემდეგი ფიგურა გვიჩვენებს ჰექსონს, რომელიც შეიძლება შეიქმნას პოლიგონის () ფუნქციის გამოყენებით. ფიგურა ექვს ქულას შედგება. იცვლება ჰორიზონტალური კოორდინაცია ფორთოხლის წერტილი შეიცვლება საბოლოო მაჩვენებელი და ასევე იმოქმედებს განთავსება content შიგნით / გარეთ ნებისმიერი ნივთი, რომლის მაჩვენებელი მიმართა.
თუ ელემენტს მოძრავი და უდრის მარჯვენა კიდეზე, ფიგურა მიმართა მას, შინაარსის მარცხენა შეიცვლება მისი ადგილმდებარეობა, როდესაც ერთი ფორთოხალი წერტილი კოორდინატები შიგნით Polygon () ფუნქცია შეიცვლება.
მინიშნება ბლოკის ფიგურა
CSS მოღვაწეები განისაზღვრება და შექმნილია საცნობარო ბლოკზე (საცნობარო ყუთში), სადაც ფიგურა შედგენილია. ელემენტის სიმაღლისა და სიგანის გარდა, ელემენტის ბლოკის მოდელის კომპონენტები - ზღვარი ყუთი, შინაარსის ყუთი, padding ყუთი და სასაზღვრო ყუთი ასევე არის დირექტორიები, რათა დადგინდეს ფიგურა ელემენტს.
ჩვეულებრივ, გარე დაბრუნების ერთეული (Margin Box) გამოიყენება, როგორც მინიშნება, ასე რომ, თუ ელემენტს, რომელიც თქვენ ვრცელდება ფიგურა უკვე აქვს გარე აბზაცის ქვემოთ, ფიგურა დასრულდება ზღვარზე გარე დაბრუნების და არა საზღვარი. თუ გსურთ გამოიყენოთ სხვა ღირებულებები ბლოკი მოდელი, შეგიძლიათ მიუთითოთ მათ თვისება ფიგურა, რომ თქვენ გაივლის ქონება ფიგურა:
ფორმის გარედან: წრე (250px 50% 50%) padding-box;
ფორმა - გარეთ: წრე (250px 50% 50%) padding - ყუთი; |
Padding-box სიტყვა ამ წესის განსაზღვრავს განაცხადის ფიგურა და შეზღუდვა სახით padding ყუთში (ფართობი შიდა ქედმაღლობა). წრე () ფუნქცია განსაზღვრავს წრე, მისი ზომა და განთავსება პუნქტთან შედარებით.
ფუნქციების გამოყენებით ციფრების განმარტება
ჩვენ დავიწყებთ იმ ფაქტს, რომ ჩვენ გავატარებთ მომხმარებლის avatar- ის წრიული იმიჯის ინფორმაციის ტექსტს, რაც შეეხება მომხმარებლის პროფილის ან გაწვევას.
გამოყენება CSS ფორმებს, ტექსტი გარშემო მომხმარებლის სურათი გაამარტივა, ნაცვლად გადარჩენის მართკუთხა ფორმის..
ჩვენ ვიყენებთ წრე () ფუნქციას, რათა გამოიყენოთ მრგვალი ფორმის პროფილი სურათის გამოყენებით შემდეგი მარკირების გამოყენებით:
Lorem Ipsum Dolor იჯდეს Amet, კონსერვაციული adipisicing ელიტ. Harum Itaque Nam Banditis საღებავი Eligendi quae adipisci?
Asumumenda Blanditiis Voluptas Tempore Porro quibusdam Beata Deleniti Deleniti Deleniti Deleniti Sapiente Dolorem შეცდომა! Soluta Soluta RepeRehenderIt Laudantium Optio Ipsam Ducimus Mollitia Mollitia Mollitia Moldi.
< img src = "//api.randomuser.me/0.3.2/portraits/men/7.jpg"alt \u003d "(! lang: პროფილის სურათი" / > !}< p > Lorem Ipsum Dolor იჯდეს Amet, კონსერვაციული adipisicing ელიტ. Harum Itaque Nam Banditis საღებავი Eligendi quae adipisci?< / p > < p > Asumumenda Blanditiis Voluptas Tempore Porro quibusdam Beata Deleniti Deleniti Deleniti Deleniti Sapiente Dolorem შეცდომა! Soluta Soluta RepeRehenderIt Laudantium Optio Ipsam Ducimus Mollitia Mollitia Mollitia Moldi.< / p > |
შეიძლება ითხოვოთ: "რატომ არ შეგვიძლია მივმართოთ სასაზღვრო რადიუსს დამრგვალებულ სურათებს?" პასუხი: სასაზღვრო რადიუსის ქონება არ იმოქმედებს შინაარსის შიგნით და მის ფარგლებს გარეთ, რომელსაც იგი გამოიყენება. ეს გავლენას ახდენს მხოლოდ ელემენტის ან ფონზე. ფონზე მოჭრილი მრგვალ კუთხეებზე, ყველა. ელემენტის შიგნით შიგნით დარჩება მართკუთხა და ელემენტის გარეთ შინაარსიც იქცევა, თითქოს ელემენტი მართკუთხა რჩება.
ჩვენ ვაპირებთ სასაზღვრო რადიუსის ქონების გამოყენებას, რათა მრგვალი გამოსახულება - აქ არის ის, რაც ჩვენ გავაკეთებთ იმისათვის, რომ მოგვწეროთ სურათების ან სხვა ნივთები გვერდზე:
img (float: მარცხენა, სიგანე: 150px; სიმაღლე: 150px; სასაზღვრო - რადიუსი: 50%; ზღვარი - მარჯვენა: 15px;) |
გარეშე CSS მოღვაწეები, ტექსტი ხედავს სურათს, როგორც მოედანზე და აკავშირებს კვადრატული ფიგურა და არა რაუნდი.
ბრაუზერში, რომელიც არ უჭერს მხარს CSS ფორმებს, მრგვალი სურათის გარშემო შინაარსი განთავსდება, თითქოს ეს არ არის რაუნდი. ეს არის ის, თუ როგორ გამოიყურება ძველი ბრაუზერები. შეცვალოს კონკრეტული ფიგურის გარშემო შინაარსის გამარტივება, გამოიყენეთ ფიგურის თვისებები.
iMG (float: მარცხენა; width: 150px; სიმაღლე: 150px; სასაზღვრო-რადიუსი: 50%; Shape-გარეთ: Circle (); ფორმის ზღვარი: 15px;)
iMG (Float: მარცხენა, სიგანე: 150px; სიმაღლე: 150px; სასაზღვრო - რადიუსი: 50%; ფორმა - გარეთ: წრე (); ფორმის - ზღვარი: 15px;) |
ამ კოდექსის დახმარებით, ტექსტს შეეძლება "ნახოს" მრგვალი ფიგურა, რომელიც მიმართავს სურათს, და დაამტკიცებს მას, როგორც ნაჩვენებია პირველ ეკრანზე. (თქვენ შეგიძლიათ გამოიყურებოდეს შედეგი.) ბრაუზერებში, რომლებიც არ უჭერენ მხარს მოღვაწეებს, ის გამოიყურება მეორე სურათზე.
თქვენ შეგიძლიათ გამოიყენოთ წრე () ფუნქცია სუფთა ფორმა ან გადასცემს პარამეტრებს. აქ არის მისი ოფიციალური სინტაქსი:
წრე () \u003d წრე ([
კითხვის ნიშნები აჩვენებს, რომ ეს პარამეტრები არის სურვილისამებრ და შეიძლება გაუქმდეს. პარამეტრების გამოტოვება მიიღებს ნაგულისხმევ ღირებულებებს. როდესაც თქვენ იყენებთ წრე (), როგორც ეს, ნაცვლად პირდაპირი მითითებით პოზიცია, რომ, ჩვეულებრივ, ცენტრში წრე იქნება ცენტრში ნივთი, რომელიც თქვენ გამოიყენოს იგი.
შეგიძლიათ დააყენოთ წრის რადიუსი გამოყენებით ნებისმიერი სიგრძის სიგრძე (PX, EM, PT, და ა.შ.) ასევე შეგიძლიათ დააყენოთ რადიუსი გამოყენებით პარამეტრების გამოყენებით უახლოესი-Side ან შორეული-Side, მაგრამ უახლოესი-Side არის default ღირებულება, რომელიც ნიშნავს იმას, რომ ბრაუზერი აიღებს რადიუსის მანძილს უახლოეს მხარეს, უახლოეს მხარეს, შორეული მხარე იყენებს მანძილიდან შორს მხარეს.
ფორმის გარედან: წრე (შორეული მხარე 25% 25%); / * განსაზღვრავს წრე, რომლის რადიუსი ტოლია ნახევარი ყველაზე გრძელი მხარე, რომელიც მდებარეობს 25% 25% კოორდინატთა სისტემაში * / ფორმის შიგნით: წრე (250px at 500px 300px); / * განსაზღვრავს წრე, რომლის ცენტრიც მდებარეობს 500px ჰორიზონტალურად და 300px ვერტიკალურად, რადიუსით 250px *
Ellipse () ფუნქცია, ასევე წრე (), იგივე ფასეულობების მქონე, გარდა იმ შემთხვევებისა, როდესაც რადიუსის პარამეტრის ნაცვლად, მას ორი რადიუსი აქვს ღერძის გასწვრივ, მეორე - ღერძზე.
ელიფსი () \u003d ელიფსი ([
Inset () ფუნქცია არ არის პირდაპირ დაკავშირებული წრე ან ელიფსს, იგი გამოიყენება მართკუთხა ფორმის შექმნა ელემენტში. მას შემდეგ, რაც ნივთები ორივე მართკუთხა, არ არის საჭირო, რათა შექმნას მართკუთხედი. ამის ნაცვლად, ჩანართი () შეგიძლიათ დაგვეხმაროთ შექმნა ოთხკუთხედს მომრგვალებული კუთხეებით, რომ შინაარსი ჩაედინება მომრგვალებული კუთხეებით.
Inset () ფუნქცია იღებს ერთიდან ოთხ ოფსეტური პარამეტრების, რომელიც განსაზღვრავს ოფსეტური შედარებით edgens of საცნობარო ერთეულის, რომელიც განსაზღვრავს ადგილმდებარეობის შიგნით ელემენტს. მრგვალდება კუთხეები ზუსტად ისევე, როგორც სასაზღვრო რადიუსს, ერთ-ერთ ოთხ ღირებულებას, საკვანძო მრგვალებით.
inset () \u003d Inset (Offset (1,4)?)
inset () \u003d Inset (Offset (1, 4) [მრგვალი< border - radius > ] ? ) |
შემდეგი კოდი ქმნის მართკუთხედს მრგვალ კუთხეებთან მცურავი ელემენტებით.
Element (Float: მარცხენა; width: 250px; სიმაღლე: 150px; Shape-გარეთ: Inset (0px ტურში 100px) სასაზღვრო-Box;)
Element (Float: მარცხენა; width: 250px; სიმაღლე: 150px; Shape - Outside: Inset (0px ტურში 100px) სასაზღვრო - Box;) |
ეს უკანასკნელი თვისება მოღვაწეები პოლიგონზე (), რომელიც განსაზღვრავს უფრო რთული ორაზროვანი მოღვაწეები გამოყენებით ნებისმიერი რაოდენობა. ფუნქცია იღებს ორთქლის კოორდინატებს, სადაც თითოეული წყვილი განსაზღვრავს პოზიციას.
მომდევნო მაგალითში, მცურავი სურათი მდებარეობს მარჯვენა ზღვარზე, ეკრანის მთელ სიმაღლეზე და ხედვის ხედვის გამოყენებით. ჩვენ გვინდა, რომ ტექსტი მარცხნივ hourglass შიგნით გამოსახულება, და ჩვენ ვიყენებთ Polygon () ფუნქცია, რათა დადგინდეს არასტანდარტული ფიგურა გამოსახულება.
CSS ზემოთ გამოსახულების კოდი ასეთია:
img.right (float: right; სიმაღლე: 100vh; width: calc (100vh + 100vh / 4); Shape-გარეთ: Polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 , 45% 40%);)
img. მარჯვენა (Float: მარჯვენა, სიმაღლე: 100Vh; სიგანე: Calc (100vh + 100vh / 4); ფორმის გარეთ: პოლიგონი (40% 0, 100% 0, 100% 100%, 40% 60%, 45% 60%, 45% 40%);) |
შეგიძლიათ დააყენოთ კოორდინატები რაოდენობა, რომელიც განსაზღვრავს ფიგურა ერთეული სიგრძის ან პროცენტული, როგორც მე. ეს კოდი მისცემს აუცილებელი შედეგი, მაგრამ, როგორც ხედავთ, ფუნქცია ფიგურა არ იმოქმედებს დარჩენილი ნაწილების იმიჯის გარეთ მითითებულ ფიგურა. ფაქტია, რომ გამოყენების ფუნქცია ფიგურა ელემენტი - არის თუ არა ეს გამოსახულება ან კონტეინერი ან რაღაც - არ იმოქმედებს არაფერი, გარდა ფართობი ახდენს მობილურისთვის. ფონზე, საზღვრები და ყველაფერი დარჩება უცვლელი.
ვიზუალურად წარმოადგინოს შექმნილი პოლიგონი, ჩვენ გვჭირდება "მორთვა" გამოსახულების ნაწილების ფიგურის გარეთ. ეს დაგვეხმარება CPS ნიღბების მოდულის სპეციფიკაციისგან კლიპის გზას.
კლიპის გზას ქონება იღებს ფორმის იგივე ფუნქციებს და ფიგურის ქონებას. თუ ჩვენ, იგივე მრავალკუთხა ფიგურა, რომელიც ჩვენ გამოიყენება Shape-Outside ქონება, კლიპი PATH ქონება, რომელიც DOit ნაწილი იმიჯის გარეთ ფიგურა.
img.right (float: right; სიმაღლე: 100vh; width: calc (100vh + 100vh / 4); Shape-გარეთ: Polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60 %, 45%, 40%); / * ჩასწორება სურათები კონტურის ფიგურა * / CLIP-Path: Polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45%, 60%, 45 % 40%);)
img. მარჯვენა (Float: მარჯვენა, სიმაღლე: 100Vh; სიგანე: Calc (100vh + 100vh / 4); ფორმის გარეთ: პოლიგონი (40% 0, 100% 0, 100% 100%, 40% 60%, 45% 60%, 45% 40%); / * Trimming სურათები კონტური ფიგურა * /კლიპი - Path: Polygon (40% 0, 100% 0, 100% 100%, 40% 100%, 45%, 60%, 45%, 40%); ) |
შედეგი ასე გამოიყურება:
კლიპის გზავნილის ქონება კვლავ მხარს უჭერს პრეფიქსებს, I.E. ეს იმუშავებს Chrome- ში, პრეფიქსით. თქვენ შეგიძლიათ ნახოთ დემო.
კლიპი-PATH ქონება არის მშვენიერი სატელიტები ფიგურა ფიგურა, როგორც ეს ეხმარება ვიზუალურად წარმოადგინოს ის ფორმები და მოსავლის ნაწილები გარეთ ფიგურა, ასე რომ თქვენ ძალიან ხშირად მათი გამოყენება.
Polygon () ფუნქცია ასევე იღებს სურვილისამებრ სიტყვა შევსება, რომელიც შეიძლება იყოს არც nonzero ან evontodd. იგი განსაზღვრავს, თუ როგორ განლაგებულია პოლიგონის შიგნით. შეამოწმეთ SVG შევსების წესი ქონების შესახებ.
გამოსახულების გამოყენებით ფიგურის განსაზღვრა
გამოსახულების გამოყენებით ფიგურის დასადგენად, ალფა არხი უნდა იყოს წარმოდგენილი გამოსახულებაში, საიდანაც ბრაუზერი ამოიღებს სურათს.
ფიგურა განსაზღვრავს პიქსელებს, რომელთა ალფა ღირებულება უფრო მაღალია, ვიდრე გარკვეული ბარიერი. ნაგულისხმევი ბარიერის ღირებულება არის OK (სრულიად გამჭვირვალე), ან შეგიძლიათ მიუთითოთ იგი პირდაპირ ფორმის გამოსახულების ბარიერის საკუთრებაში. ამდენად, ნებისმიერი გაუმჭვირვალე პიქსელი შეიძლება გამოყენებულ იქნას გამოსახულების მიერ განსაზღვრული ფიგურის ნაწილად.
მომავალი დონის CSS მოღვაწეები საშუალებას მისცემს ალფა არხის ნაცვლად გამოსახულების სიკაშკაშის მონაცემების გამოყენებას. თუ ეს მოხდება, ფორმის გამოსახულება-ბარიერი გაგრძელდება, რათა შეიტანოს ბარიერი ან სიკაშკაშე ან ალფა არხისთვის, რაც დამოკიდებულია შეცვლის მდგომარეობაზე.
ჩვენ ვიყენებთ შემდეგ სურათს, რათა დადგინდეს ელემენტის ფიგურა და აიძულოს ტექსტი ამტკიცებს:
რა თქმა უნდა, თუ ელემენტს მიაღწევთ, ფონზე უნდა მოერგოს მითითებულ ფიგურას. ნიღბების მოდულის ნიღაბი-გამოსახულების ქონება (შესაბამისი პრეფიქსებით) ხელს შეუწყობს ნიღბების მოდულს, რადგან კლიპის გზავნილის ქონება არ იღებს ალფა არხის ღირებულებას. შედეგი ასე გამოიყურება:
თუ თქვენ შექმნით კომპლექსურ მოღვაწეებს, შეიძლება მოსახერხებელი იყოს სურათის გამოყენებით ფიგურისთვის. ეს საშუალებას მისცემს გამოიყენოს Alpha Image Channel Photoshop, ნაცვლად პარამეტრების რაოდენობა ხელით.
თქვენ ასევე იქნება მოსახერხებელი გამოიყენოთ გამოსახულება ნაცვლად ფიგურა, როდესაც თქვენ გაქვთ ბევრი მცურავი ელემენტები ან weate გამონაკლისი შიგნით ელემენტს - რადგან ამ მომენტში არ არსებობს შესაძლებლობა გამოაცხადოს რამდენიმე ფიგურა ერთი ელემენტისთვის. მაგრამ თუ გამოსახულება შეიცავს რამდენიმე სფეროს, ბრაუზერი ამოიღებს ამ ტერიტორიებს და იყენებს მათ.
CSS მოღვაწეები საპასუხო დიზაინით
CSS CSS მოღვაწეები მოდის საპასუხო დიზაინი? ფორმის გარედან არსებული სპეციფიკაცია მოიცავს ამ მომენტში, რადგან ის საშუალებას გაძლევთ შექმნას ელემენტის ზომა ან პროცენტული ან სიგრძის ერთეულში, ასევე ფიგურის განსაზღვრის რაოდენობა (ფიგურის ფუნქციის პარამეტრების) როგორც პროცენტული. ეს იმას ნიშნავს, რომ მოცემული ფორმის გარე ელემენტი სრულად შეიძლება იყოს სრულად რეაგირება, ისევე როგორც ნებისმიერი მცურავი ელემენტი, რომელიც განსაზღვრულია პროცენტებში მითითებულ ზომებზე.
ფორმის შიგნით ქონება ჯერ არ არის რეაგირება, მაგრამ იმიტომ, რომ ეს უკვე გადავიდა 2 მოდულის დონეზე. ბევრი მისი ამჟამინდელი შეზღუდვები მომდევნო დონეზე გაგრძელდება.
ინსტრუმენტები შექმნის მოღვაწეები
კომპლექსური მოღვაწეების შექმნა ფუნქციების გამოყენებით შეიძლება იყოს შრომატევადი ამოცანა, მით უმეტეს, თუ თქვენ შექმნით ფიგურა პლურალიზებას და კოორდინატებს პოლიგონის გამოყენებით. საბედნიეროდ, ვებ პლატფორმის გუნდი Adobe მუშაობს ინტერაქტიული ხელსაწყოების წარმოებაზე, რათა ეს პროცესი ბევრად უფრო ადვილია. დათვი Travis შეიქმნა კოლექცია ინსტრუმენტები შექმნის მოღვაწეები, რომელიც საშუალებას გვაძლევს ვიზუალურად შექმნას პოლიგონალური მოღვაწეები. ინსტრუმენტი ქმნის ფიგურის ფუნქციას. ეს შეიძლება იყოს სასარგებლო, მაგრამ აქვს თავისი შეზღუდვები, თუ თქვენ გადადით კონკრეტული სურათის საფუძველზე, რადგან ინსტრუმენტი არ ითვალისწინებს ასეთ შესაძლებლობას.
Adobe ვებ პლატფორმით შემუშავდა უფრო მოწინავე და ინტერაქტიული ინსტრუმენტი. ინსტრუმენტი ცოტა ხნის წინ გაათავისუფლეს, როგორც გაფართოება უფასო რედაქტორი ფრჩხილებში. ეს გაძლევთ საშუალებას ვიზუალურად და შეცვალონ ფორმის უფლება ბრაუზერის, და აქვს უნარი ამჟამად ესკიზი, რომელიც განახლებები ღირებულებების ფორმის სტილი მაგიდასთან, როდესაც თქვენ შეცვლის მათ გვერდზე. ეს საშუალებას იძლევა მყისიერი ვიზუალური კავშირი შენი ცვლილებები, რომელიც საშუალებას გაძლევთ ნახოთ, თუ როგორ მოღვაწეები ურთიერთქმედებენ სხვა ელემენტებთან გვერდზე.
რედაქტირება პოლიგონური ფიგურა უფლება ბრაუზერში გამოყენებით Preview რეჟიმი ფრჩხილებში. ეკრანის ჩანაწერი გააკეთა razvan caliman.
ეს ინსტრუმენტი აუცილებელია, რადგან იგი ხელს უწყობს ციფრების შექმნას, რედაქტირებას და დებატებს. Razvan Caliman, რომელიც განმარტავს, თუ როგორ უნდა მოვუწოდებთ ფორმის რედაქტორი ფრჩხილებში და დაიწყოს გამოყენებით.
მომავალი: CSS გამონაკლისი
ციფრების CSS სპეციფიკა იყო CSS მოღვაწეობის და გამონაკლისებისადმი მიძღვნილი სპეციფიკაცია, მაგრამ ეს იყო გაყოფილი. მიუხედავად იმისა, რომ CSS- ის ფიგურა განსაზღვრავს ფორმის შიგნით და ფორმის გარე თვისებებს, გამონაკლისი CSS განსაზღვრავს თვისებებს, რომლებიც ქმნიან შინაარსს, რომ არაკონკურენტულ ელემენტებს, მაგალითად, აბსოლუტური პოზიციონირებისთვის. ისინი საშუალებას იძლევიან, გააძლიერონ მთელი ფიგურა სხვადასხვა მხარის შინაარსით, როგორც ქვემოთ მოცემულ სურათზე.
მომავალში, CSS გამონაკლისი საშუალებას მისცემს შინაარსს, რომ ასეთი ფიგურა, როგორც მოჭრილი, როგორც ჩანს, ჟურნალი. სპილენძი ასევე შეიძლება იყოს მრგვალი, და ტექსტი ასევე შეეხება მას..
ახალი დონე მოღვაწეები
მოღვაწეების ამჟამინდელი CSS სპეციფიკაცია მხოლოდ პირველი ნაბიჯია. მალე, ახალი შესაძლებლობები მოგვცემს უფრო მეტ კონტროლს. აუცილებელია შინაარსის შექმნა და გაძლიერება, ასე რომ, ჩვენთვის უფრო ადვილი იქნება, რომ ცხოვრების საუკეთესო დიზაინში ჩართოთ ფორმატის ჩართვა. დღემდე, სპეციფიკა რედაქტორები ორიენტირებულია ფორმის გარედან, და შეგიძლიათ იხილოთ CSS- ის მოღვაწეობის მხარდაჭერა დიდი რაოდენობა ბრაუზერები 2014 წლის ბოლოსთვის.
თქვენ შეგიძლიათ გამოიყენოთ მოღვაწეები, როგორც პროგრესული გაფართოების სტრატეგიის ნაწილი, იციან, რომ მათ აქვთ მისაღები ჩანაცვლება არასამთავრობო ბრაუზერებში. მე ცოტა ხნის წინ დავიწყე მათი ნახვა და ჩანაცვლება საკმაოდ მისაღებია. უფრო კომპლექსური დიზაინისთვის შეგიძლიათ გამოიყენოთ სკრიპტი ბრაუზერის მხარდაჭერის შესამოწმებლად და რაიმე ჩანაცვლება, თუ არ არსებობს მხარდაჭერა. თქვენ ასევე შეგიძლიათ გამოიყენოთ მოდერნიზმის ტესტები ამ სკრიპტის გამოყენებით, რათა შეამოწმოთ თუ არა ფორმის გარეთ ქონება შენარჩუნებულია, ან ჩამოტვირთოთ საკუთარი ასამბლეა, რომელიც მოიცავს ამ გამოცდას.
CSS მოღვაწეები საშუალებას გვაძლევს შევქმნათ სხვა ხიდი ბეჭდვით და ვებ დიზაინს შორის. მაგალითები ამ სტატიაში არის მარტივი, მაგრამ მათ უნდა მოგცეთ საფუძველი დიზაინის შესაქმნელად ჟურნალი ან პოსტერი, გარეშე შემაშფოთებელია თუ არა თქვენ შეგიძლიათ ხელახლა ეკრანზე. ასე რომ თქვენ შეისწავლეთ - არა-მართკუთხა ნიშნებიდან მოღვაწეების ანიმაციისთვის - ახლა ექსპერიმენტების დრო.
ვლადი მერძეევიჩი
საიტებზე, სამკუთხედები გამოიყენება ყველა და ახლოს, როგორც ნაწილი დიზაინის ელემენტების, მაგალითად, ისინი ემსახურება როგორც მაჩვენებელი ზოგიერთი ობიექტი, ხელმძღვანელობს მკითხველს ყურადღება სწორი ადგილი. ასევე, სამკუთხედები ასრულებენ დეკორატიულ ფუნქციებს, რაც ბლოკებს, სადაც ისინი იყენებენ, უფრო ელეგანტურ და თანამედროვე. ფიგურაში 1 აჩვენებს მაგალითს სამკუთხედის გამოყენებით დიზაინში.
ნახაზი. 1. სამკუთხედები ვებ დიზაინში
პირდაპირ სამკუთხედს cSS ინსტრუმენტები შეუძლებელია, ასე რომ ორი მეთოდი საშუალებას გაძლევთ დაამატოთ საზღვარი და გარდაქმნას.
საზღვრის გამოყენებით.
მიუხედავად იმისა, რომ საზღვრის მეშვეობით საზღვრები არ არის პირდაპირ სამკუთხედთან, ეს არის საზღვრის გამოყენება ყველაზე ხშირად. თუ ელემენტის ნულოვანი სიგანე და სიმაღლე დააყენებთ, ასევე საკმარისად სქელი საზღვარს დააყენებთ, ვნახავთ ოთხი სამკუთხედის კომპლექტს (ნახ. 2). სიცხადე, საზღვრები ყველა მხარეს სხვადასხვა ფერები.
ნახაზი. 2. სასაზღვრო საზღვრის დამატება
მხოლოდ სასურველი საზღვრის დატოვება და დანარჩენი გამჭვირვალე, სასურველი ფერის სამკუთხედის მიღება (ნახ. 3).
ნახაზი. 3. გამჭვირვალე საზღვრებთან ელემენტი
მაგალითი 1 გვიჩვენებს სამკუთხედის დამატებით ბლოკზე, ფსევდო-ელემენტის მეშვეობით :: ბაზუდერო ელემენტს.
მაგალითი 1. სამკუთხედის ბლოკირება
აბსოლუტურად პოზიციონირებული ელემენტებისათვის, ნულოვანი სიგანე და სიმაღლე არ არის აუცილებელი.
საზღვრების კომბინაციის გამო, შეგიძლიათ მიიღოთ კიდევ ოთხი ტიპის სამკუთხედი, რომელიც, უკვე აღნიშნულ კომბინაციაში, გვაძლევს რვა ვარიანტს. მათი გამოჩენა და საჭირო კოდი ნაჩვენებია ცხრილში. ერთი.
| ხედი | სტილი |
|---|---|
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო-ზედა: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო მარჯვენა: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო ბოლო: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო-მარცხენა: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო-ზედა: 20px მყარი მწვანე; სასაზღვრო მარჯვენა: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო მარჯვენა: 20px მყარი მწვანე; სასაზღვრო ბოლო: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო ბოლო: 20px მყარი მწვანე; სასაზღვრო-მარცხენა: 20px მყარი მწვანე; | |
| საზღვარი: 20px მყარი გამჭვირვალე; სასაზღვრო-მარცხენა: 20px მყარი მწვანე; სასაზღვრო-ზედა: 20px მყარი მწვანე; |
მაგიდადან ჩანს, რომ უხილავი საზღვრები ადგენს ადგილს, განიხილავს მას, როდესაც ელემენტი პოზიციონირებაა. სტილი, ასევე, აუცილებელია დაამატოთ ნულოვანი სიგანე და სიმაღლე ან გამოიყენოს პოზიცია ქონება, როგორც გაკეთდა 1.
სამკუთხედი შეიძლება გაკეთდეს სხვა ფორმით, თუ საზღვრების სხვადასხვა სისქე. ასე რომ, ფიგურაში ნაჩვენები ბლოკის შექმნის კოდი. 4 მოცემულია მაგალითად 2.
ნახაზი. 4. მწვავე სამკუთხედი
მაგალითი 2. მკვეთრი სამკუთხედი
საზღვართან, ჩვენ ვიღებთ მყარი ფერადი სამკუთხედების, რათა შეიქმნას ფიგურა. 5 უნდა წავიდეს cunning და დააკისროს ერთი ელემენტი თავზე მეორე ერთად პატარა გადაადგილება. კიდევ ერთხელ, ფსევდო-ელემენტები დაგვეხმარება: ადრე და: შემდეგ (მაგალითად 3).
ნახაზი. 5. ჩარჩო კუთხეში
მაგალითი 3. Overlay სამკუთხედები
იმის გამო, რომ ჩვენ ვიყენებთ ერთ ელემენტს მეორეზე, ეს მეთოდი მხოლოდ ერთფეროვანი შევსების მიზნით შესაფერისია და არ არის შესაფერისი გრადიენტებისთვის ან ფონური სურათებისთვის.
ტრანსფორმაციის გამოყენება
ტრანსფორმაციის დახმარებით, ჩვენ შეგვიძლია დავუბრუნდეთ კვადრატულ ელემენტს 45 ° -ით და მიიღეთ რობუსი. ეს არ არის სამკუთხედი, როგორც ასეთი, ამიტომ ჩვენ უნდა დავტოვოთ protruding ნაწილი ჩვენთვის, და დანარჩენი დამალვა შემდეგ სხვა ელემენტს (მაგალითად 4).
მაგალითი 3. ტრანსფორმაცია
ამ მაგალითის შედეგი ნაჩვენებია ნახატზე. 6.
ნახაზი. 6. სამკუთხედი ჩრდილში
ონლაინ CSS3 გენერატორი შექმნას ციცაბო გრაფიკული ეფექტები და მოიპოვოს მათი CSS კოდი. თქვენ შეგიძლიათ ცალკე შეიცვალოს სტილის სხვადასხვა სახელმწიფოები, როგორიცაა: Hover: აქტიური და ა.შ. შენი ხელები იღებს ინტერფეისი კომპლექსური ჩრდილების, gradients, 3D ეფექტები, ეფექტები ტექსტით და ბევრად უფრო. პროექტს აქვს საკუთარი გალერეა ეფექტი, საიდანაც შეგიძლიათ დაიწყოთ თქვენი განვითარება. პროექტის გამორჩეული თვისება ის არის, რომ თქვენ შეგიძლიათ მიიღოთ სტილისთვის ცალკე ელემენტიმაგალითად, ჩრდილში ან გრადიენტი.
როდესაც პირველად შეიყვანეთ საიტი, ჩვენ გთავაზობთ, რომ შევქმნათ ცარიელი შეყვანის ველი, ღილაკები, ბლოკი ან აირჩიეთ მზა ნიმუში პროექტის გალერეადან. დავიწყოთ რაღაც მარტივი, მაგალითად, გეომეტრიული მოღვაწეების გალერეიდან. არჩევა გალერეა ნიშანი Yin-Yang და დააჭირეთ "მიიღეთ კოდი" ზედა მარჯვენა კუთხეში:
ნაჩვენები იქნება მზა CSS მიმდინარე განვითარებისათვის, ასევე hTML- ის მაგალითი კოდი. პროექტის გალერეას აქვს 20-ზე მეტი ბლანკზე სხვადასხვა CSS მოღვაწეობისთვის და, რა თქმა უნდა, შეგიძლიათ შექმნათ თქვენი საკუთარი.
გალერეის მონაკვეთისთვის ჩვენ ვხედავთ ღილაკებს, ტექსტური ველი, ეფექტი პირდაპირ ტექსტი, აღნიშნული მოღვაწეები და კომპლექტი gradients. ჩვენ ვთამაშობთ ტექსტის ეფექტს:
საიტი - Wow ეს "S 3D!
მან უნდა შეამჩნია, რომ CSS გენერირებული საოცრად ძალიან სუფთა და იკითხება, რომელიც ძალიან კმაყოფილია. მოდით შევხედოთ რაღაც სახის cute ღილაკს:
საიტის მაგარი ღილაკი.
დამატებითი ფუნქციები მოიცავს თქვენი მდგომარეობის შენარჩუნება localstorage ბრაუზერი. თუ შემთხვევით დაიხურა ჩანართი, მაშინ მომდევნო დროს მიდიხარ საიტზე ყველა თქვენი ცვლილება დარჩება თქვენთან ერთად.
არასტანდარტული შრიფტის გამოყენებისას Google შრიფტები. EnjoyCss ავტომატურად დასძენს მათ, როგორც მაგალითი HTML. ჩემს შემთხვევაში, ტექსტისა და ღილაკებისათვის ეს ასეა:
საბოლოო CSS საკმაოდ bulky, ამიტომ მე მხოლოდ დასასრულს სტატია:
Ინ იანგი (
Float: მარცხენა;
სიგანე: 96px;
სიმაღლე: 48px;
პოზიცია: ნათესავი;
საზღვარი: 2px მყარი # F81;
სასაზღვრო ქვედა სიგანე: 50px;
-Webkit-Border-Radius: 100%;
სასაზღვრო-რადიუსი: 100%;
ფერი: RGBA (0,0,1);
-ო-ტექსტი-overflow: კლიპი;
ტექსტი-overflow: კლიპი;
-Webkit-Transform: Rotatez (-45DEG) Scalex (1) Scaley (1) Scalez (1);
ტრანსფორმაცია: Rotatez (-45DEG) Scalex (1) Scaley (1) Scalez (1);
ტრანსფორმაციის წარმოშობა: 50% 50% 0;
Yin-Yang :: ადრე (
სიგანე: 12px;
სიმაღლე: 12px;
პოზიცია: აბსოლუტური;
შინაარსი: "";
ზედა: 50%;
მარცხენა: 0;
საზღვარი: 18px მყარი # F81;
-Webkit-Border-Radius: 100%;
სასაზღვრო-რადიუსი: 100%;
შრიფტი: ჩვეულებრივი ნორმალური ნორმალური 100% / ნორმალური არალიზაცია, ჰელვეტიკა, სენსი-სერტი;
ფერი: RGBA (0,0,1);
-ო-ტექსტი-overflow: კლიპი;
ტექსტი-overflow: კლიპი;
ფონის: RGBA (255,255,255,1);
ტექსტი-ჩრდილი: არა;
-თბეკტი-ტრანსფორმაციის წარმოშობა: 50% 50% 0;
ტრანსფორმაციის წარმოშობა: 50% 50% 0;
}
Yin-Yang :: შემდეგ (
სიგანე: 12px;
სიმაღლე: 12px;
პოზიცია: აბსოლუტური;
შინაარსი: "";
ზედა: 50%;
მარცხენა: 50%;
საზღვარი: 18px მყარი Rgba (255,255,25,1);
-Webkit-Border-Radius: 100%;
სასაზღვრო-რადიუსი: 100%;
შრიფტი: ჩვეულებრივი ნორმალური ნორმალური 100% / ნორმალური არალიზაცია, ჰელვეტიკა, სენსი-სერტი;
ფერი: RGBA (0,0,1);
-ო-ტექსტი-overflow: კლიპი;
ტექსტი-overflow: კლიპი;
ფონის: # F81;
ტექსტი-ჩრდილი: არა;
-Webkit-Transform: Scalex (1) Scaley (1) Scalez (1);
ტრანსფორმაცია: Scalex (1) Scaley (1) Scalez (1);
-თბეკტი-ტრანსფორმაციის წარმოშობა: 50% 50% 0;
ტრანსფორმაციის წარმოშობა: 50% 50% 0;
}
ისიამოვნეთ- CSS-3DText (
კურსორი: მაჩვენებელი;
საზღვარი: არა;
შრიფტი: ჩვეულებრივი ნორმალური ნორმალური 72px / ნორმალური "Passero One", Helvetica, Sans-Serif;
ფერი: RGBA (255,255,255,1);
ტექსტის გასწორება: ცენტრი;
-ო-ტექსტი-overflow: კლიპი;
ტექსტი-overflow: კლიპი;
Text-shadow: 0 1px 0 rgb (204.204444), 0 2px 0 rgb (2011201.201), 0 3px 0 rgb (187,187,187), 0 4px 0 rgb (185,185,185), 0 5px 0 rgb (170,170,170), 0 6px 1px rgba (0 0.0,0,0980392), 0 0 5px rgba (0,0,0,0,0980392), 0 1px 3px rgba (0,0,0,0.298039), 0 3px 5px rgba (0,0,0,0, 0,2), 0 5px 10px rgba (0.0.0.0.247059), 0 10px 10px rgba (0.0.0.0.2), 0 20px 20px rgba (0.0.0.0.14902);
-WebKit-Transition: ყველა 300ms კუბური- bezier (0.42, 0, 0.58, 1);
-მოგრაფი-ტრანსფორმაცია: ყველა 300ms კუბური-ბეჟიერი (0.42, 0, 0.58, 1);
-ო-გარდამავალი: ყველა 300 მლნ კუბური-ბეჟიერი (0.42, 0, 0.58, 1);
გარდამავალი: ყველა 300ms კუბური- bezier (0.42, 0, 0.58, 1);
-Webkit-Transform: Scalex (1) Scaley (1) Scalez (1);
ტრანსფორმაცია: Scalex (1) Scaley (1) Scalez (1);
-თბეკტი-ტრანსფორმაციის წარმოშობა: 50% 50% 0;
ტრანსფორმაციის წარმოშობა: 50% 50% 0;
}
ისიამოვნეთ- CSS-3DText: Hover (
ფერი: RGBA (169,214,169,1);
ტექსტი-ჩრდილი: 0 1 1px 0 rgba (255,255,25,1,1,1), 0 2 კვადრატული მეტრი (255,255,25,1,1,1), 0 3x 0 rgba (255,255,25,1,1,25,2,25) , 2,1,25,25,25,25,2,2,1,25,1), 0 5px 0 rgba (255,255,255, 1), 0 6px 1px rgba (0,0,0,0,0980392), 0 0 5px rgba (0,0,0,0,0980392), 0 1 1PX 3PX RGBA (0,0,0,0,0,98039), 0 3PX 5PX RGBA (0,0,0,0.0.2), 0 - 5px 10px rgba (0,0,0,0.247059), 0 -7px 10px rgba (0,0,0,0,0.2), 0 -15px 20px rgba (0.0, 0.0.14902);
-Webkit-Transition: ყველა 200ms კუბური- bezier (0.42, 0, 0.58, 1) 10ms;
-მო-გარდამავალი: ყველა 200 მმ კუბური-ბეჟიერი (0.42, 0, 0.58, 1) 10ms;
-ო-გარდამავალი: ყველა 200ms კუბური-ბეზერი (0.42, 0, 0.58, 1) 10ms;
გარდამავალი: ყველა 200ms კუბური- bezier (0.42, 0, 0.58, 1) 10ms;
}
კავშირი-ღილაკი (
ჩვენება: Inline-Block;
Float: მარცხენა;
პოზიცია: ნათესავი;
კურსორი: მაჩვენებელი;
ზღვარი: 0 2% 0;
Padding: 12px 22px;
Overflow: ფარული;
საზღვარი: არა;
შრიფტი: ნორმალური ნორმალური თამამი 1.6EM / ნორმალური "Syncopate", Helvetica, Sans-Serif;
ფერი: # ECF0F1;
-ო-ტექსტი-overflow: კლიპი;
ტექსტი-overflow: კლიპი;
-ძალიან-
ფონის წარმოშობა: padding-box;
Background-Clip: სასაზღვრო ყუთი;
ფონის ზომა: ავტო ავტო;
-Webkit-box-shadow: 0 10px 0 0 rgba (178,49,49,1);
Box-shadow: 0 10px 0 0 rgba (178,49,49,1);
ტექსტური ჩრდილი: 0 0 0 RGB (196,80,78), 1px 1px 0 rgb (196,80,78), 2px 2px 0 rgb (196,80,78), 3px 3px 0 rgb (196,80,78) ), 4px 4px 0 rgb (196,80,78), 5px 5px 0 rgb (196,80,78), 6px 6px 0 rgb (196,80,78), 7px 7px 0 rgb (196,80,78), 8px 8px 0 rgb (196,80,78), 9px 9px 0 rgb (196,80,78), 10px 10px 0 rgb (196,80,78), 11px 11px 0 rgb (196,80,78), 12px 12px 0 RGB (196,80,78), 13px 13px 0 rgb (196,80,78), 14px 14px 0 rgb (196,80,78), 15px 15px 0 rgb (196,80,78), 16px 16px 0 rgb (196,80,78), 17px 17px 0 rgb (196,80,78), 18px 18px 0 rgb (196,80,78), 19px 19px 0 rgb (196,80,78), 20px 20px 0 rgb (196 80,78), 21px 21px 0 rgb (196,80,78), 22px 22px 0 rgb (196,80,78), 23px 23px 0 rgb (196,80,78), 24px 24px 0 rgb (196.80, 78) , 25px 25px 0 rgb (196,80,78), 26px 26px 0 rgb (196,80,78), 27px 27px 0 rgb (196,80,78), 28px 28px 0 rgb (196,80,78), 29px 29px 0 rgb (196.80.78), 30px 30px 0 rgb (196,80,78), 31px 31px 0 rgb (196,80,78), 32px 32px 0 rgb (196,80,78), 33px 33px 0 rgb ( 196,80,78), 34px 34px 0 rgb (196,80,78 ), 35px 35px 0 rgb (196,80,78), 36px 36px 0 rgb (196,80,78), 37px 37px 0 rgb (196,80,78), 38px 38px 0 rgb (196,80,78), 39px 39px 0 rgb (196,80,78), 40px 40px 0 rgb (196,80,78), 41px 41px 0 rgb (196,80,78), 42px 42px 0 rgb (196,80,78), 43px 43px 0 RGB (196,80,78), 44px 44px 0 rgb (196,80,78), 45px 45px 0 rgb (196,80,78), 46px 46px 0 rgb (196,80,78), 47px 47px 0 rgb (196.80.78), 48px 48px 0 rgb (196,80,78), 1px 1px 0 rgba (196.80,78,0,980392), 2px 2px 0 rgba (196.80,78,0,0,0,960784), 3px 3px 0 RGBA (196.80,78,0.941176), 4px 4px 0 rgba (196.80,78,0.921569), 5px 5px 0 RGBA (196.80,78,0,901961), 6px 6px 0 RGBA (196.80.78 0.882353), 7px 7px 0 RGBA (196.80,78,0.862745), 8px 8px 0 rgba (196.80,78,0,78,433137), 9px 9px 0 RGBA (196.80,78,0,0,819608), 10px 10px 0 RGBA (196.80,78, 0.8), 11px 11px 0 RGBA (196.80,78,0,780392), 12px 12px 0 RGBA (196.80,78,0,760784), 13px 13px 0 RGBA (196,80,78,0,0,0,0,0, 0,741,11,80,78,78,0,064,1176), 14px 14px 0 RGBA (196.80,78,0,721569), 15px 15px 0 rgba (196.80,78,0,701961), 16px 16px 0 RGBA ( 196,80,78.0 .682353), 17px 17px 0 rgba (196,80,78,0,0658824), 18px 18px 0 rgba (196,80,78,0,0639216), 19px 19px 0 RGBA (196,80,78,0,0619608) ), 20px 20px 0 rgba (196,80,78,0.6), 21px 21px 0 rgba (196.80,78,0,580392), 22px 22px 0 rgba (196.80,78,78,78,0784), 23px 23px 0 rgba (196.80,78,0,0,541176), 24px 24px 0 rgba (196.80,78,0,521569), 25px 25px 0 RGBA (196.80,78,0498039), 26px 26px 0 RGBA (196.80,78,0478431), 27px 27px 0 RGBA (196, 80,78.0.458824), 28px 28px 0 rgba (196.80,78,0,939216), 29px 29px 0 RGBA (196.80,78.0). 419608), 30px 30px 0 rgba (196.80,78,0.4), 31px 31px 0 rgba (196,80,78.0.380392), 32px 32px 0 rgba (196.80,78,0360784), 33px 33px 0 rgba (196,80, 78,0.341176), 34px 34px 0 rgba (196,80,78,0317647), 35px 35px 0 rgba (196.80,78,0,98039), 36px 36px 0 rgba (196.80,78,0,278431) 37px 37px 0 rgba (196.80,78,0.258824), 38px 38px 0 rgba (196,80,78,0.239216), 39px 39px 0 rgba (196.80,78,0.219608), 40px 40px 0 rgba (196, 80,78,0.2), 41px 41px 0 RGBA (196.80,78,080392), 42px 42px 0 rgba (196,80,78,0.156863), 43px 43px 0 rgba (196.80,78,0,7255), 44px 44px 0 rgba (196,80,78) , 017647), 45px 45px 0 rgba (196.80,78,0,980392), 46px 46px 0 rgba (196.80,78,0784314), 47px 47px 0 RGBA (196.80, 78,0788235), 48px 48px 0 RGBA (196.80,78) , 0,792157), 50px 50px 0 rgba (196,80,78.0);
-Webkit-Transform: Scalex (1) Scaley (1) Scalez (1);
ტრანსფორმაცია: Scalex (1) Scaley (1) Scalez (1);
-თბეკტი-ტრანსფორმაციის წარმოშობა: 50% 50% 0;
ტრანსფორმაციის წარმოშობა: 50% 50% 0;
}
კავშირი-ღილაკი: Hover (
ტექსტის გასწორება: ცენტრი;
Background: -Webkit-linear-Gradient (-90DEG, # CE6161 0, # EF6664 100%);
Background: -MOZ-Linear-Gradient (180deg, # CE6161 0, # EF6664 100%);
Background: Linear-Gradient (180deg, # CE6161 0, # EF6664 100%);
ფონის პოზიცია: 50% 50%;
ფონის წარმოშობა: padding-box;
-Webkit-background-clip: სასაზღვრო ყუთი;
Background-Clip: სასაზღვრო ყუთი;
-Webkit-background-size: ავტო ავტო;
ფონის ზომა: ავტო ავტო;
}
კავშირი-ღილაკი: აქტიური (
ყველაზე მეტი: 5px;
Background: -Webkit-Linear-Gradient (-90DEG, # FF8583 0, # FF5350 100%);
Background: -MOZ-Linear-Gradient (180deg, # FF8583 0, # FF5350 100%);
ფონის: წრფივი-გრადიენტი (180deg, # FF8583 0, # FF5350 100%);
ფონის პოზიცია: 50% 50%;
-Webkit-Background-Origin: Padding-Box;
ფონის წარმოშობა: padding-box;
-Webkit-background-clip: სასაზღვრო ყუთი;
Background-Clip: სასაზღვრო ყუთი;
-Webkit-background-size: ავტო ავტო;
ფონის ზომა: ავტო ავტო;
-Webkit-box-shadow: 0 5px 0 0 rgba (178,49,49,1);
Box-shadow: 0 5px 0 0 rgba (178,49,49,1);
