Megnézzük az egyes példákat, és megnézzük, hogyan néz ki a HTML-szerkezetük és -stílusuk a különböző gombállapotokhoz.
Kérjük, vegye figyelembe, hogy az animációk/átmenetek csak olyan böngészőkben működnek, amelyek támogatják ezeket a CSS3-tulajdonságokat.
Annak érdekében, hogy ne szemeteljem el a kódot a leckében, nem fogok előtagokat használni a különböző böngészőkhöz. Megtekintheti őket az archívumban példákkal.
1. példa
Ebben a példában egy nagy gombot fogunk létrehozni több elemmel. Lesz rajta egy ikon, törzsszöveg, jobb oldalon egy nyíl, és egy ár, ami csak akkor jelenik meg, ha fölé húzzuk az egérmutatót.
HTML jelölés
A szerkezet meglehetősen egyszerű: a kép ikonja és más elemek a span címkékben:
Elérhető az Apple-nél Alkalmazásbolt
css
A stílusoknál ügyelünk arra, hogy az átmenetek helyesen legyenek beállítva ahhoz az elemhez, amelyet animálni szeretnénk, ha az egérmutatót mozgatjuk. Az ár láthatatlan lesz, az átlátszatlanságát állítsa 0-ra. Sok box-shadow alkalmazásával valósághű hatásokat tudunk létrehozni:.a-btn( háttér: lineáris gradiens(fent, #a9db80 0%, #96c56f 100%); kitöltés balra: 90px; padding-right: 105px; magasság: 90px; kijelző: inline-block; pozíció: relatív; szegély: 1px szilárd #80ab5d; box-shadow: 0px 1px 1px rgba(255,255,255,0,8) beágyazott, 1px 1px 3px rgba(0,0,0,0,2); szegélysugár: 4px; lebegés: balra; margó: 10px 0px; túlcsordulás: rejtett; átmenet: box-shadow 0,3 mp könnyű be-kilépés; ) .a-btn img( pozíció: abszolút; bal: 15 képpont; felső: 13 képpont; szegély: nincs; átmenet: mind 0,3 mp könnyű be-ki; ) .a-btn .a-btn-slide-text( pozíció: abszolút; betűméret: 36 képpont; felső: 18 képpont; bal: 18 képpont; szín: #6d954e; átlátszatlanság: 0; szöveg-árnyék : 0px 1px 1px rgba(255,255,255,0,4); átmenet: átlátszatlanság 0,2 s, könnyű behúzás; ) .a-btn-text( padding-top: 13px; display: block; font-size: 30px; text-shadow: 0px -1px 1px #80ab5d; ) .a-btn-text small( kijelző: blokk; betűméret: 11px; betűköz: 1px; ) .a-btn-icon-right( pozíció: abszolút; jobb: 0px; felső: 0 képpont; magasság: 100%; szélesség: 80 képpont border-bal: 1px tömör #80ab5d; box-shadow: 1px 0px 1px rgba(255,255,255,0,4) betét; - 20px; szegély: 1px tömör rgba(0,0,0,0,5); háttér: #4e5c50 url(../images/arrow_down.png) ismétlés nélküli középen; doboz-árnyék: 0px 1px 1px rgba(255,255,255,0. ) beillesztés, 0px 1px 2px rgba(255,255,255,0,5); átmenet: minden 0,3 mp-es egyszerű be-kimenet; )
Ha a gomb fölé viszi az egeret, megváltoztatjuk az árnyékot, valamint megjelenítjük az árat és elrejtjük a képet:
.a-btn:hover( box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); ) .a-btn:hover img(transform: scale ); átlátszatlanság: 0; ) .a-btn:hover .a-btn-slide-text, .a-btn:hover .a-btn-icon-right span( átlátszatlanság: 1; )
Aktív állapotban árnyék hozzáadásával nyomjuk meg a gombot. A jobb oldali nyíl ikon megnagyobbodik:
.a-btn:active (pozíció:relatív; felső:1px; háttér:#80ab5d; box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset; border-color: #a9db80; ) .a- btn:active .a-btn-icon-right span(transzformáció: scale(1.4); )
2. példa
A második példa nagyon hasonló lesz az elsőhöz, csak néhány új effektust adunk hozzá.
HTML jelölés
A jelölés ebben a példában ugyanaz lesz, mint az első példában.css
A stílusok szinte ugyanazok, mint az első példában, csak a színeket igazítjuk. De más lebegési effektust fogunk alkalmazni. Az ár az eredeti méretre nő, és az ikon eltűnik. A nyíl háttérszínét módosítsa pirosra:.a-btn:hover(box-shadow: 0px 1px 1px rgba(255,255,255,0,8) inset, 1px 1px 5px rgba(0,0,0,0,4); ) .a-btn:hover img( opacitás .a-btn:hover .a-btn-slide-text( átlátszatlanság: 1; átalakítás: skála(1); ) .a-btn:hover .a-btn-icon-right span( átlátszatlanság: 1; háttérszín : #bc3532; )
Az aktív állapot ugyanaz lesz, mint az előző példában. Csak színt változtatunk. Amikor a gombra kattintunk, a nyilat is elforgatjuk:
.a-btn:active ( pozíció: relatív; felső: 1px; háttér: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) beillesztés; keretszín: #80a9da; ) .a- btn:active .a-btn-icon-right span(transzformáció: forgatás (360 fok); )
3. példa
Ebben a példában megpróbálunk valami egészen mást csinálni. A gomb lefelé húzódik, és egy másik üzenet jelenik meg. A nyíl ikon kissé el fog forogni.
HTML jelölés
A 3. példa jelölése kissé eltér az előző példáktól. A lefelé csúsztatható szöveg egy „a-btn-slide-text” osztályú span címkében lesz:Regisztrálj most
css
Normál állapotban a gombnak van egy bizonyos magassága, lebegtetés közben animáljuk, hogy további üzeneteket jelenítsen meg. Az extra "a-btn-slide-text" üzenet abszolút pozicionálásra kerül, és a magasságát 0 képpontról 30 képpontra emeljük lebegtetéskor..a-btn( háttér: lineáris színátmenet (felső, #feda71 0%, #febb4a 100%); szegély: 1px szilárd #f5b74e; keretszín: #f5b74e #e5a73e #d6982f; box-shadow: 0 1px 1px # d3d3d3, beillesztés 0 1px 0 #fee395; kitöltés: 0px 80px 0px 10px; magasság: 38px; kijelző: soron belüli blokk; pozíció: relatív; szegélysugár: 4px; lebegés: bal; margó: 10px; túlcsordulás: rejtett; átmenet: átmenet mind 0,3 s lineáris; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px; white-space: nowrap; color: #996633; text-shadow: 0 1px 0 #fedd9b; átmenet: mind 0,3 s lineáris; ) ; betűméret: 13 képpont; szóköz: nowrap; betűcsalád: Georgia, serif; betűstílus: dőlt; szöveg behúzás: 15 képpont; túlcsordulás: rejtett; sormagasság: 30 képpont ; box-shadow: -1px 0px 1px rgba(255,255,255,0,4), 1px 1px 1px rgba(0,0,0,0,5) inset;átmenet: magasság 0,3s lineáris; ; jobbra: 0px; felső: 0px; magasság: 100%; szélesség: 52px; border-bal: 1px tömör #f5b74e; box-shadow: 1px 0px 1px rgba(255,255,255,0,4) betét; ) .a-btn-icon-right span(szélesség: 38px; magasság: 38px; átlátszatlanság: 0,7; pozíció: abszolút; bal: 50%; felső: 50%; margó: -20px 0px 0px -20px; háttér: átlátszó URL (../images/arrow_right.png) ismétlés nélküli 50% 55%; átmenet: mind 0,3 s lineáris; )
Ha az egérmutatót húzza, megváltoztatjuk a gomb magasságát és a további szöveget. A nyíl ikont is elforgatjuk 45 fokkal:
A btn-text( text-shadow: 0px 1px 1px rgba(0,0,0,0.2); szín: #fff; ) .a-btn:hover .a-btn-slide-text( magasság: 30px; ) .a -btn:hover .a-btn-icon-right span( átlátszatlanság: 1; transzformáció: forgatás (-45 fok); )
Ha aktív, a gomb enyhén elmozdul, és színe megváltozik, így a gomb megnyomottnak tűnik:
.a-btn:active ( position:relative; top:1px; background: linear-gradient(top, #fec354 0%, #fecd61 100%); /* W3C */ border-color: #d29a3a #cc9436 #c89133; szövegárnyék: 0 1px 0 #fee1a0; box-shadow: 0 1px 1px #d4d4d4, beillesztés 0 1px 0 #fed17e; )
4. példa
A 4. példában az előző példához hasonlóan egy további üzenetet küldünk, de most a jobb oldalon fogjuk megtenni. Úgy fog kinézni, mintha a gomb üzenetet nyitna meg magában.
HTML jelölés
A jelölés ebben a példában ugyanaz, mint az előzőben.css
A gombstílusok hasonlóak lesznek az előző példához. Csak a kiegészítő szöveg színét és helyzetét változtatjuk meg:.a-btn( háttér: lineáris gradiens(fent, #80a9da 0%,#6f97c5 100%); kitöltés balra: 20px; padding-right: 80px; magasság: 38px; kijelző: inline-block; pozíció: relatív; szegély: 1px szilárd #5d81ab; box-shadow: 0px 1px 1px rgba(255,255,255,0,8) beillesztés, 1px 1px 3px rgba(0,0,0,0,2), 0px 0px 0px szegély,-8,8,1px szegély,-8,8,1px 4px. : 20px; lebegés: balra; törlés: mindkettő; margó: 10px 0px; túlcsordulás: rejtett; átmenet: mind 0,3 s lineáris; ) .a-btn-text( padding-top: 5px; display: block; font-size: 18px ; szóköz: nowrap; text-shadow: 0px 1px 1px rgba(255,255,255,0,3); szín: #446388; átmenet: mind 0,2s lineáris; ) .a-btn-slide-text(pozíció:abszolút; magasság: 100 %; felül: 0px; jobbra: 52px; szélesség: 0px; háttér: #63707e; szövegárnyék: 0px -1px 1px #363f49; szín: #fff; betűméret: 18px; szóköz: nowrap; szövegátalakítás : nagybetűs; szövegigazítás: balra; szöveg behúzása: 10px; túlcsordulás: rejtett; sormagasság: 38px; doboz-árnyék: -1px 0px 1px rgba(255,255,255,0,4), 1px 1px 2px rgba(0,0,0,0,2) betét; átmenet: szélesség 0,3s lineáris; ) .a-btn-icon-right( pozíció: abszolút; jobb: 0px; felső: 0px; magasság: 100%; szélesség: 52px; keret-bal: 1px tömör #5d81ab; box-shadow: 1px 0px 1px rgba(255,255,25) ,0,4) betét ; háttér: átlátszó url(../images/arrow_right.png) ismétlés nélküli 50% 55%; átmenet: mind 0,3 s lineáris; )
Ha az egérmutatót lefelé viszi, megnöveljük a gomb jobb oldali kitöltését, valamint a span címke szélességét az „a-btn-slide-text” osztállyal:
a a-btn-text( text-shadow: 0px 1px 1px #5d81ab; color: #fff; ) .a-btn:hover .a-btn-slide-text( szélesség: 100px; ) .a-btn:hover .a -btn-icon-right span( átlátszatlanság: 1; )
Aktív állapotban hozzon létre egy kattintási effektust árnyék segítségével:
.a-btn:active (pozíció: relatív; felső: 1px; háttér: #5d81ab; box-shadow: 1px 1px 2px rgba(0,0,0,0.4) beillesztés; keretszín: #80a9da; )
5. példa
Ebben a példában karakteres betűtípust fogunk használni az ikonokhoz. Az ötlet a következő effektus létrehozása: ha az egeret fölé viszi, az ikon eltűnik, és megjelenik egy mozgó nyíl.
HTML jelölés
A szerkezet 4 span címkéből fog állni a hivatkozáson belül. Az "a-btn-slide-icon" osztályú span animálja a nyilat, felülről lefelé mozog.Z Letöltés most
css
Mivel a bal oldalon lévő ikon megjelenítéséhez egy betűtípust fogunk használni, ezt a betűtípust kell tartalmaznunk.A nyilat elrejtjük, ha felső értékét -30 képpontra állítjuk.
@font-face ( font-family: "WebSymbolsRegular"; src: url("websymbols/websymbols-regular-webfont.eot"); src: url("websymbols/websymbols-regular-webfont.eot?#iefix") formátum ("embedded-opentype"), url("websymbols/websymbols-regular-webfont.woff") formátum("woff"), url("websymbols/websymbols-regular-webfont.ttf") formátum("truetype"), url("websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular") format("svg"); betűtípus súlya: normál; betűtípus stílusa: normál; ) .a-btn( határsugár: 50 képpont; kitöltés: 10 képpont 30px 10px 70px; pozíció: relatív; lebegés:bal; kijelző: blokk; túlcsordulás: rejtett; margó: 10px; háttér: lineáris gradiens(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 74%, 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); átmenet: 0 box-3shadow out; ) .a-btn-symbol( font-family: "WebSymbolsRegular", kurzív; szín: #555; betűméret: 20px; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); position:absolute; balra: 20px; vonalmagasság: 32 képpont; átmenet: átlátszatlanság 0,3 s könnyű be-ki; ) .a-btn-text( font-size: 20px; color: #d7565b; line-height: 16px; font-weight: bold; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; szöveg -shadow: 1px 1px 2px rgba(255,255,255,0,5); megjelenítés: blokk; ) .a-btn-slide-text( font-family: Arial, sans-serif; betűméret: 10px; betűköz: 1px; szöveg -transzformáció: nagybetűs;szín: #555;szövegárnyék: 0px 1px 1px rgba(255,255,255,0,9); ) .a-btn-slide-icon(pozíció:abszolút; felső: -30px; szélesség: 22px; magasság: 22px ; háttér: átlátszó url(../images/arrow_down_black.png) ismétlés nélküli bal felső sarokban; balra: 20 képpont; átlátszatlanság: 0,4; )
Lebegtetés közben elrejtjük a bal oldali ikont, és korlátlan ideig lejátszjuk a nyíl animációját:
.a-btn:hover( háttér: #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 -btn-symbol( átlátszatlanság: 0; ) .a-btn:hover .a-btn-slide-icon( -webkit-animáció: slideDown 0,9s lineáris végtelen; )
Amikor a gombra kattintunk, pirosra festjük, és egy árnyék hozzáadásával kattintási effektust hozunk létre:
.a-btn:active( háttér: #d7565b; box-shadow: 0px 2px 2px rgba(0,0,0,0.6) inset, 0px 0px 0px 1px rgba(188,188,188,0.1); ) :active a-btn-text( szín: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); ) .a-btn:active .a-btn-slide-text( szín: rgba(0) ,0,0,0,4); szövegárnyék: nincs; )
És végül egy egyszerű animáció a nyíl mozgatásához fentről lefelé:
@keyframes slideDown ( 0% ( felül: -30 képpont; ) 100% ( felül: 80 képpont;) )
6. példa
Ebben a példában egy kerek gombot fogunk létrehozni csillaggal. A csillagot lebegtetve forogtatjuk (kis lendülettel), és egy kis extra szöveget jelenítünk meg.
HTML jelölés
Három span címkénk lesz a linkgombunkban. Utóbbi rejtett szöveggel rendelkezik, amely az egérmutatón látható.Jelentkezz, ingyenes!
css
Ebben a példában egy kicsit játszunk az n-edik gyermekkel. Mivel 3 span címkénk van, így fogjuk hivatkozni rájuk: .a-btn span:nth-child(1), .a-btn span:nth-child(2) és .a-btn span:nth-gyermek (3).A gombokat kerekre tesszük, és díszes árnyékokat adunk hozzájuk. A törzsszöveg függőleges középre állításához a megjelenítést táblázatcellára állítjuk. A csillagok és a rejtett szöveg abszolút elhelyezésre kerül.
a (246, 212, 163, 0,5) beillesztés, 0px -1px 5px 4px rgba(170, 77, 27, 0,2) 0px 0px 0px 9px #fff; átmenet: mind 0,3 s lineáris; ) .a-bt: tablen -cella; szélesség: 80px; magasság: 80px; kitöltés: 20px; szövegigazítás: középre; függőleges igazítás: középre ; betűméret: 26px; szín: #fff; szövegárnyék: 0px 1px 1px #A03F16; font- család: "Arvo", "Myriad Pro", "Trebuchet MS", sans-serif; átmenet: mind 0.3s lineáris ; ) .a-btn span:nth-child(1), .a-btn span:nth-child 3 (../images/star.png) ismétlés nélküli középpont; átlátszatlanság: 0,2; )
Lebegtetéskor megváltoztatjuk a gomb árnyékát úgy, hogy az felemeltnek tűnjön. A rejtett szöveg megjelenik, és animálni fogjuk a kezdeti szöveget. A sztárhoz egy forgási animációt is alkalmazunk:
A , 27, 0.2) beillesztés, 0px 0px 0px 7px #fff, 1px 4px 5px 8px rgba(188, 188, 188, 0,6), 0px 0px 0px 9px #fff; :n3averb; :n3. )( átlátszatlanság: 1; ) .a-btn:hover span:nth-child(2)( transzformáció: skála(0); átlátszatlanság: 0; ) .a-btn:hover span:nth-child(1)( animáció : forgatás 1s lineárisan;)
Most tegyük úgy, hogy a gomb lenyomva van, amikor rákattint:
A , 0px -1px 0px 8px rgba(188, 188, 188, 0,3), 0px 0px 0px 10px #ffff; ) .a-btn:active span:nth-child(2)( szín: rgba(170,7,7,7 0,8); szövegárnyék: 0px 1px 1px rgba(255, 255, 255, 0,6); )
A forgatás/hullámozás animáció így néz ki:
@-webkit-keyframes rotate( 0% ( transzformáció: scale(1) rotate(0);) 50% ( Transform: scale(0.5) rotate(180deg);) 100% ( Transform: scale(1) rotate(360deg) ;) )
7. példa
Az utolsó példában egy pszeudo 3D gombot fogunk létrehozni néhány hűvös árnyék segítségével.
HTML jelölés
A szerkezet ugyanaz lesz, mint az ötödik példábancss
A stílus is nagyon hasonló lesz az 5. példához, csak néhány színt és árnyékot változtatunk:a ,#7ce7ea 100%); szegély: 1px tömör #90c6c8; szegély színe: #90c6c8 #78bdc0 #65b6ba; keretes árnyék: 0px -5px 0px 0px #458a8c, 0 1px 1px #90c6c8, 5,5,1px 5,5,5,5,5,1px 5,5,5 0,8) beillesztés; átmenet: mind 0,2 s lineáris; ) .a-btn-symbol( font-family: "WebSymbolsRegular", kurzív; szín: #437b7d; szövegárnyék: 0 1px 0 #bef3f5; betűméret: 20px; pozíció: abszolút; bal: 20 képpont; szélesség: 20 képpont; szövegigazítás: középre; vonalmagasság: 32 képpont; átmenet: minden 0,3 mp-es könnyű behúzás; ) .a-btn-text( betűméret: 20 képpont; szín : #437b7d; szövegárnyék: 0 1px 0 #bef3f5; sormagasság: 16px; betűvastagság: félkövér; font-család: "Myriad Pro", "Trebuchet MS", sans-serif; kijelző: blokk; ) . a-btn-slide-text( font-family: Arial, sans-serif; betűméret: 10px; betűköz: 1px; szövegátalakítás: nagybetűk; szín: #555; szövegárnyék: 0px 1px 1px rgba(255,255,255,0,9); )
A lebegtetéskor kinagyítjuk a gombot, és elforgatjuk a kis ikont: gombok Címkék hozzáadása
Jó napot, kedves olvasók. Ezen a napon alkotunk gyönyörű ikonkészlet a webhelyhez CSS3 és animáció segítségével. Ennek a gombnak köszönhetően az oldalon lévő bármely hivatkozást animált gombokká alakíthatod, egyszerűen hozzárendelve egy osztálynévhez. Általánosságban elmondható, hogy első pillantásra nincs itt semmi bonyolult.
Emlékeztetőül: ezek a gombok ingyenesek, és megteheti ingyenes letöltés. Megy.
Animált CSS3 gombok webhelyéhez
Most néhány szó a gombok méretéről és lekerekített sarkairól:
/* Három gombméret */ .button.big ( font-size:30px;) .button.medium ( font-size:18px;) .button.small ( font-size:13px;) /* Lekerekített gombsarkok */ .button.rounded( -moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em; )
A fenti kódban három osztály található - ezek nagy, közepesés kicsi. Ennek megfelelően minden osztályhoz különböző értékeket állítunk be pixelben. A fenti kódban minden jól látható.
És most a legérdekesebb rész a színek. Itt elvileg nincs is semmi bonyolult.
/* Kék gomb */ .blue.button( color:#0f4b6d !important; border:1px solid #84acc3 !important; /* Backback background color */ background-color: #48b5f2; background-image: url("button_bg. png"), url("button_bg.png"), -moz-radial-gradient(center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(# 4fbbf7, #3faeeb); háttérkép: url("button_bg.png"), url("button_bg.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from (rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradiens(lineáris, 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(középen alul, kör, rgba -moz-linear-gradient(#63c7fe, #58bef7); háttérkép: url("button_bg.png"), url("button_bg.png" ), -webkit-gradient(radiális, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,21) 7,250,0))), -webkit-gradiens(lineáris, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); )
Ez minden most. Szeretném előre figyelmeztetni, hogy jelenleg előfordulhat, hogy egyes böngészőkben nem működnek a gombok, mert egyelőre nem mindegyik támogatja a CSS3-at. De úgy tűnik, hogy ez a probléma hamarosan megoldódik.
Sziasztok kedves barátaim. Ma két olyan módszerről fogok beszélni, amelyek segítségével animált gombot hozhat létre webhelyein. Valószínűleg sok ilyen gombot látott már, és rákattintott. Így a blogomon rendszeresen ajánlok partnertanfolyamokat, tréningeket, csak azokat, amelyeket magam is kipróbáltam. És természetesen érdekelnek a statisztikák, és a statisztikák szerint az emberek 48%-kal gyakrabban kattintanak a vonzó gombokra, mint a hagyományos linkekre.
Az animált gombok CSS-ben való létrehozásának elve a következő, három rendelkezést tartalmaz. 1 - Kezdő, 2 - a kurzor mozgatásakor és 3 - az egér gombjának megnyomásakor. Egyes szolgáltatások mindhárom pozícióval rendelkeznek, míg másoknak csak kettő. De a lényeg, hogy elégedett legyen a végeredménnyel.
Oktatóvideó az animált gombok létrehozásának második módjáról:
Példaként tekintsük a CSS3 ButtonGenerator szolgáltatást, amelynek mindössze két pozíciója van. De a hatások nagyon jól néznek ki. Akit zavar az orosz nyelv hiánya, használja a listában megadott utolsó generátort.
Tehát kezdjük.
Nyissa meg a szolgáltatás főoldalát. Kezdetben megjelenik a gomb és az eszközök előnézete, amely lehetővé teszi mindenféle beállítás elvégzését.
Az első Szöveg és betűtípus rész felelős a szövegért, a betűméretért, a betűszínért, a betűtípus árnyékáért. Ide írhatja a gomb címkéjét, beállíthatja a méretét, színét és árnyékát.
A következő rész, a Háttér, a háttérre vonatkozik. Itt adhatja meg a gomb színét, a gomb színátmenetét, a gomb méretét és a háttér keverését.
A Határ rész felelős a gomb árnyékának és szegélyeinek beállításáért. Könnyedén állítható a szegély vastagsága, a sarkok lekerekítése és a gomb árnyéka.
A következő rész, a Transform, a gomb átalakításáért felel, ezek az elforgatások, az eltolások és a torzítások.
A következő rész, az Átmenet, az animáció gördülékenységéért felel. Ezeket a beállításokat a gombodnak megfelelően állíthatod be. A műveletek a teljes gombra vagy egyes rétegekre vonatkoztathatók.
Néhányszori próbálkozás után kísérletezzen a beállításokkal, és megérti, mi az.
A gomb kezdeti megjelenésének konfigurálása után folytathatja a következő lépést. Ez a gomb módosítása, amikor az egérkurzort lebegteti. Ehhez kattintson a képernyőképen látható jelölőnégyzetre.
Egérlebegtetési lehetőségek
Mostantól a beállítások összes módosítása arra a gombra vonatkozik, amely akkor jelenik meg, ha az egérmutatót fölé viszi. És ezek a beállítások minden egyes gombtól külön-külön függenek. Példaként változtattam az elforgatás, a színátmenet és az árnyékszín beállításait.
Amikor a gomb készen áll, folytathatja a gomb telepítését a cikkben. Ehhez telepítse a kódot a cikk megfelelő helyére:
Íme a példánk:
Nos, most már tudja, milyen egyszerűen és gyorsan készíthet animált gombot egy webhelyhez vagy bloghoz. Próbáld ki és hajtsd végre, megéri. Ha kérdése van, írja meg a megjegyzésekben, megpróbálok segíteni.
Mára ennyi, sok sikert kívánok. És mindig örömmel látok a blogom oldalain.
P.S. És itt van egy példa egy animált gombra Denis Gerasimov "Hideg forgalom beállítása a kapcsolt linkek népszerűsítésére" című képzéséhez. Végigmentem ezen a képzésen, és mindenkinek ajánlom – nagy túlzás nélkül ez egy igazi módja annak, hogy a társult programokon pénzt keress. Amit alapvetően csinálok.
Dobtam ide egy vázlatot, ahogy látom a Demo gombot. Az ötlet itt a következő, hogy a gombot úgy kell elkészíteni, mintha két részből lenne, animálni kell, lebegtetéskor a második rész kinyílik, kihúzva a belső blokkot, ahol a felirat található, és abban a pillanatban, amikor a kurzort eltávolítják , mindennek vissza kell térnie az eredeti helyzetébe.
- A leckében a főbb stílusokat fogjuk használni:
- pszeudoelemek :előtte , :utána ;
- pozíció használata pozícióblokkokkal
- pszeudoosztályok :hover , :activ stílusokat határoznak meg az egeret mozgatva és az egérkattintással
- és sima animációt készíthet átmenettel, átalakítással
Gomb HTML-struktúra
Egy vázlattal a szemed előtt már el tudod képzelni, hogyan lehet ezt megvalósítani CSS-ben. Szükségünk van a fő blokkra, ahová a gomb összes eleme kerül, ez lesz a burkolója. Ekkor a gombnak lesz egy belső része, ami kimozdul, ha nem mozgatjuk az egeret, benne a „Példa megtekintése” szöveget helyezzük el. Ezután jön a gomb bal és jobb része, közéjük háromszög alakú pszeudoelemeket helyezünk el. És majdnem elfelejtettem, a kép nyilak formájában van. Mindezt animálnunk kell, és a gomboknak egy bizonyos textúrát kell adnunk.
Megnyitjuk a fejlesztői környezetünket, esetemben én használom phpstorm, hozzon létre benne index.html-t, írja be a nevet " Gomb DEMO animáció CSS". Mi alkotunk
Div.dws-button>a>div.b-demo+div.b-text+div.b-img
Kattintson az Alkalmaz gombra, és elkészül a szerkezet.
A hivatkozásba tegyen egy hash jelet (# ), hogy az aktív legyen. Írjuk be a gomb nevét" Demó" , a középső blokkban a " Lásd a példát", és alul szúrja be a kép elérési útját.
Létrehozunk egy könyvtárat, ahova bemásolom a képeket, beillesztheti a képeit, vagy letölthet egy archívumot kész kóddal.
Írja be a kép elérési útját src="img/icon.png" , adja meg az alt="(!LANG:button"
, на этом у нас каркас готов самой кнопки и можно переходить к оформлению стилей.!}
A gomb CSS-stílusainak leírása
Következő lépés: hozzunk létre css style.css fájlt, és csatlakoztassa az indexoldalhoz. Azonnal csatlakoztatjuk a népszerű Cuprum fontot, és már nincs szükség indexfájlra.
Nyissa meg a style.css webhelyet, adjon hozzá egy képet a háttérhez, és állítsa vissza a .dws-gombblokk összes elemének kitöltését.
Body( background-image: url("img/ep_naturalwhite.png"); ) .dws-button *( margó: 0; kitöltés: 0; )
Magának a gombnak beállítjuk a szövegstílust, a szélességét 250 pixelre. és 70 kép magas, a képernyő közepén középen és felülről 250 képpel behúzva. Ezután 1 csúcs határát rendeljük hozzá. hogy lássuk a gomb szegélyeit, amikor animált, amikor kinyújtjuk.
Dws-button (betűcsalád: Cuprum, Arial, Verdana, sans-serif; szélesség: 250px; magasság: 70px; margó: 250px automatikus; körvonal: 1px tömör #faa21a; )
A hivatkozásokról eltávolítjuk az aláhúzást, és szürke színt rendelünk hozzájuk.
Dws-gomb a(szövegdekoráció: nincs; szín: #2e2e30; )
Ezután azonnal válassza ki a blokkokat, és adjon nekik egyetlen fehér színt.
B-demo, .b-img( háttér: #ffffff; )
Ezután minden blokkot külön írunk le, válasszuk ki a .b-demo osztályt és állítsuk be a blokk szélességét 105 pixelre.. Állítsuk be a magasságot line-height segítségével: 70px; , állítsa középre a szöveget, és növelje a betűtípust 30 pontra. Tedd csupa nagybetűvel, és töltsd ki a bal és jobb oldali kitöltést.
B-demo (szélesség: 105 képpont; sor magassága: 70 képpont; szöveg igazítása: középre; betűméret: 30 képpont; szövegátalakítás: nagybetűk; kitöltés: 0 10 képpont 0 15 képpont; )
Jelölje ki a következő .b-szövegblokkot, adjon neki sötét színt, tegye világossá a szöveget, állítsa a méretét 24 képpontra, a szélességét pedig 150 képpontra. és behúzások segítségével csökkentjük a blokk magasságát. Középre a szöveg és állítsa be a kitöltést.
B-szöveg (háttér: #3e3f3e; szín: #ffffff; betűméret: 24px; szélesség: 150px; vonalmagasság: 20px; szövegigazítás: középre; kitöltés: 10px 0 10px 10px; )
Válassza ki a megfelelő blokkot, állítsa a szélességet 45 csúcsra. magassága is 45 csúcs. A .padding középre helyezi a képelemet, kissé jobbra tolva azt.
B-img (szélesség: 45 képpont; vonalmagasság: 45 képpont; kitöltés: 20 képpont 0 0 20 képpont; )
Ezután ezeket az elemeket a .dws-button osztályú blokkhoz viszonyítva helyezzük el. Ehhez rendelje hozzá az osztály pozícióját: relatív; és beágyazott összes blokk pozíciója: abszolút; .
A blokkok mindegyike a szülőhöz lett igazítva, és most menjünk át rajtuk, és helyezzük középre őket.
A .b-demo osztálynál a kezdeti pozíciókat nullákkal adjuk meg balról és felülről, és hozzáadjuk a z-index:10-et; hogy ez a blokk magasabban legyen, mint a többi.
.b-demo( szélesség: 105 képpont; vonalmagasság: 70 képpont; szöveg igazítása: középre; betűméret: 30 képpont; szövegátalakítás: nagybetűk; kitöltés: 0 10 képpont 0 15 képpont; balra: 0; felső: 0; z-index: 10; )A szöveget tartalmazó blokkot balról és felülről 5 csúcs fogja behúzni.
A .b-img képpel ellátott blokkot pedig a bal oldalon 140 csúcs behúzza. , és felülről állítsa 0-ra.
.b-img( szélesség: 45 képpont; vonalmagasság: 45 képpont; kitöltés: 20 képpont 0 0 20 képpont; balra: 140 képpont; felső: 0; határsugár: 0 10 képpont 10 képpont 0; )És ugyanezt tesszük a bal oldali blokkal is.
.b-demo( szélesség: 105 képpont; sor magassága: 70 képpont; szöveg igazítása: középen; betűméret: 30 képpont; szövegátalakítás: nagybetűs; kitöltés: 0 10 képpont 0 15 képpont; bal: 0; felül: 0; z- index: 10; határsugár: 10px 0 0 10px; )Ezután két pszeudoelemet kell készítenünk, ezek azok a sarkok, amelyek a kapcsolatukon helyezkednek el.
Válassza ki a megfelelő blokkot, és rendeljen hozzá egy :before pszeudoelemet, állítsa a szélességet és a magasságot nullára, és rajzoljon egy háromszöget a keret segítségével. Ezután el kell helyeznünk, ehhez hozzáadja a készletünkhöz.
És igazítsa úgy, hogy a blokk végén álljon.
B-demo:before( tartalom: ""; szélesség: 0; magasság: 0; szegély felső: 35 képpont tömör átlátszó; szegély balra: 10 képpont tömör #ffffff; keret alsó: 35 képpont tömör átlátszó; felső: 0; bal: 129 képpont ;)
Kérjük, vegye figyelembe, hogy az összes blokkot balra igazítjuk, és nem jobbra, mivel az animáció balról jobbra halad, és ez kulcsfontosságú.
Ezután kiválasztjuk a következő blokkot a képpel és hozzárendeljük az :after pszeudoelemet. Felírjuk a tartalmat, majd a szélességet és a magasságot nullára állítjuk, és a keret segítségével háromszöget rajzolunk. Határozottan helyezze el, és igazítsa balra.
.b-demo, .b-text, .b-img, .b-demo:before,.b-img:after( pozíció: abszolút; ) .b-img:after( tartalom: ""; szélesség: 0; magasság: 0; keret felső: 35 képpont tömör átlátszó; szegély bal: 10 képpont tömör #3e3f3e; szegély -alul: 35px tömör átlátszó; fent: 0; bal: 0;)A gomb fő kerete készen áll, már csak animálni kell, és szép dizájnt adni neki.
Gomb-animáció a CSS-ben
Lényegében kész a gomb és kezdjük el animálni, írok kommentet, ahonnan stílusokat írunk. Először is leírjuk a műveleteket, amikor a gomb fölé viszi az egérmutatót.
/* Animáció:hover */ .dws-button a:hover .b-demo(szélesség: 50px; kitöltés: 0 10px 0 10px; betűméret: 20px; )
Azonnal minden blokkra írjuk a sima mozgás animációját, ehhez mindegyiket kijelöljük, és az összes tulajdonság átmenetét 0,5 másodpercre állítjuk.
Dws-button a:hover .b-demo, .dws-button a:hover .b-demo:before, .dws-button a:hover .b-text, .dws-button a:hover .b-img, . dws-button a:hover .b-img:after(átmenet:mind 0,5s; )
A mozgást ezzel a blokkkal a :before pszeudoelemhez írjuk elő a 69-es csúcsra. balra.
Dws-gomb a:hover .b-demo:before(bal: 69px; )
A gomb második részét jobbra mozgatjuk, jelezve, hogy lebegtetéskor tolja el a blokkot 185 csúccsal.
Dws-gomb a:hover .b-img(balra: 185px; )
Ekkor a szöveget tartalmazó blokk 50 pikknél lesz. nyomja meg, válassza ki és írja elő a blokk mozgását.
Dws-gomb a:hover .b-text(balra: 50px; )
Annak érdekében, hogy a gomb ne zuhanjon össze azonnal a kurzor eltávolítása után, a nyugalmi blokkelemeknél átmenetet kell beállítani, 1,5 másodperccel lassabban zsugorítjuk a gombot.
.b-demo, .b-text, .b-img, .b-demo:before, .b-img:after( pozíció: abszolút;átmenet:minden 1,5s; )Ezután 360 fokos transzformációval animáljuk az ikon elforgatásának hatását, kiválasztjuk a képet és írjuk transzformációt: rotate(360deg) ; és állítsa be az átlátszatlanságot is: 0,5; hogy kicsit átlátszóbb legyen a kép.
Dws-gomb a:hover img( transzformáció: forgatás (360 fok); átlátszatlanság: 0,5; )
Ha most a gomb fölé húzzuk az egérmutatót, akkor nem látjuk a forgatás hatását, hiszen magára a képre kell beállítani az átmenetet. Kiválasztjuk és előírjuk neki ezt a tulajdonságot.
B-img img(átmenet:minden 1,5s; )
Elkészült az animált kiterjesztési effektussal ellátott gomb, elrejtheted a körvonalat, már nem lesz rá szükséged, és elkezdheted a díszítést.
Dws-button(betűcsalád: Cuprum, Arial, Verdana, sans-serif; szélesség: 250px; magasság: 70px; margó: 250px automatikus; /*körvonal: 1px tömör #faa21a;*/ pozíció: relatív; )
Készítettünk egy teljes értékű animált gombot, és most szebbé varázsolhatod.
Gombstílus CSS-ben
Miután minden munkát elvégeztünk a tulajdonságain, a pozicionálásán és az animációin, folytatjuk a tervezést. Változtassuk meg a gomb általános stílusát, adjunk hátteret a blokkokhoz, készítsünk árnyékot a szövegnek, és adjunk hozzá egy :active pszeudoosztályt, amely az egérkattintásra indul.
Bemegyünk a kiegészítő szolgáltatásba, ahol már elkészítettem a preseteket és csak bemásolom a stílust a gombhoz, majd lecserélem vele az előzőt.
B-demo, .b-img( /* Permalink - használja a színátmenet szerkesztéséhez és megosztásához: http://colorzilla.com/gradient-editor/#f22404+13,8e0b00+65,6d0019+100 */ háttér: # f22404; /* Régi böngészők */ háttér: -moz-linear-gradient(-45deg, #f22404 13%, #8e0b00 65%, #6d0019 100%); /* FF3.6-15 */ háttér: -webkit- lineáris gradiens(-45 fok, #f22404 13%,#8e0b00 65%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ háttér: lineáris gradiens(135deg, #f22404 13%,# 8e0b00 65%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f22404", endColor0stry="#f22404", 6dColor0stry="#Gpe =1); /* IE6-9 tartalék vízszintes színátmeneten */ )
A pszeudoelemhez adjunk piros színt a gombösszetevő hátteréhez.
.b-demo:before( tartalom: ""; szélesség: 0; magasság: 0; szegély felső: 35 képpont tömör átlátszó; szegély balra: 10 képpont tömör#7B040E; keret-alsó: 35px tömör átlátszó; felső: 0; balra: 129 képpont; )Változtassuk meg a linkek színét sötétről fehérre.
Dws-gomb a(szövegdekoráció: nincs; szín: #ffffff; )
Adjunk árnyékot a szövegnek, ehhez adjuk hozzá az órán .b-demo text-shadow: -1px -1px 1px #000000;
.b-demo( szélesség: 105 képpont; sor magassága: 70 képpont; szöveg igazítása: középen; betűméret: 30 képpont; szövegátalakítás: nagybetűs; kitöltés: 0 10 képpont 0 15 képpont; bal: 0; felül: 0; z- index: 10, szegélysugár: 10 képpont 0 0 10 képpont; text-shadow: -1px -1px 1px #000000; )A belső blokkot kékes színűre fogom készíteni.
.b-text( /* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50;Custom+2 */ background: #b3dced; /* Régi böngészők */ háttér: -moz-linear-gradient(45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(45deg, #b3dced 0% ,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ háttér: lineáris gradiens (45 fok, #b3dced 0%,#29b8e5 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+ , Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 tartalék vízszintes színátmeneten */ szín: #ffffff; betűméret: 24 képpont; szélesség: 150 képpont vonalmagasság: 20 képpont; szöveg igazítása: középre; padding: 10px 0 10px 10px; balra: 5px; felső: 5px; )Azonnal változtassa meg az :after pszeudoelem színét
Cseréljük ki a képet, a feketét állítsuk fehérre, az óra elején feltöltöttem kettőt, a második ikont írjuk elő.
Az utolsó szakaszban pedig leírjuk a stílusokat, amikor az egérrel kattintunk
Ide írom a hozzá tartozó megjegyzést, majd alatta kiválasztunk két pszeudoosztályú :active blokkot, az összetevőt csak fordítva állítjuk be.
/* Animáció:aktív */ .dws-button a:active .b-demo, .dws-button a:active .b-img( /* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com /gradient-editor/#f22404+13,8e0b00+49,6d0019+70 */ háttér: #f22404; /* Régi böngészők */ háttér: -moz-linear-gradient(45deg, #f22404 13%, #8e0b00 49% , #6d0019 70%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(45deg, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* Chrome10-25,Safari5 .1-6 */ háttér: lineáris gradiens(45 fok, #f22404 13%,#8e0b00 49%,#6d0019 70%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXIma .Microsoft.gradient(startColorstr="#f22404", endColorstr="#6d0019",GradientType=1); /* IE6-9 tartalék vízszintes színátmenetre */ )
A háttérben lévő blokk esetében a színátmenetet ebben a stílusban csak tükrözve tesszük, és árnyékhatást adunk hozzá.
Dws-button a:active .b-text( /* Permalink – a színátmenet szerkesztéséhez és megosztásához használja: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50 */ háttér: #b3dced; /* Régi böngészők */ háttér: -moz-linear-gradient(-45deg, #b3dced 0%, #29b8e5 50%); /* FF3.6-15 */ háttér: -webkit-linear-gradient(-45deg, #b3dced 0%,#29b8e5 50%); /* Chrome10-25,Safari5.1-6 */ háttér: lineáris gradiens (135 fok, #b3dced 0%, #29b8e5 50%); /* W3C, IE10+, FF16+ , Chrome26+, Opera12+, Safari7+ */ szűrő: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3dced", endColorstr="#29b8e5",GradientType=1); /* IE6-9 tartalék vízszintes színátmenetre */ box- árnyék: 0 0 3px 1px #82DCFF; )
Utolsó stílusként kattintáskor az ikon ellenkező irányú elforgatását írjuk ki annak teljes megnyilvánulásával.
Dws-gomb a:active img( transzformáció: forgatás(0deg); átlátszatlanság: 1; )
Meglehetősen hatékony gombnak bizonyult, amely könnyen módosítható, és a feladatoknak megfelelően alakítható. Azt javaslom, hogy cserélje le az általános kialakítását, készítsen saját előbeállításokat, kísérletezzen a különböző színátmeneti lehetőségekkel, talán eredetibb animációs módszereket talál ki, és feltétlenül ossza meg őket a megjegyzésekben.
Akinek tetszett az anyag, feltétlenül ossza meg barátaival.
- Fordítás
Szia kedves habradrog! Ma megtanuljuk, hogyan készítsünk CSS3 3D gombokat! Orman Clark prémium pixels webhelyének népszerű ingyenes PSD-jén alapulnak. Megpróbálunk másolatot készíteni ezekről a gombokról CSS használatával, minimális mennyiségű HTML kóddal.
1. lépés: HTML dokumentum létrehozása
Kezdjük egy új HTML dokumentum létrehozásával. Ez a HTML5 sablonon fog alapulni, így jó kiindulópontunk van. Most hozzáadunk egy listát linkekkel. Lényegében ennyi, hála a CSS3-nak, amiért nem kell további diveket és spanokat használnunk.Minden listaelemhez hozzárendeljük az osztály „gombjait”. És mivel Orman különböző színeket használt, minden gombhoz hozzárendeljük a saját színét osztályként.
Ebben a szakaszban csak ennyire van szükségünk.
2. lépés: Alapvető CSS-szabályok
Mielőtt belevágna a színátmenetekbe, lekerekített sarkokba stb., ügyeljen az alapvető szabályokra. Semmi különös, sima CSS2:Ul ( lista-stílus: nincs; ) a.button ( kijelző: blokk; lebegés: bal; pozíció: relatív; magasság: 25 képpont; szélesség: 80 képpont; margó: 0 10px 18px 0; szövegdekoráció: nincs; betűtípus: 12px " Helvetica Neue", Helvetica, Arial, serif nélkül; betűsúly: félkövér; sormagasság: 25 képpont; szövegigazítás: középre; )
Most alkalmazza a szabályokat a különböző színekre. Például a szürkére. Az összes többi szín a bemutatón látható.
/* GRAY */ .grey, .grey:hover ( szín: #555; szegély-alsó: 4px tömör #b2b1b1; háttér: #eee; .grey:hover ( háttér: #e2e2e2; ) )
Valami ilyesmivel kellene végeznie. Elég masszívnak tűnik, ha 2008-as az udvaron. 
3. lépés: Dupla keretek!
Ha alaposan megnézi a végeredményt, látni fogja, hogy egy vékony vonal van a teljes gomb kerülete körül. E hatás eléréséhez pszeudoelemeket használunk :előttés :utána.a.button ( kijelző: blokk; lebegés: bal; pozíció: relatív; magasság: 25px; szélesség: 80px; margó: 0 10px 18px 0; szövegdekoráció: nincs; betűtípus: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; betűsúly: félkövér; sormagasság: 25 képpont; szöveg igazítása: középre; ) a.button:before, a.button:after (tartalom: ""; pozíció: abszolút; balra: -1 képpont; magasság: 25px; szélesség: 80px; alul: -1px; ) a.button:fore ( magasság: 23px; alul: -4px; keret-felül: 0; )
A szín hozzáadásával a gombok sokkal jobban néznek ki.
/* GRAY */ .grey, .grey:hover ( szín: #555; keret-alsó: 4px szilárd #b2b1b1; háttér: #eee; ) .grey:before, .grey:after (szegély: 1px szilárd #cbcbcb; border-bottom: 1px solid #a5a5a5; ) .grey:hover ( háttér: #e2e2e2; )
4. lépés: Egy kis CSS3 varázslat
Most térjünk le a CSS3 közvetlen részéhez. Kezdjük a lekerekített sarkokkal:a.button ( kijelző: blokk; lebegés: bal; pozíció: relatív; magasság: 25px; szélesség: 80px; margó: 0 10px 18px 0; szövegdekoráció: nincs; betűtípus: 12px "Helvetica Neue", Helvetica, Arial, sans -serif; betűsúly: félkövér; vonalmagasság: 25 képpont; szöveg igazítása: középre; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; )
természetes elemek :előttés :utána lekerekített sarkokra is szükség van.
a.button:before, a.button:after (tartalom: ""; pozíció: abszolút; bal: -1px; magasság: 25px; szélesség: 80px; alsó: -1px; -webkit-border-radius: 3px; -moz -border-radius: 3px; border-radius: 3px; ) a.button:before ( magasság: 23px; alsó: -4px; border-top: 0; -webkit-border-radius: 0 0 3px 3px; -moz- szegélysugár: 0 0 3px 3px; szegélysugár: 0 0 3px 3px; -webkit-box-shadow: 0 1px 1px 0px #bfbfbf; -moz-box-shadow: 0 1px 1px 0px #bfbfbfdow: 0 1px 1px 0px #bfbfbf; )
Végül színátmeneteket, belső árnyékot és árnyékot alkalmazunk a szövegre. Az IE6 hibáinak elkerülése érdekében adja hozzá a state:visited beállítást.
/* SZÜRKE */ a.grey, a.grey:hover, a.grey:visited ( szín: #555; keret-alsó: 4px tömör #b2b1b1; szövegárnyék: 0px 1px 0px #fafafa; háttér: #eee; háttér: -webkit-gradient(lineáris, bal felső, bal alsó, from(#eee), to(#e2e2e2)); háttér: -moz-linear-gradient(top, #eee, #e2e2e2); box-shadow: beillesztés 1px 1px 0 #f5f5f5; ) .grey:before, .gray:after (szegély: 1px tömör #cbcbcb; keret-alsó: 1px szilárd #a5a5a5; ) .gray:hover ( háttér: #e2e2e2; háttér: -webkit gradiens(lineáris, bal felső, bal alsó, from(#e2e2e2), to(#eee)); háttér: -moz-linear-gradient(top, #e2e2e2, #eee); )
A végeredményünk, nem is olyan rossz!
5. lépés: Elfelejtettünk valamit?
Orman tervében az államot is előirányozta: aktív. Ezért egyszerűen hozzá kell adnunk a kódunkhoz.A kód ezen részét a különböző színekre vonatkozó szabályok alá fogjuk helyezni.
/* AKTÍV ÁLLAPOT */ a.button:active (szegély: nincs; alsó: -4px; margó-alsó: 22px; -webkit-box-shadow: 0 1px 1px #fff; -moz-box-shadow: 0 1px 1px #fff; box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0,3); ) a.button:active:fore, a.button:active:after (szegély: nincs; - webkit-box-shadow: nincs; -moz-box-shadow: nincs; box-shadow: nincs; )
Íme, amit kapunk:
6. lépés (nem kötelező): Régi böngészők
Így szép CSS3 gombokat hoztunk létre, amelyek minden modern böngészőben működnek. De mi a helyzet az Internet Explorer 8-as és korábbi verzióival? Ezek a böngészők nem támogatják a szövegárnyékokat vagy színátmeneteket.A probléma megoldására használhatjuk a Modernizr javascript könyvtárat, amely képes észlelni, hogy böngészője támogatja-e a CSS3-at és a HTML5-öt. A könyvtár nem oldja meg a problémákat, csak alternatív stílust kínál.
Először is elkészítjük a Modernizr saját verzióját, hogy ne kelljen magunkkal cipelnünk hatalmas mennyiségű javascriptet. Ezt megtehetik a weboldalukon. Miután beszúrtuk a javascriptet a dokumentumunkba, meg kell határoznunk a különböző osztályszabályokat az alternatív stílushoz. Képeket fogunk használni azokhoz a böngészőkhöz, amelyek nem támogatják a keret sugarát és a színátmeneteket.
/* MODERNIZR FALLBACK */ .no-cssgradients a.button, .no-cssgradients a.button:visited, .no-borderradius a.button, .no-borderradius a.button:visited, .no-generatedcontent a.button, .no-generatedcontent a.button:visited ( háttér: url(images/sprite.png) no-repeat 0 0px; magasság: 32px; szélesség: 82px; ) .no-cssgradients a.button:hover, .no-borderradius a .button:hover, .no-generatedcontent a.button:hover ( háttér: url(images/sprite.png) no-repeat 0 -32px; ) .no-cssgradients a.button:active, .no-borderradius a.button :active, .no-generatedcontent a.button:active ( háttér: url(images/sprite.png) no-repeat 0 -64px; alsó: 0; line-height: 35px; ) .no-cssgradients a.grey, . 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 ( backgroun d-pozíció-x: -164 képpont ) .no-cssgradients a.green, .no-cssgradients a.green:visited, .no-cssgradients a.green:hover ( background-position-x: -246px; ) .no-cssgradients a.turquoise, .no- a .black:hover ( background-position-x: -410px; ) .no-cssgradients a.darkgray, .no-cssgradients a.darkgray:visited, .no-cssgradients a.darkgray:hover ( background-position-x: - 492px; ) .no-cssgradients a.yellow, .no-cssgradients a.yellow:visited, .no-cssgradients a.yellow:hover ( background-position-x: -574px; ) .no-cssgradients a.purple, . 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:before, .no-cssgradients a.button:after, .no-borderradius a.button, .no-borderradius a.button:visited, .no-borderradius 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:before, .no-generatedcontent a.button:after ( keret: 0; )
