ჩვენ გადავხედავთ თითოეულ მაგალითს და ვნახავთ, როგორ გამოიყურება მათი HTML სტრუქტურა და სტილები ღილაკების სხვადასხვა მდგომარეობისთვის.
გთხოვთ გაითვალისწინოთ, რომ ანიმაციები/გადასვლები იმუშავებს მხოლოდ ბრაუზერებში, რომლებიც მხარს უჭერენ ამ CSS3 თვისებებს.
იმისთვის, რომ გაკვეთილზე კოდი არ იყოს ნაგავი, არ გამოვიყენებ პრეფიქსებს სხვადასხვა ბრაუზერებისთვის. თქვენ შეგიძლიათ ნახოთ ისინი არქივში მაგალითებით.
მაგალითი 1
ამ მაგალითში ჩვენ შევქმნით დიდ ღილაკს რამდენიმე ელემენტით. მას ექნება ხატულა, ძირითადი ტექსტი, ისარი მარჯვენა მხარეს და ფასი, რომელიც გამოჩნდება მხოლოდ მაშინ, როდესაც ჩვენ ზემოდან ვაჩერებთ.
HTML მარკირება
სტრუქტურა საკმაოდ მარტივია: გამოსახულების ხატულა და სხვა ელემენტები span ტეგებში:
ხელმისაწვდომია Apple-ზეᲐპლიკაციების მაღაზია
css
სტილებში ჩვენ დავრწმუნდებით, რომ გადასვლები სწორად არის დაყენებული იმ ელემენტისთვის, რომლის ანიმაცია გვსურს ჰოვერზე. ფასი იქნება უხილავი, დააყენეთ მისი გამჭვირვალობა 0-ზე. ბევრი box-shadow-ის გამოყენება საშუალებას მოგვცემს შევქმნათ რეალისტური ეფექტები:.a-btn(ფონი: წრფივი-გრადიენტი(ზედა, #a9db80 0%,#96c56f 100%); padding-left: 90px; padding-right: 105px; სიმაღლე: 90px; ჩვენება: inline-block; პოზიცია: შედარებითი; კონტური: 1px მყარი #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) ჩასმული, 1px 1px 3px rgba(0,0,0,0.2); საზღვრის რადიუსი: 4px; ათწილადი: მარცხნივ; ზღვარი: 10 პიქსელი 0 პიქსელი; გადინება: დამალული; გადასვლა: box-shadow 0.3s ease-in-out; ) .a-btn img(პოზიცია: აბსოლუტური; მარცხნივ: 15px; ზედა: 13px; საზღვარი: არცერთი; გარდამავალი: ყველა 0.3s ease-in-out; ) .a-btn .a-btn-slide-text(პოზიცია: აბსოლუტური; შრიფტის ზომა: 36 პიქსელი; ზედა: 18 პიქსელი; მარცხნივ: 18 პიქსელი; ფერი: #6d954e; გამჭვირვალობა: 0; ტექსტის ჩრდილი : 0px 1px 1px rgba(255,255,255,0.4); გარდამავალი: გაუმჭვირვალობა 0.2s ease-in-out; ) .a-btn-text(padding-top: 13px; ჩვენება: block; შრიფტის ზომა: 30px; text-shadow; 0px -1px 1px #80ab5d; ) .a-btn-text small( ჩვენება: ბლოკი; შრიფტის ზომა: 11px; ასოების ინტერვალი: 1px; ) .a-btn-icon-right(პოზიცია: აბსოლუტური; მარჯვნივ: 0px; ზედა: 0px სიმაღლე: 100%; სიგანე: 80px საზღვარი-მარცხნივ: 1px მყარი #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) ჩასმული; ) .a-btn-icon-right span( სიგანე: 38px; სიმაღლე: 38px; გამჭვირვალობა: 0.7; საზღვრის რადიუსი: 20px; პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზედა: 50%; ზღვარი: -20px 0px 0px - 20 პიქსელი; კონტური: 1 პიქსელი მყარი rgba(0,0,0,0,5); ფონი: #4e5c50 url(../images/arrow_down.png) ცენტრის განმეორების გარეშე; ყუთი-ჩრდილი: 0px 1px 1px rgba(255,255,255,. ) ჩასმული, 0px 1px 2px rgba(255,255,255,0.5); გადასვლა: ყველა 0.3s ease-in-out;)
ღილაკზე გადასვლისას ჩვენ შევცვლით ჩრდილს, ასევე ვაჩვენებთ ფასს და ვმალავთ სურათს:
.a-btn:hover( box-shadow: 0px 1px 1px rgba(255,255,255,0.8) ჩასმული, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img(0 transform: scale( ); გაუმჭვირვალობა: 0; ) .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span( გამჭვირვალობა: 1; )
აქტიურ მდგომარეობაში ჩვენ დავაჭერთ ღილაკს ჩრდილის დამატებით. ისრის ხატი მარჯვნივ გადიდდება:
.a-btn:active ( position:relative; top:1px; background:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) ჩასმული; საზღვრის ფერი: #a9db80; ) .a- btn:active .a-btn-icon-right span(transform: scale(1.4); )
მაგალითი 2
მეორე მაგალითი ძალიან წააგავს პირველს, მხოლოდ ჩვენ დავამატებთ ახალ ეფექტებს.
HTML მარკირება
ამ მაგალითში მარკირება იგივე იქნება, რაც პირველ მაგალითში.css
სტილები თითქმის იგივეა, რაც პირველ მაგალითში, ჩვენ უბრალოდ ვახდენთ ფერების ადაპტაციას. მაგრამ ჩვენ განსხვავებულ ჰოვერის ეფექტს გავაკეთებთ. ფასი გაიზრდება თავდაპირველ ზომამდე და ხატი გაქრება. ისრისთვის შეცვალეთ ფონის ფერი წითლად:.a-btn:hover( box-shadow: 0px 1px 1px rgba(255,255,255,0.8) ჩასმული, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img( opacity: ). .a-btn:hover .a-btn-slide-text( გამჭვირვალობა: 1; ტრანსფორმაცია: მასშტაბი(1); ) .a-btn:hover .a-btn-icon-right span( გამჭვირვალობა: 1; ფონის ფერი : #bc3532;)
აქტიური მდგომარეობა იქნება იგივე, რაც წინა მაგალითში. ჩვენ მხოლოდ ფერებს შევცვლით. ღილაკზე დაწკაპუნებისას ჩვენ ასევე მოვატრიალებთ ისარს:
.a-btn:active ( პოზიცია: შედარებითი; ზედა: 1px; ფონი: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) ჩასმული; საზღვრის ფერი: #80a9da; ) .a- btn:active .a-btn-icon-right span(transform: rotate(360deg); )
მაგალითი 3
ამ მაგალითში ჩვენ შევეცდებით გავაკეთოთ რაღაც სრულიად განსხვავებული. ღილაკი გაფართოვდება ჰოვერზე და გამოავლენს სხვა შეტყობინებას. ისრის ხატულა ოდნავ ბრუნავს.
HTML მარკირება
მაგალითში 3 მარკირება ოდნავ განსხვავებული იქნება წინა მაგალითებთან შედარებით. ტექსტი, რომელიც დაიწევს ქვემოთ, იქნება span ტეგში კლასით "a-btn-slide-text":Დარეგისტრირდით ახლა
css
ნორმალურ მდგომარეობაში ღილაკს ექნება გარკვეული სიმაღლე, ჩვენ მას გავაცოცხლებთ hover-ზე დამატებითი შეტყობინებების ჩვენების მიზნით. დამატებითი "a-btn-slide-text" შეტყობინება განთავსდება აბსოლუტურად და ჩვენ გავზრდით მის სიმაღლეს 0px-დან 30px-მდე ჰოვერის დროს..a-btn(ფონი: წრფივი-გრადიენტი(ზედა, #feda71 0%,#febb4a 100%); საზღვარი: 1px მყარი #f5b74e; საზღვრის ფერი: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px # d3d3d3, ჩასმული 0 1px 0 #fee395; padding: 0px 80px 0px 10px; სიმაღლე: 38px; ეკრანი: inline-block; პოზიცია: ფარდობითი; საზღვრის რადიუსი: 4px; float: მარცხნივ; ზღვარი: 10px; გადადინება: all 0.3s linear; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px; white space: nowrap; ფერი: #996633; text-shadow: 0 1px 0 #fedd9b; გარდამავალი: ყველა 0.3 წრფივი; ) ; შრიფტის ზომა: 13 პიქსელი; თეთრი სივრცე: nowrap; შრიფტი-ოჯახი: Georgia, serif; შრიფტის სტილი: დახრილი; ტექსტის შეწევა: 15 პიქსელი; გადინება: დამალული; ხაზის სიმაღლე: 30 პიქსელი ყუთი-ჩრდილი: -1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) ჩასმული;გარდამავალი: სიმაღლე 0,3s წრფივი; ; მარჯვნივ: 0px; ზედა: 0px; სიმაღლე: 100%; სიგანე: 52px; საზღვარი-მარცხნივ: 1px მყარი #f5b74e; box-shadow: 1px 0px 1px rgba(255,255,255,0.4) ჩასმული; ) .a-btn-icon-right span( სიგანე: 38px; სიმაღლე: 38px; გამჭვირვალობა: 0.7; პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზედა: 50%; ზღვარი: -20px 0px 0px -20px; ფონი: გამჭვირვალე url (../images/arrow_right.png) გამეორების გარეშე 50% 55%; გარდამავალი: ყველა 0.3 წრფივი; )
ჰოვერის დროს ჩვენ შევცვლით ღილაკის სიმაღლეს და დამატებით ტექსტს. ჩვენ ასევე ვატრიალებთ ისრის ხატულას 45 გრადუსით:
.a-btn:hover( სიმაღლე: 65px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) ჩასმული, 1px 1px 5px rgba(0,0,0,0.4); .a-btn:h-ზე მეტი btn-text( text-shadow: 0px 1px 1px rgba(0,0,0,0.2); ფერი: #fff; ) .a-btn:hover .a-btn-slide-text( სიმაღლე: 30px; ) .a -btn:hover .a-btn-icon-right span( გამჭვირვალობა: 1; ტრანსფორმაცია: როტაცია (-45 გრადუსი); )
როდესაც გააქტიურებულია, ღილაკი ოდნავ მოძრაობს და შეიცვლის ფერს ისე, რომ ღილაკი დაჭერილი გამოჩნდება:
.a-btn:active ( position:relative; top:1px; background: linear-gradient(top, #fec354 0%,#fecd61 100%); /* W3C */ საზღვრის ფერი: #d29a3a #cc9436 #c89133; text-shadow: 0 1px 0 #fee1a0; box-shadow: 0 1px 1px #d4d4d4, ჩასმული 0 1px 0 #fed17e; )
მაგალითი 4
მაგალითში 4, ჩვენ გამოვაყენებთ დამატებით შეტყობინებას, ისევე როგორც წინა მაგალითში, მაგრამ ამას გავაკეთებთ ახლა მარჯვენა მხარეს. როგორც ჩანს, ღილაკი ხსნის შეტყობინებას თავის შიგნით.
HTML მარკირება
მარკირება ამ მაგალითში იგივეა, რაც წინაში.css
ღილაკების სტილები წინა მაგალითის მსგავსი იქნება. ჩვენ შევცვლით მხოლოდ დამატებითი ტექსტის ფერს და პოზიციას:.a-btn(ფონი: ხაზოვანი-გრადიენტი(ზემო, #80a9da 0%,#6f97c5 100%); padding-left: 20px; padding-right: 80px; სიმაღლე: 38px; ჩვენება: inline-block; პოზიცია: შედარებითი; კონტური: 1px მყარი #5d81ab; ყუთი-ჩრდილი: 0px 1px 1px rgba(255,255,255,0.8) ჩასმული, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 8,8,4px, 1px : 20px; float: მარცხნივ; წმინდა: ორივე; ზღვარი: 10px 0px; გადინება: დამალული; გარდამავალი: ყველა 0.3s წრფივი; ) .a-btn-text(padding-top: 5px; ჩვენება: block; შრიფტის ზომა: 18px ; თეთრი სივრცე: nowrap; ტექსტი-ჩრდილი: 0px 1px 1px rgba(255,255,255,0.3); ფერი: #446388; გარდამავალი: ყველა 0.2s წრფივი; ) .a-btn-slide-text(პოზიცია:აბსოლუტური; სიმაღლე: 10 %; ზედა: 0px; მარჯვნივ: 52px; სიგანე: 0px; ფონი: #63707e; ტექსტის ჩრდილი: 0px -1px 1px #363f49; ფერი: #fff; შრიფტის ზომა: 18px; თეთრი სივრცე: nowrap; ტექსტის ტრანსფორმაცია : დიდი; ტექსტის გასწორება: მარცხნივ; ტექსტის შეწევა: 10 პიქსელი; გადინება: დამალული; სტრიქონის სიმაღლე: 38 პიქსელი; ყუთი-ჩრდილი: -1 px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) ჩასმა; გადასვლა: სიგანე 0,3წმ წრფივი; ) .a-btn-icon-right( პოზიცია: აბსოლუტური; მარჯვნივ: 0px; ზევით: 0px; სიმაღლე: 100%; სიგანე: 52px; საზღვარი-მარცხნივ: 1px მყარი #5d81ab; box-shadow: 1px 0px 1px rgba(255,255,25 ,0.4) ჩასმული; ) .a-btn-icon-right span( სიგანე: 38px; სიმაღლე: 38px; გამჭვირვალობა: 0.7; პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზედა: 50%; ზღვარი: -20px 0px 0px -20px ; ფონი: გამჭვირვალე url (../images/arrow_right.png) გამეორების გარეშე 50% 55%; გადასვლა: ყველა 0.3 წრფივი; )
ჰოვერის დროს ჩვენ გავზრდით ღილაკის ბალიშს მარჯვნივ, ისევე როგორც span ტეგის სიგანეს კლასით "a-btn-slide-text":
.a-btn:hover( padding-right: 180px; box-shadow: 0px 1px 1px rgba(255,255,255,0.8) ჩასმული, 1px 1px 3px rgba(0,0,0,0.2); n.a-b. a-btn-text( text-shadow: 0px 1px 1px #5d81ab; ფერი: #fff; ) .a-btn:hover .a-btn-slide-text( სიგანე: 100px; ) .a-btn:hover .a -btn-ხატი-მარჯვენა დიაპაზონი (გაუმჭვირვალობა: 1;)
აქტიურ მდგომარეობაში შექმენით დაწკაპუნების ეფექტი ჩრდილის გამოყენებით:
.a-btn:active ( პოზიცია: შედარებითი; ზედა: 1px; ფონი: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) ჩასმული; საზღვრის ფერი: #80a9da; )
მაგალითი 5
ამ მაგალითში ჩვენ გამოვიყენებთ სიმბოლოების შრიფტს ხატებისთვის. იდეა არის შემდეგი ეფექტის შექმნა: მაუსის ზევით გადასვლისას ხატი ქრება და ჩნდება მოძრავი ისარი.
HTML მარკირება
სტრუქტურა შედგება 4 span ტეგისგან ბმულის შიგნით. "a-btn-slide-icon" კლასის დიაპაზონი ანიმირებს ისარს, ის გადავა ზემოდან ქვევით.ზ Გადმოწერე ახლავე
css
ვინაიდან ჩვენ გამოვიყენებთ შრიფტს მარცხენა მხარეს ხატის გამოსატანად, დაგვჭირდება ამ შრიფტის ჩასმა.ჩვენ დავმალავთ ისარს მისი ზედა მნიშვნელობის დაყენებით -30 პიქსელზე.
@font-face ( font-family: "WebSymbolsRegular"; src: url("websymbols/websymbols-regular-webfont.eot"); src: url("websymbols/websymbols-regular-webfont.eot?#iefix") ფორმატი ("embedded-opentype"), url("websymbols/websymbols-regular-webfont.woff") ფორმატი("woff"), url("websymbols/websymbols-regular-webfont.ttf") ფორმატი("truetype"), url("websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular") ფორმატი("svg"); შრიფტის წონა: ნორმალური; შრიფტის სტილი: ნორმალური; .a-btn(საზღვრის რადიუსი: 50px; padding: 10px 30px 10px 70px; პოზიცია: ფარდობითი; float:მარცხნივ; ჩვენება: დაბლოკვა; overflow: დამალული; ზღვარი: 10px; ფონი: ხაზოვანი გრადიენტი(ზემო, rgba(255,255,255,1) 0%, rgba(246,246,246,1%) rgba(237,237,237,1) 100%); box-shadow: 0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); გარდამავალი 0px: esshase-ში out; ) .a-btn-symbol( font-family: "WebSymbolsRegular", cursive; ფერი: #555; შრიფტის ზომა: 20px; ტექსტის ჩრდილი: 1px 1px 2px rgba(255,255,255,0.5; position:ab); მარცხენა: 20px; ხაზის სიმაღლე: 32px; გარდამავალი: გამჭვირვალობა 0.3s ease-in-out; ) .a-btn-text( შრიფტის ზომა: 20 პიქსელი; ფერი: #d7565b; ხაზის სიმაღლე: 16 პიქს; შრიფტის წონა: თამამი; შრიფტი-ოჯახი: "Myriad Pro", "Trebuchet MS", sans-serif; ტექსტი -ჩრდილი: 1px 1px 2px rgba(255,255,255,0.5); ჩვენება: ბლოკი; ) .a-btn-slide-text( font-family: Arial, sans-serif; შრიფტის ზომა: 10px; ასოების ინტერვალი: 1p -ტრანსფორმაცია: დიდი; ფერი: #555; ტექსტი-ჩრდილი: 0px 1px 1px rgba(255,255,255,0.9); ) .a-btn-slide-icon (პოზიცია:აბსოლუტური; ზედა:-30px; 2px; სიმაღლე: 22px; სიმაღლე: ; ფონი: გამჭვირვალე url (../images/arrow_down_black.png) განმეორების გარეშე ზედა მარცხნივ; მარცხნივ: 20 პიქსელი; გამჭვირვალობა: 0.4; )
ჰოვერის დროს ჩვენ დავმალავთ მარცხნივ ხატულას და განუსაზღვრელი ვადით ვითამაშებთ ისრის ანიმაციას:
.a-btn:hover(ფონი: #fff; box-shadow: 0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); .a-btn:hover .a-btn:hover .a-btn:hover -btn-symbol( გამჭვირვალობა: 0; ) .a-btn:hover .a-btn-slide-icon( -webkit-ანიმაცია: slideDown 0.9s წრფივი უსასრულო; )
როდესაც ღილაკზე დააწკაპუნებთ, ჩვენ მას წითლად ვაქცევთ და შევქმნით დაწკაპუნების ეფექტს ჩრდილის დამატებით:
.a-btn:active(ფონი: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) ჩასმული, 0px 0px 0px 1px rgba(188,188,188,0.1); nt:active-. a-btn-text( ფერი: #fff; ტექსტი-ჩრდილი: 0px 1px 1px rgba(0,0,0,0.3); ) .a-btn:active .a-btn-slide-text( ფერი: rgba(0 ,0,0,0.4); ტექსტი-ჩრდილი: არცერთი;)
და ბოლოს, მარტივი ანიმაცია ისრის გადასატანად ზემოდან ქვემოდან:
@keyframes slideDown ( 0% ( ზევით: -30px; ) 100% ( ზევით: 80px;) )
მაგალითი 6
ამ მაგალითში ჩვენ შევქმნით მრგვალ ღილაკს ვარსკვლავით. ჩვენ ვაქცევთ ვარსკვლავს როტაციას ჰოვერზე (მცირე იმპულსით) და გამოვაჩენთ დამატებით ტექსტს.
HTML მარკირება
ჩვენ გვექნება სამი span ტეგი ჩვენს ბმულზე. ამ უკანასკნელს ექნება დამალული ტექსტი, რომელიც ნაჩვენებია hover-ზე.დარეგისტრირება ეს უფასოა!
css
ამ მაგალითში ცოტათი ვითამაშებთ nth-შვილთან ერთად. ვინაიდან გვაქვს 3 span ტეგი, მათ ასე მოვიხსენიებთ: .a-btn span:nth-child(1), .a-btn span:nth-child(2) და .a-btn span:nth- child (3).ღილაკებს მრგვალად გავაკეთებთ და ლამაზ ჩრდილებს დავუმატებთ. იმისათვის, რომ ძირითადი ტექსტი ვერტიკალურად ცენტრში მოვათავსოთ, ჩვენ დავაყენებთ ცხრილის უჯრედად. ვარსკვლავები და ფარული ტექსტი განლაგდება აბსოლუტურად.
.a-btn( სიგანე: 120 პიქსელი; სიმაღლე: 120 პიქსელი; საზღვრის რადიუსი: 50%; ეკრანი: ბლოკი; ზღვარი: 20 პიქსელი; ათწილადი: მარცხნივ; ფონი: #f0ad4e; პოზიცია: შედარებითი; ყუთი-ჩრდილი: 0px 0px 5px 0px rgba (246, 212, 163, 0.5) ჩასმული, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) 0px 0px 0px 9px #fff; გარდამავალი: ყველა 0.3s წრფივი ჩვენება; :nspan. -უჯრედი; სიგანე: 80 პიქსელი; სიმაღლე: 80 პიქსელი; შიგთავსი: 20 პიქსელი; ტექსტის გასწორება: ცენტრში; ვერტიკალური გასწორება: შუა; შრიფტის ზომა: 26 პიქსელი; ფერი: #fff; ტექსტის ჩრდილი: 0 px 1px 1px #A03F16; font- ოჯახი: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; გარდამავალი: ყველა 0.3 წრფივი ; ) .a-btn span:nth-child(1), .a-btn span:nth-child (3)( პოზიცია: აბსოლუტური; ზედა: 0 პიქსელი; მარცხნივ: 0 პიქსელი; შრიფტის ზომა: 40 პიქსელი; ხაზის სიმაღლე: 36 პიქსელი; გაუმჭვირვალობა: 0; ) .a-btn span:nth-child(1)(ფონი: გამჭვირვალე url (../images/star.png) განმეორებითი ცენტრის ცენტრი; გამჭვირვალობა: 0.2; )
ჰოვერის დროს ჩვენ შევცვლით ღილაკის ჩრდილს ისე, რომ ის აწეული გამოჩნდეს. ფარული ტექსტი გამოვლინდება და საწყის ტექსტს გავაცოცხლებთ. ჩვენ ასევე გამოვიყენებთ ბრუნვის ანიმაციას ვარსკვლავისთვის:
.a-btn:hover(ფონი: rgba(170, 77, 27, 0.6); box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) ჩასმული, 0px -1px 5px,70px , 27, 0.2) ჩასმული, 0 px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff-bt; :nnth. )( გამჭვირვალობა: 1; ) .a-btn:ჰოვერის დიაპაზონი:nth-child(2)( ტრანსფორმაცია: მასშტაბი(0); გაუმჭვირვალობა: 0; .a-btn:Hover span:nth-child(1)( ანიმაცია : 1s წრფივი როტაცია;)
ახლა მოდით ვაჩვენოთ, რომ ღილაკი დაჭერილია მასზე დაჭერისას:
.a-btn:active( box-shadow: 0px 0px 5px 0px rgba(246, 212, 163, 0.5) ჩასმული, 0px -1px 5px 4px rgba(170, 77, 27, 0.2pxpx 0.2px , 0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff; ) .a-btn:active span:nth-child(2)(ფერი: rgba(172, . 0.8); ტექსტის ჩრდილი: 0px 1px 1px rgba(255, 255, 255, 0.6); )
ბრუნვის/ტალღოვანი ანიმაცია ასე გამოიყურება:
@-webkit-keyframes rotate( 0% (transform: scale(1) rotate(0);) 50% (transform: scale(0.5) rotate(180deg);) 100% (transform: scale(1) rotate(360deg) ;))
მაგალითი 7
ბოლო მაგალითში ჩვენ შევქმნით ფსევდო 3D ღილაკს რამდენიმე მაგარი ჩრდილის გამოყენებით.
HTML მარკირება
სტრუქტურა იგივე იქნება, რაც მეხუთე მაგალითშიcss
სტილი ასევე ძალიან წააგავს მაგალითს 5, ჩვენ უბრალოდ შევცვლით რამდენიმე ფერს და ჩრდილს:.a-btn( სასაზღვრო რადიუსი: 10 პიქსელი; შიგთავსი: 10 პიქსელი 30 პიქსელი 10 პიქსელი 70 პიქს; პოზიცია: შედარებითი; ათწილადი: მარცხნივ; ეკრანი: დაბლოკვა; გადინება: დამალული; ზღვარი: 10 პიქს; ფონი: ხაზოვანი გრადიენტი (ზემო, #b7f2f4 0% ,#7ce7ea 100%); კონტური: 1px მყარი #90c6c8; კონტურის ფერი: #90c6c8 #78bdc0 #65b6ba; ყუთი-ჩრდილი: 0px -5px 0px 0px #458a8c, 0 1px 1px 5px 5,0 1px 1px 5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5. 0.8) ჩასმა; გადასვლა: ყველა 0.2წმ წრფივი; ) .a-btn-symbol( font-family: "WebSymbolsRegular", cursive; ფერი: #437b7d; text-shadow: 0 1px 0 #bef3f5; შრიფტის ზომა: 20px; პოზიცია: აბსოლუტური; მარცხნივ: 20 პიქსელი; სიგანე: 20 პიქსელი; ტექსტის გასწორება: ცენტრში; ხაზის სიმაღლე: 32 პიქსელი; გარდამავალი: ყველა 0.3 წმ ease-in-out; ) .a-btn-text( შრიფტის ზომა: 20 პიქსელი; ფერი : #437b7d; text-shadow: 0 1px 0 #bef3f5; ხაზის სიმაღლე: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; ჩვენება: block; ) . a-btn-slide-text( font-family: Arial, sans-serif; შრიფტის ზომა: 10px; ასოების ინტერვალი: 1px; text-transform: uppercase; ფერი: #555; text-shadow: 0px 1px 1px rgba(255,255,255,0.9); )
ჰოვერის დროს ჩვენ გავადიდებთ ღილაკს და ვატრიალებთ პატარა ხატულას: ღილაკები ეტიკეტების დამატება
კარგი დღე, ძვირფასო მკითხველებო. ამ დღეს ჩვენ შევქმნით საიტისთვის ლამაზი ხატების ნაკრები CSS3 და ანიმაციის გამოყენებით. ამ ღილაკის წყალობით შეგიძლიათ გვერდის ნებისმიერი ბმული გადააქციოთ ანიმაციურ ღილაკად კლასის სახელის მარტივი მინიჭებით. ზოგადად, აქ არაფერია რთული, როგორც ერთი შეხედვით.
შეგახსენებთ, რომ ეს ღილაკები უფასოა და შეგიძლიათ უფასო გადმოწერა. წადი.
ანიმაციური CSS3 ღილაკები თქვენი ვებსაიტისთვის
ახლა რამდენიმე სიტყვა ღილაკების ზომისა და მომრგვალებული კუთხეების შესახებ:
/* სამი ღილაკის ზომა */ .button.big ( font-size:30px;) .button.medium (font-size:18px;) .button.small (font-size:13px;) /* ღილაკის მომრგვალებული კუთხეები */ .ღილაკი.მომრგვალებული( -moz-საზღვრის-რადიუსი:4em; -webkit-საზღვრის-რადიუსი:4em; საზღვრის-რადიუსი:4em; )
ზემოთ მოცემულ კოდში არის სამი კლასი - ეს არის დიდი, საშუალოდა პატარა. შესაბამისად, ჩვენ ვაყენებთ სხვადასხვა მნიშვნელობებს პიქსელებში თითოეული კლასისთვის. ყველაფერი ნათლად ჩანს ზემოთ მოცემულ კოდში.
ახლა კი ყველაზე საინტერესო ნაწილი ფერებია. აქ, პრინციპში, არც არაფერია რთული.
/* ლურჯი ღილაკი */ .blue.button( ფერი:#0f4b6d !მნიშვნელოვანი; საზღვარი:1px მყარი #84acc3 !მნიშვნელოვანი; /* უკანა ფონის ფერი */ background-color: #48b5f2; background-image: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(ცენტრის ქვედა, წრე, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-წრფივი-გრადიენტი(# 4fbbf7, #3faeeb); ფონის სურათი: url("button_bg.png"), url("button_bg.png"), -webkit-გრადიენტი (რადიალური, 50% 100%, 0, 50% 100%, 100, საწყისი (rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient (წრფივი, 0% 0%, 0% 100%, from(#4fbbf7), to (#3faeeb)); ) .blue.button:hover( background-color:#63c7fe; background-image: url("button_bg.png"), url("button_bg.png"), -moz-radial-gradient(ცენტრის ქვედა, წრე, rgba -moz-linear-gradient(#63c7fe, #58bef7); ფონური სურათი: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(რადიალური, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to (rgba(109,21) 7,250,0))), -webkit-გრადიენტი(წრფივი, 0% 0%, 0% 100%, from(#63c7fe), to (#58bef7)); )
ჯერჯერობით სულ ესაა. წინასწარ მინდა გაგაფრთხილოთ, რომ ამჟამად ზოგიერთ ბრაუზერში ღილაკები შეიძლება არ იმუშაოს, რადგან ჯერჯერობით ყველა მათგანს არ აქვს CSS3-ის მხარდაჭერა. მაგრამ მეჩვენება, რომ ეს პრობლემა მალე მოგვარდება.
გამარჯობა ძვირფასო მეგობრებო. დღეს მე გეტყვით ორ გზაზე, რომელიც დაგეხმარებათ შექმნათ ანიმაციური ღილაკი თქვენი საიტებისთვის. თქვენ ალბათ გინახავთ ბევრი ეს ღილაკი და დააწკაპუნეთ მათზე. ასე რომ, ჩემს ბლოგზე პერიოდულად ვურჩევ პარტნიორ კურსებს და ტრენინგებს, მხოლოდ მათ, რაც მე თვითონ გამომიცდია. და რა თქმა უნდა, მე მაინტერესებს სტატისტიკა და სტატისტიკა ამბობს, რომ ხალხი 48% უფრო ხშირად აჭერს მიმზიდველ ღილაკებს, ვიდრე ჩვეულებრივი ბმულები.
CSS-ში ანიმაციური ღილაკების შექმნის პრინციპი ასეთია, არსებობს სამი დებულება. 1 - საწყისი, 2 - კურსორის დაჭერისას და 3 - მაუსის ღილაკზე დაჭერისას. ზოგიერთ სერვისს სამივე პოზიცია აქვს, ზოგს კი მხოლოდ ორი. მაგრამ მთავარი ის არის, რომ თქვენ კმაყოფილი ხართ საბოლოო შედეგით.
ვიდეო გაკვეთილი ანიმაციური ღილაკების შექმნის მეორე გზაზე:
მაგალითად, განვიხილოთ CSS3 ButtonGenerator სერვისი, რომელსაც აქვს მხოლოდ ორი პოზიცია. მაგრამ ეფექტი ძალიან კარგად გამოიყურება. ვინც დაბნეულია რუსული ენის ნაკლებობით, გამოიყენეთ სიაში მოცემული ბოლო გენერატორი.
ასე რომ, დავიწყოთ.
გახსენით სერვისის მთავარი გვერდი. თავდაპირველად, თქვენ გექნებათ ღილაკის და ხელსაწყოების გადახედვა, რომლებიც საშუალებას მოგცემთ გააკეთოთ ყველა სახის პარამეტრი.
პირველი განყოფილება Text&Font პასუხისმგებელია ტექსტზე, შრიფტის ზომაზე, შრიფტის ფერზე, შრიფტის ჩრდილზე. აქ წერთ ეტიკეტს ღილაკზე, აყენებთ მის ზომას, ფერს და ჩრდილს.
შემდეგი განყოფილება, ფონი, ეხება ფონს. აქ შეგიძლიათ მიუთითოთ ღილაკის ფერი, ღილაკის გრადიენტი, ღილაკის ზომა და ფონის შერწყმა.
Border განყოფილება პასუხისმგებელია ღილაკის ჩრდილისა და საზღვრების დაყენებაზე. თქვენ შეგიძლიათ მარტივად დაარეგულიროთ საზღვრის სისქე, კუთხეების დამრგვალება და ღილაკის ჩრდილი.
შემდეგი განყოფილება, ტრანსფორმაცია, პასუხისმგებელია ღილაკის ტრანსფორმაციაზე, ეს არის ბრუნვა, გადახრები და დამახინჯება.
შემდეგი განყოფილება, გარდამავალი, პასუხისმგებელია ანიმაციის სიგლუვეზე. თქვენ დააყენეთ ეს პარამეტრები თქვენი ღილაკის მიხედვით. მოქმედებები შეიძლება გამოყენებულ იქნას მთელ ღილაკზე ან ცალკეულ ფენებზე.
რამდენჯერმე ცდის შემდეგ, სცადეთ პარამეტრები და მიხვდებით რა არის.
ღილაკის საწყისი გარეგნობის კონფიგურაციის შემდეგ, შეგიძლიათ გადახვიდეთ შემდეგ ეტაპზე. ეს არის ღილაკის მოდიფიკაცია, როდესაც მაუსის კურსორი ატარებს. ამისათვის დააწკაპუნეთ სკრინშოტზე მითითებულ ყუთზე.
მაუსის გადაადგილების ვარიანტები
ახლა თქვენ მიერ შეტანილ პარამეტრებში ყველა ცვლილება ეხება ღილაკს, რომელიც გამოჩნდება მაუსის ზედ გადასვლისას. და ეს პარამეტრები დამოკიდებულია თითოეულ ღილაკზე ინდივიდუალურად. მაგალითად, მე შევცვალე ბრუნვის, გრადიენტის და ჩრდილის ფერის პარამეტრები.
როდესაც ღილაკი მზად იქნება, შეგიძლიათ გააგრძელოთ ღილაკის დაყენება სტატიაში. ამისათვის, სტატიის სწორ ადგილას დააინსტალირეთ კოდი:
აი ჩვენი მაგალითი:
ახლა თქვენ იცით, რამდენად მარტივი და საკმარისად სწრაფია ვებსაიტის ან ბლოგისთვის ანიმაციური ღილაკის გაკეთება. სცადეთ და განახორციელეთ, ღირს. თუ თქვენ გაქვთ რაიმე შეკითხვები, დაწერეთ კომენტარებში, ვეცდები დაგეხმაროთ.
დღეისთვის სულ ესაა, წარმატებებს გისურვებ. და ყოველთვის მიხარია ჩემი ბლოგის გვერდებზე ნახვა.
P.S. და აქ არის ანიმაციური ღილაკის მაგალითი დენის გერასიმოვის ტრენინგისთვის "ცივი ტრაფიკის დაყენება შვილობილი ბმულების პოპულარიზაციისთვის". მე გავიარე ეს ტრენინგი და ყველას გირჩევთ - ეს არის, დიდი გადაჭარბების გარეშე, შვილობილი პროგრამებზე ფულის გამომუშავების რეალური გზა. რასაც ძირითადად ვაკეთებ.
მე გადავყარე ესკიზი აქ, როგორც ვხედავ დემო ღილაკს. იდეა აქ არის შემდეგი, რომ ღილაკი იყოს თითქოს ორ ნაწილად, ის უნდა იყოს ანიმაციური, სრიალის დროს იხსნება მეორე ნაწილი, ამოიღებს შიდა ბლოკს, სადაც არის წარწერა და იმ მომენტში, როდესაც კურსორი ამოღებულია. , ყველაფერი უნდა დაბრუნდეს თავდაპირველ მდგომარეობაში.
- გაკვეთილზე გამოვიყენებთ ძირითად სტილებს:
- ფსევდოელემენტები : ადრე , : შემდეგ ;
- პოზიციის გამოყენება პოზიციის ბლოკებით
- ფსევდოკლასები :hover, :activ განსაზღვრავენ სტილებს ჰოვერზე და მაუსის დაწკაპუნებით
- და გააკეთეთ გლუვი ანიმაცია გადასვლით, ტრანსფორმირებით
ღილაკი HTML სტრუქტურა
ესკიზით თქვენს თვალწინ, უკვე შეგიძლიათ წარმოიდგინოთ, როგორ განახორციელოთ ეს CSS-ში. ჩვენ გვჭირდება მთავარი ბლოკი, სადაც განთავსდება ღილაკის ყველა ელემენტი, ეს იქნება მისი შეფუთვა. შემდეგ ღილაკს ექნება შიდა ნაწილი, რომელიც მაუსის გადაადგილებისას გამოვა, შიგნით განვათავსებთ ტექსტს “View example”. შემდეგ მოდის ღილაკის მარცხენა და მარჯვენა ნაწილები, მათ შორის ვათავსებთ სამკუთხა ფორმის ფსევდოელემენტებს. და კინაღამ დამავიწყდა, სურათი ისრის სახითაა. დაგვჭირდება ამ ყველაფრის ანიმაცია და ღილაკებს მივცეთ გარკვეული ტექსტურა.
ჩვენ ვხსნით ჩვენს განვითარების გარემოს, ჩემს შემთხვევაში მე ვიყენებ phpstorm, შექმენით მასში index.html, ჩაწერეთ სახელი " ღილაკი დემო ანიმაცია CSS". ჩვენ ვქმნით
Div.dws-button>a>div.b-demo+div.b-text+div.b-img
დააჭირეთ განაცხადის გამოყენებას და სტრუქტურა იქმნება.
ლინკში ჩადეთ ჰეშის ნიშანი (#), რომ აქტიური იყოს. მოდით დავწეროთ ღილაკის სახელი " დემო" , შუა ბლოკში მივუთითებთ ტექსტს " იხილეთ მაგალითი", და ბოლოში ჩადეთ გამოსახულებისკენ მიმავალი გზა.
ჩვენ ვქმნით დირექტორიას, რომელშიც მე დავაკოპირებ სურათებს, შეგიძლიათ ჩასვათ თქვენი სურათები ან ჩამოტვირთოთ არქივი მზა კოდით.
ჩაწერეთ გამოსახულების გზა src="img/icon.png" , მიუთითეთ alt="(!LANG:button"
, на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.!}
ღილაკისთვის CSS სტილის აღწერა
შემდეგი ნაბიჯი, მოდით შევქმნათ css style.css ფაილი და დააკავშირეთ ინდექსის გვერდზე. ჩვენ დაუყოვნებლივ ვუკავშირდებით პოპულარულ Cuprum შრიფტს და აღარ გვჭირდება ინდექსის ფაილი.
გადადით style.css-ზე, დაამატეთ სურათი ფონზე და გადააყენეთ ყველა ელემენტის ბალიშები .dws-ღილაკების ბლოკში.
Body( background-image: url("img/ep_naturalwhite.png"); ) .dws-button *(ზღვარი: 0; padding: 0; )
ჩვენ დავაყენეთ ტექსტის სტილი თავად ღილაკისთვის, დავაყენეთ მისი სიგანე 250 პიქსელზე. და სიმაღლე 70 pic., ცენტრალური ეკრანის შუაში და ზემოდან 250 pic. შემდეგ მას ვანიჭებთ 1 პიკის საზღვარს. ასე რომ, ჩვენ შეგვიძლია დავინახოთ ღილაკის საზღვრები, როდესაც ის ანიმაციურია, როდესაც ის გაჭიმულია.
Dws-ღილაკი (შრიფტი-ოჯახი: Cuprum, Arial, Verdana, sans-serif; სიგანე: 250px; სიმაღლე: 70px; ზღვარი: 250px ავტო; მონახაზი: 1px მყარი #faa21a; )
ხაზგასმას ვხსნით ბმულებიდან და ვანიჭებთ მათ ნაცრისფერ ფერს.
Dws-ღილაკი a (ტექსტი-დეკორაცია: არცერთი; ფერი: #2e2e30; )
შემდეგ დაუყოვნებლივ აირჩიეთ ბლოკები და მიეცით მათ ერთი თეთრი ფერი.
B-დემო, .b-img (ფონი: #ffffff; )
შემდეგ თითოეულ ბლოკს ცალკე აღვწერთ, ვირჩევთ .b-demo კლასს და ვაყენებთ ბლოკის სიგანეს 105 პიქსელზე.სიმაღლის დაყენება ხაზის სიმაღლის გამოყენებით: 70px; , ცენტრალიზებული ტექსტი და გაზარდეთ შრიფტი 30 pt.
B-დემო (სიგანე: 105 პიქსელი; ხაზის სიმაღლე: 70 პიქსელი; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 30 პიქსელი; ტექსტის ტრანსფორმაცია: დიდი; შიგთავსი: 0 10 პიქსელი 0 15 პიქსელი; )
აირჩიეთ შემდეგი .b-ტექსტური ბლოკი, მიეცით მუქი ფერი, გახადეთ ტექსტი მსუბუქი, დააყენეთ მისი ზომა 24 პიქსელზე და დააყენეთ მისი სიგანე 150 პიქსელზე. ხოლო ჩაღრმავების დახმარებით შევამცირებთ ბლოკის სიმაღლეს. ცენტრალიზებული ტექსტი და დააყენეთ შიგთავსი.
B-ტექსტი (ფონი: #3e3f3e; ფერი: #ffffff; შრიფტის ზომა: 24 პიქსელი; სიგანე: 150 პიქსელი; ხაზის სიმაღლე: 20 პიქსელი; ტექსტის გასწორება: ცენტრში; შიგთავსი: 10 პიქსელი 0 10 პიქსელი 10 პიქსელი; )
აირჩიეთ სწორი ბლოკი, დააყენეთ სიგანე 45 მწვერვალზე. სიმაღლე ასევე 45 მწვერვალია. .padding მოაქცევს გამოსახულების ელემენტის ცენტრში და ოდნავ გადაიწევს მარჯვნივ.
B-img (სიგანე: 45 პიქსელი; ხაზის სიმაღლე: 45 პიქსელი; ბალიშები: 20 პიქსელი 0 0 20 პიქსელი; )
შემდეგ ამ ელემენტებს განვათავსებთ ბლოკთან მიმართებაში .dws-button კლასით. ამისათვის მიანიჭეთ კლასის პოზიცია: ნათესავი; და ჩასმულია ყველა ბლოკის პოზიცია: აბსოლუტური; .
ბლოკები ყველა მორგებულია მშობელზე და ახლა მოდით გადავიდეთ მათზე და გავაჩეროთ.
.b-demo კლასისთვის საწყის პოზიციებს მარცხნიდან და ზემოდან ნულებით ვაზუსტებთ და ვამატებთ z-index:10; ისე, რომ ეს ბლოკი უფრო მაღალი იყოს ვიდრე დანარჩენი.
.b-დემო (სიგანე: 105 პიქსელი; ხაზის სიმაღლე: 70 პიქსელი; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 30 პიქსელი; ტექსტის ტრანსფორმაცია: დიდი; შიგთავსი: 0 10 პიქსელი 0 15 პიქსელი;მარცხენა: 0; ზედა: 0; z-ინდექსი: 10; )ტექსტით ბლოკი მარცხნიდან და ზემოდან 5 მწვერვალით იქნება ჩაჭრილი.
და ბლოკი .b-img გამოსახულებით მარცხენა მხარეს არის ჩაჭრილი 140 მწვერვალით. და ზემოდან დააყენეთ 0. მარჯვენა მხარეს კუთხეები დაუყონებლივ მოაბრუნეთ 10 ყვავი.
.b-img( სიგანე: 45 პიქსელი; ხაზის სიმაღლე: 45 პიქსელი; ბალიშები: 20 პიქსელი 0 0 20 პიქსელი;მარცხენა: 140px; ზედა: 0; საზღვარი-რადიუსი: 0 10px 10px 0; )და ჩვენ იგივეს გავაკეთებთ მარცხენა ბლოკით.
.b-დემო (სიგანე: 105 პიქსელი; ხაზის სიმაღლე: 70 პიქსელი; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 30 პიქსელი; ტექსტის ტრანსფორმაცია: დიდი; შიგთავსი: 0 10 პიქსელი 0 15 პიქსელი; მარცხნივ: 0; ზედა: 0; z- ინდექსი: 10;საზღვარი-რადიუსი: 10px 0 0 10px; )შემდეგ ჩვენ უნდა შევქმნათ ორი ფსევდოელემენტი, ეს სწორედ ის კუთხეებია, რომლებიც განლაგებულია მათ კავშირზე.
აირჩიეთ მარჯვენა ბლოკი და მიეცით მას ფსევდოელემენტი: ადრე, დააყენეთ სიგანე და სიმაღლე ნულზე და დახაზეთ სამკუთხედი საზღვრის გამოყენებით. შემდეგი, ჩვენ უნდა განვათავსოთ იგი, ამისთვის ის ამატებს მას ჩვენს ნაკრებში.
და გაასწორეთ ის ისე, რომ დადგეს ბლოკის ბოლოს.
B-დემო: ადრე (შინაარსი: ""; სიგანე: 0; სიმაღლე: 0; საზღვრის ზედა: 35 პიქსელი მყარი გამჭვირვალე; საზღვარი მარცხნივ: 10 პიქსელი მყარი #ffffff; საზღვრის ქვედა: 35 პიქსელი მყარი გამჭვირვალე; ზედა: 0; მარცხნივ: 129 პიქსელი;)
გთხოვთ გაითვალისწინოთ, რომ ჩვენ ყველა ბლოკს ვასწორებთ მარცხნივ, და არა მარჯვნივ, რადგან ანიმაცია გადავა მარცხნიდან მარჯვნივ და ეს არის მთავარი წერტილი.
შემდეგ გამოსახულებით ვირჩევთ შემდეგ ბლოკს და ვანიჭებთ ფსევდოელემენტს :after. ჩვენ ვწერთ შინაარსს, შემდეგ ვაყენებთ სიგანეს და სიმაღლეს ნულზე და ვხატავთ სამკუთხედს საზღვრის გამოყენებით. აბსოლიტურად მოათავსეთ იგი და გაასწორეთ მარცხნივ.
.b-დემო, .b-ტექსტი, .b-img, .b-დემო: ადრე,.b-img:after( პოზიცია: აბსოლუტური; ) .b-img:after( შინაარსი: ""; სიგანე: 0; სიმაღლე: 0; საზღვრის ზედა: 35 პიქსელი მყარი გამჭვირვალე; საზღვარი მარცხნივ: 10 პიქსელი #3e3f3e; კონტური -ქვედა: 35px მყარი გამჭვირვალე; ზედა: 0; მარცხნივ: 0; )ღილაკის მთავარი ჩარჩო მზად გვაქვს, რჩება მისი ანიმაცია და ლამაზი დიზაინის მიცემა.
ღილაკების ანიმაცია CSS-ში
ძირითადად ღილაკი მზადაა და დავიწყოთ მისი ანიმაცია, დავწერ კომენტარს, საიდანაც დავწერთ სტილებს. უპირველეს ყოვლისა, ჩვენ აღვწერთ მოქმედებებს ღილაკზე გადასვლისას.
/* ანიმაცია: hover */ .dws-button a:hover .b-demo( სიგანე: 50px; padding: 0 10px 0 10px; შრიფტის ზომა: 20px; )
ჩვენ დაუყოვნებლივ დავწერთ გლუვი მოძრაობის ანიმაციას ყველა ბლოკზე, ამისთვის ვირჩევთ მათ ყველა და ვაყენებთ გადასვლას ყველა თვისებისთვის 0,5 წამზე.
Dws-ღილაკი a:hover .b-demo, .dws-ღილაკი a:hover .b-demo: ადრე, .dws-ღილაკი a:hover .b-ტექსტი, .dws-ღილაკი a:hover .b-img, . dws-ღილაკი a:hover .b-img:after(transition:ყველა 0.5s;)
ამ ბლოკით მოძრაობას ვუნიშნავთ :წინ ფსევდოელემენტს 69 პიკამდე. მარცხნივ.
Dws-ღილაკი a:hover .b-დემო: ადრე (მარცხნივ: 69px; )
ღილაკის მეორე ნაწილს გადავიტანთ მარჯვენა მხარეს, მივუთითებთ, რომ ბორცვისას გადაიტანეთ ბლოკი 185 მწვერვალით.
Dws-ღილაკი a:hover .b-img(მარცხნივ: 185px; )
მაშინ ბლოკი ტექსტით იქნება 50 ყვავი. დააჭირეთ, შეარჩიეთ და დანიშნეთ ბლოკის მოძრაობა.
Dws-ღილაკი a:hover .b-text(მარცხნივ: 50px;)
იმისათვის, რომ ღილაკი დაუყოვნებლივ არ დაიშალოს კურსორის ამოღების შემდეგ, უნდა დავაყენოთ ბლოკის ელემენტები დასვენების მდგომარეობაში, ღილაკს 1,5 წამში უფრო ნელა შევამცირებთ.
.b-demo, .b-text, .b-img, .b-demo: ადრე, .b-img:after( პოზიცია: აბსოლუტური;გარდამავალი: ყველა 1.5s; )შემდეგ ხატის ბრუნვის ეფექტს ვაცოცხლებთ ტრანსფორმაციის 360 გრადუსით, ვირჩევთ სურათს და ვწერთ ტრანსფორმაციას: rotate(360deg) ; და ასევე დააყენეთ გამჭვირვალობა: 0.5; რომ სურათი ოდნავ გამჭვირვალე გახდეს.
Dws-ღილაკი a:hover img( ტრანსფორმაცია: rotate (360deg); გამჭვირვალობა: 0.5; )
თუ ახლა ღილაკზე გადავუსვით, ვერ დავინახავთ ბრუნვის ეფექტს, რადგან ჩვენ უნდა დავაყენოთ გადასვლა თავად სურათზე. ჩვენ ვირჩევთ და ვუწერთ მას ამ თვისებას.
B-img img (გარდამავალი: ყველა 1.5s;)
ანიმაციური გაფართოების ეფექტის მქონე ღილაკი მზად არის, შეგიძლიათ დამალოთ მონახაზი, აღარ დაგჭირდებათ და დაიწყოთ მისი გაფორმება.
Dws- ღილაკი( შრიფტი-ოჯახი: Cuprum, Arial, Verdana, sans-serif; სიგანე: 250px; სიმაღლე: 70px; ზღვარი: 250px ავტო; /*მოხაზულობა: 1px მყარი #faa21a;*/ პოზიცია: შედარებითი; )
ჩვენ შევქმენით სრულფასოვანი ანიმაციური ღილაკი და ახლა შეგიძლიათ მას უფრო ლამაზი იერი მისცეთ.
ღილაკების სტილი CSS-ში
მას შემდეგ რაც ჩვენ გავაკეთებთ ყველა სამუშაოს მის თვისებებზე, პოზიციონირებასა და ანიმაციაზე, გადავალთ მის დიზაინზე. მოდით შევცვალოთ ღილაკის ზოგადი სტილი, დავუმატოთ ფონი ბლოკებს, ტექსტს მივცეთ ჩრდილი და დავამატოთ :active ფსევდოკლასი, რომელიც იმუშავებს მაუსის დაჭერისას.
მივდივართ დამატებით სერვისზე, სადაც უკვე მოვამზადე წინასწარი პარამეტრები და უბრალოდ ვაკოპირებ სტილს ღილაკისთვის, შემდეგ ვცვლი ჩემს წინას.
B-demo, .b-img( /* მუდმივი ბმული - გამოიყენეთ ამ გრადიენტის რედაქტირებისთვის და გასაზიარებლად: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+65,6d0019+100 */ ფონი: # f22404; /* ძველი ბრაუზერები */ ფონი: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%); /* FF3.6-15 */ ფონი: -webkit- ხაზოვანი-გრადიენტი(-45 გრადუსი, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ ფონი: ხაზოვანი-გრადიენტი(135deg, #f22404 13%,# 8e0b00 65%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ ფილტრი: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22401",pedColorstr="#f22404",pedColorstr="#f22404",pedColorstr="#f22404", 6 end =1); /* IE6-9 ჩანაცვლება ჰორიზონტალურ გრადიენტზე */ )
ფსევდოელემენტისთვის დაამატეთ წითელი ფერი ღილაკის ინგრედიენტის ფონზე.
.b-დემო: ადრე( შინაარსი: ""; სიგანე: 0; სიმაღლე: 0; საზღვრის ზედა: 35 პიქსელი მყარი გამჭვირვალე; მარცხნივ: 10 პიქსელი მყარი#7B040E; საზღვარი-ქვედა: 35px მყარი გამჭვირვალე; ზედა: 0; მარცხენა: 129px; )მოდით შევცვალოთ ბმულების ფერი მუქიდან თეთრზე.
Dws-ღილაკი a (ტექსტი-დეკორაცია: არცერთი; ფერი: #ffffff; )
ტექსტს მივცეთ ჩრდილი, ამისთვის დავამატებთ კლასში .b-დემო ტექსტი-ჩრდილი: -1px -1px 1px #000000;
.b-დემო (სიგანე: 105 პიქსელი; ხაზის სიმაღლე: 70 პიქსელი; ტექსტის გასწორება: ცენტრში; შრიფტის ზომა: 30 პიქსელი; ტექსტის ტრანსფორმაცია: დიდი; შიგთავსი: 0 10 პიქსელი 0 15 პიქსელი; მარცხნივ: 0; ზედა: 0; z- ინდექსი: 10; სასაზღვრო-რადიუსი: 10px 0 0 10px; text-shadow: -1px -1px 1px #000000; )შიდა ბლოკს გავაკეთებ მოლურჯო ფერში.
.b-text( /* მუდმივი ბმული - გამოიყენეთ ამ გრადიენტის რედაქტირებისთვის და გასაზიარებლად: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ ფონი: #b3dced; /* ძველი ბრაუზერები */ ფონი: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ ფონი: -webkit-linear-gradient(45deg, #b3dced 0% ,#29b8e5 50%); /* Chrome10-25, Safari5.1-6 */ ფონი: ხაზოვანი გრადიენტი(45 გრადუსი, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+ , Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 ჩანაცვლება ჰორიზონტალურ გრადიენტზე */ ფერი: #ffffff; შრიფტის ზომა: 24px; სიგანე: 150 px ხაზის სიმაღლე: 20 px; ტექსტის გასწორება: ცენტრში; padding: 10px 0 10px 10px; მარცხენა: 5px; ზედა: 5px; )დაუყოვნებლივ შეცვალეთ :ფსევდოელემენტის ფერი
შევცვალოთ სურათი, შავი დავაყენოთ თეთრზე, გაკვეთილის დასაწყისში ავტვირთე ორი, მეორე ხატს ვუნიშნავთ.
და ბოლო ეტაპი, ჩვენ აღვწერთ სტილებს, როდესაც მაუსის დაწკაპუნება ხდება
აქ დავწერ შესაბამის კომენტარს, შემდეგ მის ქვეშ ვირჩევთ ორ ბლოკს ფსევდოკლასით :active, ინგრედიენტს ვაყენებთ მხოლოდ ინვერსიულად.
/* ანიმაცია:აქტიური */ .dws-button a:active .b-demo, .dws-button a:active .b-img( /* მუდმივი ბმული - გამოიყენეთ ამ გრადიენტის რედაქტირებისთვის და გასაზიარებლად: http://colorzilla.com /gradient-editor/#f22404+13,8e0b00+49,6d0019+70 */ ფონი: #f22404; /* ძველი ბრაუზერები */ ფონი: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49% , #6d0019 70%); /* FF3.6-15 */ ფონი: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* Chrome10-25,Safari5 .1-6 */ ფონი: ხაზოვანი გრადიენტი (45 გრადუსი, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ ფილტრი: progidT:DX .Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 ჩანაცვლება ჰორიზონტალურ გრადიენტზე */ )
ფონური ბლოკისთვის ჩვენ ამ სტილში გრადიენტს გავაკეთებთ მხოლოდ სარკისებურად და დავამატებთ ჩრდილის ეფექტს.
Dws-button a:active .b-text( /* მუდმივი ბმული - გამოიყენეთ ამ გრადიენტის რედაქტირებისთვის და გასაზიარებლად: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ ფონი: #b3dced; /* ძველი ბრაუზერები */ ფონი: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ ფონი: ხაზოვანი გრადიენტი(135deg, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+ , Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 ჩანაცვლება ჰორიზონტალურ გრადიენტზე */ box- ჩრდილი: 0 0 3px 1px #82DCFF;)
როგორც საბოლოო სტილი, დაწკაპუნებისას დავწერთ ხატის ბრუნვას საპირისპირო მიმართულებით მისი სრული გამოვლინებით.
Dws-ღილაკი a:active img( ტრანსფორმაცია: rotate (0deg); გამჭვირვალობა: 1; )
აღმოჩნდა საკმაოდ ეფექტური ღილაკი, რომლის ადვილად შეცვლა და დაპროექტება შესაძლებელია თქვენი ამოცანებისთვის. გირჩევთ შეცვალოთ მისი ზოგადი დიზაინი, გააკეთოთ თქვენი საკუთარი წინასწარ პარამეტრები, ექსპერიმენტი გააკეთოთ სხვადასხვა გრადიენტის ვარიანტებით, შესაძლოა, თქვენ მოიფიქრეთ უფრო ორიგინალური ანიმაციის მეთოდები და აუცილებლად გააზიარეთ ისინი კომენტარებში.
ვისაც მოეწონა მასალა, აუცილებლად გაუზიარეთ თქვენს მეგობრებს.
- თარგმანი
გამარჯობა, ძვირფასო ჰაბრადაგ! დღეს ჩვენ ვისწავლით როგორ შევქმნათ CSS3 3D ღილაკები! ისინი დაფუძნებულია ორმან კლარკის პოპულარულ უფასო PSD-ზე მისი Premium Pixels ვებსაიტისთვის. ჩვენ შევეცდებით შევქმნათ ამ ღილაკების ასლი CSS გამოყენებით HTML კოდის მინიმალური რაოდენობით.
Ნაბიჯი 1: HTML დოკუმენტის შექმნა
ჩვენ დავიწყებთ ახალი HTML დოკუმენტის შექმნით. ის დაფუძნებული იქნება HTML5 ქვაბის ფირფიტაზე, რათა კარგი საწყისი წერტილი გვქონდეს. ახლა ჩვენ დავამატებთ სიას ბმულებით. ეს ძირითადად ყველაფერია, CSS3-ის წყალობით, რომ ჩვენ არ გვიწევს დამატებითი divs და spans-ების გამოყენება.ჩვენ მივანიჭებთ კლასის 'ღილაკებს' სიის თითოეულ პუნქტს. და რადგან ორმანმა გამოიყენა სხვადასხვა ფერები, ჩვენ თითოეულ ღილაკს მივანიჭებთ საკუთარ ფერს კლასად.
ეს არის ყველაფერი, რაც ამ ეტაპზე გვჭირდება.
ნაბიჯი 2:ძირითადი CSS წესები
სანამ შეხვალთ გრადიენტებში, მომრგვალებულ კუთხეებში და ა.შ., თქვენ უნდა იზრუნოთ ძირითად წესებზე. არაფერი განსაკუთრებული, ჩვეულებრივი CSS2:Ul ( სიის სტილი: არცერთი; ) a.ღილაკი ( ჩვენება: ბლოკი; ათწილადი: მარცხნივ; პოზიცია: შედარებითი; სიმაღლე: 25 პიქსელი; სიგანე: 80 პიქსელი; ზღვარი: 0 10 პიქსელი 18 პიქსელი 0; ტექსტის დეკორაცია: არცერთი; შრიფტი: 12 პიქსელი " Helvetica Neue", Helvetica, Arial, sans-serif; შრიფტის წონა: თამამი; ხაზის სიმაღლე: 25 პიქსელი; ტექსტის გასწორება: ცენტრში; )
ახლა გამოიყენეთ წესები სხვადასხვა ფერისთვის. მაგალითად, ნაცრისფერი. ყველა სხვა ფერი ჩანს დემოში.
/* ნაცრისფერი */ .ნაცრისფერი, .ნაცრისფერი: hover (ფერი: #555; საზღვრის ქვედა: 4px მყარი #b2b1b1; ფონი: #eee; .ნაცრისფერი: hover (ფონი: #e2e2e2; ) )
თქვენ უნდა დაასრულოთ მსგავსი რამ. საკმაოდ მყარი ჩანს, თუ 2008 წელია ეზოში. 
ნაბიჯი 3:ორმაგი ჩარჩოები!
თუ კარგად დააკვირდებით საბოლოო შედეგს, ნახავთ, რომ მთელი ღილაკის პერიმეტრზე არის თხელი ხაზი. ამ ეფექტის მისაღწევად ჩვენ გამოვიყენებთ ფსევდოელემენტებს : ადრედა : შემდეგ.a.ღილაკი ( ეკრანი: ბლოკი; ათწილადი: მარცხნივ; პოზიცია: შედარებითი; სიმაღლე: 25 პიქსელი; სიგანე: 80 პიქსელი; ზღვარი: 0 10 პიქსელი 18 პიქსელი 0; ტექსტის დეკორაცია: არცერთი; შრიფტი: 12 პიქსელი "Helvetica Neue", Helvetica, Arial, sans -serif; შრიფტის წონა: თამამი; ხაზის სიმაღლე: 25 პიქსელი; ტექსტის გასწორება: ცენტრში; ) a.button:წინა, a.button:after ( შინაარსი: ""; პოზიცია: აბსოლუტური; მარცხნივ: -1px; სიმაღლე: 25px; სიგანე: 80px; ქვედა: -1px;) a.ღილაკი:წინა (სიმაღლე: 23px; ქვედა: -4px; საზღვარი-ზემო: 0; )
ფერის დამატება ღილაკებს ბევრად უკეთესს ხდის.
/* ნაცრისფერი */ .ნაცრისფერი, .ნაცრისფერი: hover ( ფერი: #555; საზღვრის ქვედა: 4px მყარი #b2b1b1; ფონი: #eee; ) .ნაცრისფერი: ადრე, .ნაცრისფერი: შემდეგ ( საზღვარი: 1px მყარი #cbcbcb; საზღვარი ქვედა: 1px მყარი #a5a5a5; ) .ნაცრისფერი:ჰოვერი (ფონი: #e2e2e2; )
ნაბიჯი 4:ცოტა CSS3 მაგია
ახლა მოდით გადავიდეთ CSS3-ის უშუალო ნაწილზე. დავიწყოთ მომრგვალებული კუთხეებით:a.ღილაკი ( ეკრანი: ბლოკი; ათწილადი: მარცხნივ; პოზიცია: შედარებითი; სიმაღლე: 25 პიქსელი; სიგანე: 80 პიქსელი; ზღვარი: 0 10 პიქსელი 18 პიქსელი 0; ტექსტის დეკორაცია: არცერთი; შრიფტი: 12 პიქსელი "Helvetica Neue", Helvetica, Arial, sans -სერიფი; შრიფტის წონა: თამამი; ხაზის სიმაღლე: 25 პიქსელი; ტექსტის გასწორება: ცენტრში; -ვებ-კიტის-საზღვრის-რადიუსი: 3 პიქსელი; -moz-საზღვრის-რადიუსი: 3 პიქსელი; საზღვრის-რადიუსი: 3 პიქსელი; )
ბუნებრივი ელემენტები : ადრედა : შემდეგასევე საჭიროა მომრგვალებული კუთხეები.
a.button:წინა, a.button:after ( შინაარსი: ""; პოზიცია: აბსოლუტური; მარცხნივ: -1px; სიმაღლე: 25px; სიგანე: 80px; ქვედა: -1px; -webkit-border-radius: 3px; -moz -border-radius: 3px; border-radius: 3px; ) a.ღილაკი:წინა (სიმაღლე: 23px; ქვედა: -4px; საზღვარი-ზემო: 0; -webkit-border-radius: 0 0 3px 3px; -moz- საზღვრის რადიუსი: 0 0 3 პx 3 პიქსელი; საზღვრის რადიუსი: 0 0 3 პიქსელი 3 პიქსელი; -ვებკიტი-ყუთი-ჩრდილი: 0 1 პიქსელი 1 პიქსელი: 0 1პქს. 0 1px 1px 0px #bfbfbf;)
და ბოლოს, ჩვენ გამოვიყენებთ გრადიენტებს, შიდა ჩრდილს და ჩრდილს ტექსტზე. IE6-ში შეცდომების თავიდან ასაცილებლად, დაამატეთ state:visited.
/* GRAY */ a.gray, a.gray:hover, a.grey:visited ( ფერი: #555; საზღვრის ქვედა: 4px მყარი #b2b1b1; ტექსტი-ჩრდილი: 0px 1px 0px #fafafa; ფონი: #eee; ფონი: -webkit-gradient(წრფივი, მარცხენა ზედა, მარცხენა ქვედა, from(#eee), to (#e2e2e2)); ფონი: -moz-linear-gradient(ზედა, #eee, #e2e2e2); box-shadow: ჩასმული 1px 1px 0 #f5f5f5; ) .ნაცრისფერი: ადრე, .ნაცრისფერი: შემდეგ ( კონტური: 1px მყარი #cbcbcb; საზღვრის ქვედა: 1px მყარი #a5a5a5; ) .ნაცრისფერი:ჰოვერი (ფონი: #e2e2e2; ფონი: -web გრადიენტი (წრფივი, მარცხენა ზედა, მარცხენა ქვედა, from(#e2e2e2), to (#eee)); ფონი: -moz-linear-gradient(ზემო, #e2e2e2, #eee); )
ჩვენი საბოლოო შედეგი, არც ისე ცუდი!
ნაბიჯი 5:რამე დაგვავიწყდა?
ორმანმა თავის დიზაინში სახელმწიფოც უზრუნველყო: აქტიური. ამიტომ, ჩვენ უბრალოდ უნდა დავამატოთ ის ჩვენს კოდში.კოდის ამ ნაწილს განვათავსებთ სხვადასხვა ფერის წესებში.
/* ACTIVE STATE */ a.button:active ( საზღვარი: არცერთი; ქვედა: -4px; margin-bottom: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, ჩასმული 0 1px 1px rgba(0, 0, 0, 0.3); ) a.button:active:fore, a.button:active:after ( საზღვარი: არცერთი; - webkit-box-shadow: არცერთი; -moz-box-shadow: არცერთი; box-shadow: არცერთი;)
აი რას მივიღებთ:
ნაბიჯი 6 (სურვილისამებრ):ძველი ბრაუზერები
ასე რომ, ჩვენ შევქმენით ლამაზი CSS3 ღილაკები, რომლებიც მუშაობს ყველა თანამედროვე ბრაუზერში. რაც შეეხება Internet Explorer 8-ს და ქვემოთ. ამ ბრაუზერებს არ აქვთ ტექსტის ჩრდილები ან გრადიენტები.ამ პრობლემის გადასაჭრელად ჩვენ შეგვიძლია გამოვიყენოთ Modernizr Javascript ბიბლიოთეკა, რომელსაც შეუძლია აღმოაჩინოს თქვენი ბრაუზერის მხარდაჭერა CSS3 და HTML5. ბიბლიოთეკა არ აგვარებს პრობლემებს, ის მხოლოდ ალტერნატიულ სტილს გვთავაზობს.
პირველ რიგში, ჩვენ შევქმნით Modernizr-ის საკუთარ ვერსიას, რათა არ მოგვიწიოს დიდი რაოდენობით Javascript-ის ტარება ჩვენთან ერთად. ეს შეიძლება გაკეთდეს მათ ვებსაიტზე. მას შემდეგ რაც ჩავსვამთ ჯავასკრიპტს ჩვენს დოკუმენტში, უნდა განვსაზღვროთ სხვადასხვა კლასის წესები ალტერნატიული სტილისთვის. ჩვენ გამოვიყენებთ სურათებს იმ ბრაუზერებისთვის, რომლებსაც არ აქვთ საზღვრის რადიუსი და გრადიენტები.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontentt a. .no-generatedcontent a.button:visited (ფონი: url(images/sprite.png) გამეორების გარეშე 0 0px; სიმაღლე: 32px; სიგანე: 82px; .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( ფონი: url(images/sprite.png) გამეორების გარეშე 0 -32px; ) .no-cssgradients a.button:active, .no-borderradius a.button :active, .no-generatedcontent a.button:active ( ფონი: url(images/sprite.png) გამეორების გარეშე 0 -64px; ქვედა: 0; ხაზის სიმაღლე: 35px; ) .no-cssgradients a.gray, . no-cssgradients a.gray:visited, .no-cssgradients a.gray:hover ( background-position-x: 0; ) .no-cssgradients a.pink, .no-cssgradients a.pink:visited, .no-cssgradients a.pink:hover ( background-position-x: -82px; ) .no-cssgradients a.blue, .no-cssgradients a.blue:visited, .no-cssgradients a.blue:hover ( ფონზე d-პოზიცია-x: -164px ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.ფირუზისფერი, .no- cssgradients a.turquoise:visited, .no-cssgradients a.turquoise:hover ( background-position-x: -328px; ) .no-cssgradients a.შავი, .no-cssgradients a.შავი:მონახულებული, .no-cssgradients a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.მუქი ნაცრისფერი:hover ( background-position-x: - 492px; ) .no-cssgradients a.ყვითელი, .no-cssgradients a.ყვითელი:მონახულებული, .no-cssgradients a.ყვითელი:ჰოვერი (ფონი-პოზიცია-x: -574px; ) .no-cssgradients a.იისფერი, . no-cssgradients a.purple:visited, .no-cssgradients a.purple:hover ( background-position-x: -656px; ) .no-cssgradients a.darkblue, .no-cssgradients a.darkblue:visited, .no- cssgradients a.darkblue:hover ( background-position-x: -738px; ) .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-cssgradients a .button:hover, .no-cssgradients a.button:fore, .no-cssgradients a.button:after, .no-borderradius a.button, .no-cssgradients a.button:visited, .no-sssgradients a.button :hover, .no-borderradius a.button:fore, .no-borderradius a.button:after, .no-generatedcontent a.button, .no-generatedcontent a.button:visited, .no-generatedcontent a.button:hover , .no-generatedcontent a.button:fore, .no-generatedcontent a.button:after ( საზღვარი: 0; )
