თანამედროვე css სტილები ღილაკებისთვის. როგორ შევქმნათ მოდური ღილაკები სუფთა CSS-ის გამოყენებით
ვლად მერჟევიჩი
სტანდარტული ღილაკები შექმნილი ტეგის საშუალებით
ბრინჯი. 1. ორიგინალური და შეცვლილი ღილაკი
თქვენ შეგიძლიათ გამოიყენოთ სურათები ღილაკის გარეგნობის რადიკალურად შესაცვლელად, მაგრამ CSS 3-ის შესაძლებლობებთან შედარებით, ეს ვარიანტი ახლა უკვე გაშენებული ჩანს.
საფუძვლად ავიღებ ბრაუზერის ორიგინალ ღილაკს, რომელიც შეიცავს ხაზოვან ვერტიკალურ გრადიენტს და მომრგვალებულ კიდეებს.
კუთხეების დამრგვალების უმარტივესი გზა არის საზღვარი-რადიუსის თვისების გამოყენება, რაც მას სასურველ დამრგვალების რადიუსს აძლევს. როგორც ყოველთვის, ის არ მუშაობს ყველა ბრაუზერში, ამიტომ მოგიწევთ სრული ნაკრების დამატება. შედეგი შემდეგია.
Moz-საზღვარი-რადიუსი: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari 4 */ border-radius: 5px; /* IE 9, Safari 5, Chrome */
ღილაკების გამოჩენა სხვადასხვა ბრაუზერში ნაჩვენებია ნახ. 2.
ბრინჯი. 2. ღილები მომრგვალებული კუთხეებით
ზოგადად, ყველაფერი მოსალოდნელია. IE-ს ძველი ვერსიები არ უჭერს მხარს CSS 3-ს, დანარჩენები სწორად ქმნიან კუთხეებს, რომლებიც მე მჭირდება. რატომღაც Opera არ აჩვენებს ფონს ნაგულისხმევად, როგორც ამას სხვა ბრაუზერები აკეთებენ, მაგრამ Opera ცალკე იქნება განხილული.
ახლა სახალისო ნაწილი არის ვერტიკალური ხაზოვანი გრადიენტის გაკეთება. ამისათვის კვლავ იქნება გამოყენებული თითოეული ბრაუზერის ინდივიდუალური სტილი.
ფონი: -moz-linear-gradient(#00BBD6, #EBFFFF);
გრადიენტი განსაზღვრავს საწყის წერტილს, გრადიენტის კუთხეს, დაწყების ფერს და დასასრულს. ჩვენს შემთხვევაში, როდესაც გრადიენტი მიდის ვერტიკალურად ზემოდან ქვევით, საკმარისია მხოლოდ დარჩენილი პარამეტრების დაყენება ნაგულისხმევად.
Chrome, Safari
ფონი: -webkit-gradient(წრფივი, 0 0, 0 100%, from(#00BBD6), to (#EBFFFF));
აქ მიუთითებთ გრადიენტის ტიპს (წრფივი), გრადიენტის აპლიკაციის საწყის წერტილს (ზედა მარცხენა კუთხე), ბოლო წერტილს (ქვედა მარცხენა კუთხე), ასევე საწყის და დასასრულ ფერებს.
Internet Explorer
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00BBD6", endColorstr="#EBFFFF");
IE ბრაუზერი თავისი გზით მიდის და იყენებს ფილტრის თვისებას სხვადასხვა ეფექტებისთვის, მათ შორის გრადიენტისთვის. აქ ყველაფერი უფრო ტრივიალურია, მხოლოდ გრადიენტის საწყისი და დასასრული ფერები წერია.
ოპერა ისვენებს;
ჩვენ ვაერთიანებთ ბრაუზერების, კუთხეების და გრადიენტების ყველა თვისებას (მაგალითი 1).
მაგალითი 1: ხაზოვანი გრადიენტის ღილაკები
საკმაოდ ლამაზი გამოვიდა (ნახ. 3), მაგრამ ასევე აშკარაა განსხვავებები ორიგინალური ღილაკისაგან - ის ბრტყელად გამოიყურება, როგორც დაფას.
ბრინჯი. 3. ღილაკის ხედი გრადიენტით
თქვენ შეგიძლიათ კვლავ გააკეთოთ სასურველი ფორმის ღილაკი გრადიენტის გამოყენებით, "თამაშით" ფერებით. ორი გრადიენტური მნიშვნელობა საბედნიეროდ აღარ არის საკმარისი, Firefox და Safari გვთავაზობენ გამოსავალს.
ფონი: -moz-წრფივი-გრადიენტი(#D0ECF4, #5BC9E1, #D0ECF4);
ორი მნიშვნელობის ნაცვლად, ჩადეთ ფერების სასურველი რაოდენობა, გრადიენტი შეუფერხებლად გადავა ერთი ფერიდან მეორეზე.
Chrome, Safari
ფონი: -webkit-gradient(წრფივი, 0 0, 0 100%, from(#D0ECF4), to (#D0ECF4), color-stop(0.5, #5BC9E1));
ფერის გაჩერების პარამეტრი განსაზღვრავს წერტილს, სადაც გამოყენებული იქნება ახალი ფერი. მნიშვნელობა მერყეობს 0-დან 1-მდე.
მაგალითი 2: ღილაკები გაძლიერებული გრადიენტით
HTML 5 CSS 2.1 CSS 3 IE 9 Cr Op Sa Fx
მაგალითის შედეგი ნაჩვენებია ნახ. 4.
ბრინჯი. 4. გრადიენტი რა გრადიენტია საჭირო
ანალოგიურად, შეგიძლიათ შექმნათ ნებისმიერი სხვა გრადიენტი ღილაკზე ან სხვა ელემენტზე (ნახ. 5). ოღონდ ეს თავად გააკეთე, რის გამოც დავამატე სახელოსნოში.
ბრინჯი. 5. ასეთი განსხვავებული ღილაკები
ნება მომეცით შევაჯამოთ. შეგიძლიათ გააკეთოთ ღილაკი გრადიენტით და მომრგვალებული კუთხეებით სურათების გარეშე. თუმცა, ბრაუზერებთან არის დაბნეულობა და მერყეობა. ოპერას საერთოდ არ შეუძლია გრადიენტებთან მუშაობა IE 9-ში არის უსიამოვნო შეცდომა გრადიენტთან კუთხეებთან შერწყმისას (ნახ. 6).
ბრინჯი. 6. ფონის გადაფარვა კუთხეებზე IE 9-ში
კარგად, ახლა ჩვენ გავაკეთებთ "ლამაზმანებს" Firefox, Safari და Chrome ბრაუზერებისთვის.
ჯერ უნდა ჩამოტვირთოთ წყაროები და შეარჩიოთ დიზაინის თემა ღილაკებისთვის. თქვენ შეგიძლიათ აირჩიოთ თქვენთვის სასურველი დიზაინი. მაგალითად, ავიღოთ პირველი თემა, ვინონა.
ჩამოტვირთვა
მსგავსი სტატიები ამ თემაზე:
გახსენით ფაილი რედაქტორში index.htmlწყაროდან ჩვენ ვპოულობთ ტეგს, რომელიც გვაინტერესებს. ჩემს შემთხვევაში:
ამ კოდიდან ვიღებთ ხაზს კლასთან ღილაკი.
ჩვენ ვამაგრებთ კოდს ფაილის ნებისმიერ საჭირო ადგილას ჩვენი პროექტის კოდით ტეგს შორის
.
შეცვალეთ ღილაკის სახელი თქვენთვის საჭირო. ჩემს შემთხვევაში, მე შევცვლი სახელს "გახსენით"
დააკოპირეთ და ჩასვით ტეგებს შორის თქვენი პროექტის ინდექსის ფაილში.
მაგალითი გვიჩვენებს, რომ გარკვეული სტილი ემატება ღილაკს დამატებითი კლასის გამოყენებით, რომელიც შეესაბამება თემის სახელს.
ჩვენს შემთხვევაში ეს არის კლასი ღილაკი-ვინონა. აქედან გამომდინარე, დაემატება სტილები სახელად winona.
ეს ძალიან მოსახერხებელია, რადგან... თუ გსურთ ღილაკების დიზაინის შეცვლა, დაგჭირდებათ მხოლოდ დამატებითი კლასის სახელის შეცვლა ტეგში . და სტილები უკვე ჩაწერილია ფაილში button.css!
მე შევარჩიე რამდენიმე CSS ღილაკი, რომელიც, ვფიქრობ, შეიძლება გამოყენებულ იქნას ვებ პროექტებში.
CSS3 ღილაკების გენერატორი
შეხედე გენერატორს CSS3 ღილაკები Sanwebe-სგან:
ვარდისფერი CSS3 ღილაკი Pacifico შრიფტით
საყვარელი ვარდისფერი ღილაკი ( გარდა მცირე jQuery კოდისა, მუსიკის დასაკრავად და შიდა ტექსტის შესაცვლელად) მთლიანად შექმნილია CSS3-ზე დაყრდნობით:
3D ღილაკების კოლექცია
CSS3-ით შექმნილი 3D ღილაკების კოლექცია:
სოციალური 3D ღილაკები
შესანიშნავი სოციალური ღილაკები CSS3 და ხატულა შრიფტით:
ანიმაციური CSS3 ღილაკები
ანიმაციური CSS ღილაკები ფონის შაბლონებით. შეიძლება არ იმუშაოს Firefox 3.6 და IE10 ბრაუზერებში:
მრგვალი ანიმაციური CSS3 ღილაკები
აქ არის კიდევ რამდენიმე ანიმაციური ღილაკი, სადაც ტექსტის როტაცია მაუსის გადატანაზე იძლევა მართლაც მაგარ ეფექტს:
სუფთა წრის ღილაკები
აქ არის CSS3 მრგვალი ღილაკების კიდევ ერთი მაგალითი:
გადართვის ღილაკები CSS3-ში
კარგად შესრულებული რადიო ღილაკები შექმნილი CSS3 და ხატულა შრიფტით:
ანიმაციური CSS3 ღილაკი
საყვარელი 3D ღილაკი შექმნილი CSS3 და Google შრიფტებით:
CSS3 ღილაკის ეფექტები
ეს ღილაკები აჩვენებენ ანიმაციებს სხვადასხვა CSS3 თვისებების გამოყენებით:
პრიალა CSS3 ღილაკები
ახლა თქვენ შეგიძლიათ დარწმუნებული იყოთ, რომ პრიალა ღილაკების შექმნა მარტივად შეიძლება CSS3-ის გამოყენებით, აღარ არის Photoshop:
3D CSS3 ღილაკები
გასაოცარია, რისი გაკეთება შეგიძლიათ CSS3 :before და :after ფსევდოელემენტებით. შეამოწმეთ საოცარი 3D ღილაკები:
CSS3 შეცვლა
CSS3-ში გადართვის ღილაკის მაგალითი JavaScript-ის გამოყენების გარეშე:
3D ამობრუნების ღილაკის ეფექტი
CSS3-ით შექმნილ ღილაკზე დაწკაპუნების 3D ეფექტი:
ბრენდის ღილაკები
ლამაზი CSS ღილაკები პოპულარული ბრენდებიდან ჩატვირთვის ხატულების გამოყენებით:
მუქი მრგვალი ღილაკი
მრგვალი ღილაკი jQuery-ის გამოყენებით, ღილაკზე დაწკაპუნებისას ვარდნის ეფექტის მისაცემად:
CSS3 შეცვლა
CSS3-ით შექმნილი გადამრთველი:
ლამაზი ბრტყელი ღილაკები
ბრტყელი CSS ღილაკების კოლექცია ყველა შემთხვევისთვის, ანიმაციისა და ეფექტების გარეშე:
სოციალური გაზიარების ღილაკები
გაზიარების ღილაკების უფრო მიმზიდველი ვერსია, მაგრამ ფუნქციონირების გარეშე. დეველოპერის თქმით, ისინი უნდა მუშაობდნენ IE7+-ში:
საშობაო ღილაკი
CSS საშობაო ღილაკი მონაცემთა: urls-ის გამოყენებით, სურათის პირდაპირ დოკუმენტში ჩასმის მეთოდი:
რბილი ღილაკი
მრგვალი პრიალა ღილაკი შექმნილი CSS3-ით:
რბილი ღილაკი
ღილაკები იყენებენ მხოლოდ უნიკოდის სიმბოლოებს, რაც იძლევა ტექსტის ან ხატის შრიფტების გამოყენებას:
დიდი 3D ანიმაციური CSS3 ღილაკები
3D ანიმაციური CSS ღილაკების კიდევ ერთი ნაკრები ვებსაიტებისთვის. ანიმაცია შესრულებულია ანიმაციისა და საკვანძო კადრების თვისებების გამოყენებით:
ლითონის CSS3 ღილაკები
მეტალის CSS3 ღილაკების კოლექცია, რომლის სიმბოლოები შეიქმნა pictos შრიფტის გამოყენებით @font-face-ის გამოყენებით. მეტალის ეფექტისთვის გამოყენებული იქნა ყუთი-ჩრდილოვანი და ხაზოვანი გრადიენტური თვისებები:
მრგვალი CSS3 ღილაკები
მრგვალი ანიმაციური ღილაკების კიდევ ერთი კოლექცია CSS3-ში:
CSS3 დაწკაპუნებით სოციალური მედიის ღილაკები
ღილაკები იყენებენ მარტივ CSS3 თვისებებს, როგორიცაა გრადიენტები, box-shadows, text-shadows და ა.შ. "უმოქმედო" და "აქტიური" მდგომარეობები ასევე შედის ამ კომპლექტში:
მარტივი CSS3 ღილაკები
ლამაზი CSS ღილაკები:
3D ჩამოტვირთვის ღილაკი
ეს 3D ღილაკი იყენებს პერსპექტივის ტრანსფორმაციას. ის მუშაობს მხოლოდ ვებ-კიტზე დაფუძნებულ ბრაუზერებში:
საოცარი CSS3 სოციალური მედიის ღილაკები
დიდი ღილაკი
მყარი პრიალა CSS3 ღილაკი ჩრდილის ეფექტით ბოლოში. ღილაკი იყენებს შრიფტს სახელწოდებით Sansita One Google-ის კოლექციიდან:
მარტივი ღილაკები
რამდენიმე მარტივი CSS ღილაკი:
CSS3 სოციალური მედიის ღილაკები
მარტივი CSS ღილაკები
მარტივი CSS ღილაკების ნაკრები. მათი დაყენება და გამოყენება მარტივია. მათი მარტივად ინტეგრირება შესაძლებელია Font-Awesome-თან ან სხვა ბიბლიოთეკასთან:
ღილაკები პოკერის ჩიპის სახით
მარტივი ღილაკის მაგალითი პოკერის ჩიპის სახით. ის ასევე შეიძლება გამოყენებულ იქნას როგორც ღილაკი ჰოვერის ეფექტით:
სლაიდერის ღილაკი
კონცეფცია CSS სლაიდერის ღილაკები:
ადმინისტრატორის მენიუს ღილაკები
ადმინისტრაციული პანელი ( მენიუ ან ნავიგაცია) CSS3-ისა და შრიფტიანი ჩარჩოს გამოყენებით. ღილაკზე გადასვლისას აქტიური კლასი ემატება jQuery-ს გამოყენებით:
ღილაკზე შეკერილი
მარტივი ღილაკი ხაზით, რომელიც აჩვენებს CSS3-ის ძალას ფონის სურათის გამოყენების გარეშე:
მბრუნავი ღილაკი
მრგვალი ღილაკი მბრუნავი საზღვრით, რათა მიუთითებდეს მაუსის გადაადგილება:
ღილაკი CSS3-ში
რბილი ღილაკი შექმნილი CSS3-ით ამ მაგალითის საფუძველზე:
CSS3 ღილაკი მოცურების ბარათით
ეს CSS ღილაკები ჰგავს ყდიდან ამოვარდნილ ბარათებს. მათი გამოყენება შესაძლებელია ინფორმაციის საჩვენებლად, რომელიც უნდა იყოს დამალული, სანამ მომხმარებელი არ გააკეთებს არჩევანს:
CSS3 ღილაკების ანიმაცია ტკბილეულის სახით
ღილაკი ანიმაციით ჩატვირთვის სტატუსის საჩვენებლად:
CSS3 კონცენტრატორები
ლამაზი რადიო ღილაკები, რომლებიც იყენებენ jQuery-ს კლასის გადასართავად:
პრიალა ღილაკები
ლამაზი ღილაკების ნაკრები CSS ვებსაიტისთვის. სამგანზომილებიანი პრიალა გარეგნობის მისაცემად გამოიყენება სხვადასხვა თვისებები:
სანამ ღილაკებს გადავხედავთ, მოდით შევხედოთ ყველა მათგანისთვის საერთო პარამეტრებს.
HTML
ღილაკები გამოიყენებენ ძალიან მარტივ HTML კოდს:
გამოწერა
CSS
ასევე, ყველა ღილაკს ექნება საერთო პარამეტრები წარწერის ტექსტისთვის და გააუქმეთ ბმულები:
ButtonText (შრიფტი: 18px/1.5 Helvetica, Arial, sans-serif; ფერი: #fff; ) a (ფერი: #fff; ტექსტის დეკორაცია: არცერთი;)
როგორც წესი, მომხმარებელი ელის საკმაოდ რბილ ეფექტს მაუსის ბმულზე ან ღილაკზე გადახვევისას. და ჩვენს შემთხვევაში, ღილაკი იცვლის ზომას - ის იზრდება, აჩვენებს დამატებით შეტყობინებას.
ძირითადი CSS კოდი
დასაწყისისთვის, ჩვენ მხოლოდ უნდა მივცეთ ღილაკს ფორმა და ფერი. განსაზღვრეთ სიმაღლე 28 პიქსელი და სიგანე 115 პიქსელი, დაამატეთ მინდვრები და ბალიშები და ასევე მიეცით ღილაკს მსუბუქი საზღვარი.
#ღილაკი1 (ფონი: #6292c2; საზღვარი: 2px მყარი #eee; სიმაღლე: 28px; სიგანე: 115px; ზღვარი: 50px 0 0 50px; padding: 0 0 0 7px; overflow: დამალული; ჩვენება: დაბლოკვა; )
CSS3 ეფექტები
ზოგს მოსწონს, როცა უბრალო ღილაკს ახლავს საკმაოდ ბევრი CSS კოდი. ეს განყოფილება გთავაზობთ დამატებით CSS3 სტილებს ჩვენი ღილაკისთვის. მათ გარეშეც შეგიძლიათ, მაგრამ ისინი ღილაკს უფრო თანამედროვე იერს ანიჭებენ.
მოარგეთ ჩარჩოს კუთხეები და დაამატეთ გრადიენტი. ეს იყენებს პატარა ხრიკს მუქი გრადიენტით, რომელიც ურთიერთქმედებს ფონის ნებისმიერ ფერთან.
/*მომრგვალებული კუთხეები*/ -webkit-border-radius: 15px;
-moz-საზღვარი-რადიუსი: 15px;
საზღვარი-რადიუსი: 15px;
/*გრადიენტი*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
რჩება მხოლოდ სტილის დამატება ღილაკის გასაშლელად, როდესაც მაუსის ზემოდან დააჭერთ. ღილაკი უნდა იყოს 230 პიქსელის სიგანე, რათა აჩვენოს მთელი შეტყობინება.
#ღილაკი1:ჰოვერი (სიგანე: 230 პიქსელი; )
ფერის ტონის მარტივი შეცვლა
ძალიან მარტივი და პოპულარული CSS ეფექტი ღილაკისთვის. როდესაც მაუსის კურსორს ატარებთ, ფონის ფერის ტონი შეუფერხებლად იცვლება.
ძირითადი CSS კოდი
CSS კოდი ძალიან ჰგავს წინა მაგალითს. გამოყენებულია ფონის განსხვავებული ფერი და ფორმა ოდნავ შეცვლილია. ის ასევე ახდენს ტექსტის ცენტრს და აყენებს ღილაკის ხაზის სიმაღლეს ისე, რომ მოხდეს ვერტიკალური ცენტრირება.
#button2 (ფონი: #d11717; კონტური: 2px მყარი #eee; სიმაღლე: 38px; სიგანე: 125px; ზღვარი: 50px 0 0 50px; overflow: დამალული; ჩვენება: დაბლოკვა; ტექსტის გასწორება: ცენტრში; ხაზის სიმაღლე: 38px; )
CSS3 ეფექტები
დააყენეთ კუთხეების დამრგვალება, ფონის გრადიენტი და დამატებითი ჩრდილი. rgba-ს გამოყენებით ჩრდილს ვაქცევთ შავ და გამჭვირვალე.
/*მომრგვალებული კუთხეები*/ -webkit-border-radius: 10px;
-moz-საზღვარი-რადიუსი: 15px;
-moz-საზღვარი-რადიუსი: 10px;
საზღვარი-რადიუსი: 10px;
/*გრადიენტი*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*გრადიენტი*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
ფონი-სურათი: -moz-წრფივი-გრადიენტი(ზედა, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
ფონი-სურათი: -o-წრფივი-გრადიენტი(ზედა, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
ძირითადი CSS კოდი
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
#button3 (ფონი: #d11717 url("bkg-1.jpg"); ფონის პოზიცია: 0 0; ტექსტი-ჩრდილი: 0px 2px 0px rgba(0, 0, 0, 0.3); შრიფტის ზომა: 22px; სიმაღლე : 58px სიგანე: 0 0 50px;
CSS3 ეფექტები
ამ მაგალითში არაფერია განსაკუთრებული - მომრგვალებული კუთხეები და ჩრდილები.
/*მომრგვალებული კუთხეები*/ -webkit-border-radius: 5px;
-moz-საზღვარი-რადიუსი: 15px;
-moz-საზღვარი-რადიუსი: 5px;
საზღვარი-რადიუსი: 5px;
/*გრადიენტი*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
ამ შემთხვევისთვის ანიმაცია უფრო დიდხანს გრძელდება გლუვი და საინტერესო ეფექტის შესაქმნელად.
ძირითადი CSS კოდი
/*Transition*/ -webkit-transition: ყველა 0.8s ease;
-moz-გარდამავალი: ყველა 0.8s სიმარტივე;
CSS3 ეფექტები
-o-გარდამავალი: ყველა 0.8s სიმარტივე;
-ms-გარდამავალი: ყველა 0.8s სიმარტივე;
/*გრადიენტი*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
ამ შემთხვევაში ჩვენ გვაქვს ყველაზე დიდი ჰოვერ განყოფილება. ჩრდილის სიგრძე მცირდება და მინდვრები გამოიყენება ბნელი ზონის ნაზავის შესაქმნელად. ყველაფერი ერთად ქმნის ღილაკზე დაჭერის ილუზიას. გრადიენტის გადაბრუნება აძლიერებს ეფექტს.
#button4: hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8 ყუთი-ჩრდილი: 0px 4px rgba(0, 0, 0, 0.8); 0, 0), rgba(0, 0, 0, 0.4) ფონური სურათი: -moz-წრფივი-გრადიენტი(ქვემოთ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4); ) background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)): -ms-linear-gradient(); ქვედა, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) ფონური სურათი: ხაზოვანი-გრადიენტი (ქვემოთ, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));