) obično mijenja svoj izgled (postaje u fokusu). Najčešće je to jednostavna promjena boje ili dodavanje podvlačenja. Kursor na ruci se takođe menja. U ovom članku ćemo detaljnije pogledati kako lijepo implementirati promjenu stila veze pri lebdenju.
Primjeri sa promjenom izgleda linka pri lebdenju Primjer 1. Kako promijeniti boju i napraviti podvlačenje pri lebdenju a.class_A1 ( /* Zadani stil veze */ boja : plava ; text-decoration : nema ; ) a.class_A1: lebdeći ( /* Stilske veze pri lebdenju */ boja : crvena ; /* Promijenite boju u crvenu Dodajte podvučenu */ ) Kada lebdite, veza će postati crvena i podvučena: vezaPrimjer 2. Kako promijeniti pozadinu veze pri lebdenju a.class_A2 ( boja : plava ; dekoracija teksta : nijedna ; pozadina : nijedna ; padding : 2px ; ) a.class_A2:hover ( boja : bijela ; pozadina: plava ; ) Kada pređete mišem, link će promijeniti pozadinu u plavu, a boju veze u bijelu: vezaKonvertuje se u sledeće na stranici:
Primjer 3. Kako promijeniti kursor kada pređete preko vezePodrazumevano, veze imaju kursor kursora kursora kursor :pointer. U sljedećem primjeru ćemo ga promijeniti u nešto drugo.
a.class_A3 ( /* Zadani stil veze */ boja: plava; dekoracija teksta: nema; kursor: default; /* Podrazumevani kursor */ ) a.class_A3:hover ( /* Stil linka lebdenja */ boja: crvena ; / * Promijenite boju u crvenu */ text-decoration : underline ; plus: vezaKonvertuje se u sledeće na stranici:
Primjer 4: Glatke promjene stila vezeKoristeći svojstvo prijelaza, izgladit ćemo brzinu kojom se mijenjaju boja pozadine i veze.
a.class_A4 ( boja: plava; dekoracija teksta: nijedna; pozadina: #B9D3EE; padding: 4px; težina fonta: bold; granica-radijus: 4px; prijelaz: pozadina 1s lakoća, boja 0,5s lakoća; /*Za Google pretraživač Chrome i Firefox: */ -webkit-transition: pozadina 1s lakoća, boja 0,5s lakoća; -moz-transition: pozadina 1s lakoća, boja 0,5s lakoća; ) a.class_A4:hover ( boja : bijela ; pozadina : plava ; ) Prilikom lebdenja, veza će promijeniti svoju pozadinu u plavu, a boja veze će postati bijela, dok je cijela stvar izglađena: vezaKonvertuje se u sledeće na stranici:
Primjer 5. Prekrasna podcrtana veza a.class_A5 ( boja : plava ; text-decoration : nijedna ; ) a.class_A5: lebdjeti ( boja : crvena ; granica-dno : 2px isprekidana #8A2BE2 ; /* Koristeći ovo svojstvo postavljamo stil podvlačenja * / ) Kada se lebdi, link će promijeniti boju i pojavit će se neobična podvlaka: vezaKonvertuje stranicu u sljedeće.
Korišćenje stilova i upravljanje njima pomoću JavaScript-a omogućava vam da promenite izgled ćelije u hodu kada su ispunjeni određeni uslovi, kao što je prelazak miša preko veze ili same ćelije.
Razmotrimo najjednostavniju tehniku - boja pozadine ćelije se mijenja kada kursor miša lebdi iznad nje.
Prelazak miša preko područja prati događaj onMouseOver, a pomicanje miša izvan njega prati događaj onMouseOut. Budući da se boja pozadine mijenja za istu ćeliju preko koje lebdimo, promjena stila se vrši korištenjem metode this.style.background.
|
Primjer 1: Promjena boje pozadine
|
Primjer koristi promjenu siva pozadinu u narandžastu U Netscape 4.x pretraživaču, gornji metod ne radi.
Također možete napraviti prijelaz na drugi dokument tako što ćete kliknuti ne na samu vezu, već na ćeliju tabele. Tada će se cijela ćelija pretvoriti u jednu vezu, a ne samo tekst u njoj. Treba napomenuti da ovaj pristup nije najbolji zbog svoje neočiglednosti, posjetitelji web stranice su navikli da kada pređu preko linka, kursor miša se pretvara u ruku; Možete nadjačati izgled kursora miša koristeći CSS, ali ova funkcija je dostupna samo u pretraživaču Internet Explorer.
|
Da biste promijenili boju ćelije samo kada pređete mišem preko veze unutar nje, trebali biste pristupiti svojstvima ćelije preko njenog imena. Da bi program znao koja svojstva ćelije treba promijeniti, koristi se ID parametar, koji jedinstveno identificira element.
Radi praktičnosti, promjena boje ćelije je dizajnirana kao zasebne funkcije. Zahvaljujući Internet pretraživači Explorer, Netscape i Opera koriste različiti pristupi Za dinamičku promjenu stila elementa, u funkcijama prikazanim u primjeru 3, boja pozadine se mijenja na dva načina. Svaki pretraživač će izabrati odgovarajuću liniju za sebe, a preostala će biti zanemarena.
|
Primjer 3: Promjena svojstava ćelije
|
Pozdrav dragi čitatelji webcodius bloga! Često dobijam pitanja: kako promijeniti sliku na web stranici kada stavite pokazivač miša preko nje. Ovaj efekat se može naći na mnogim sajtovima, a najjednostavniji primer je kada pređete mišem preko dugmeta i ono zatim promeni boju. Ponekad se JavaScript koristi za kreiranje ovog efekta, ali obično je dovoljan sam CSS, posebno od objavljivanja CSS verzije 3. Kasnije u članku ću vam reći kako promijeniti sliku kada lebdite mišem koristeći samo jedan CSS, razmotrit ću nekoliko metoda i raznih efekata.
Efekti promjene elementa web stranice kada se miš lebdi često se nazivaju efekti lebdenja. To je zbog činjenice da se pri implementaciji takvih efekata koristi, što određuje stil elementa kada kursor miša lebdi iznad njega.
Prvo, pogledajmo jednostavniju opciju. Recimo da imate sliku umetnutu na svoju stranicu, kao što je prikazano u nastavku:
I recimo da trebate promijeniti njegov prikaz kada pređete kursorom miša preko njega. Kada zalijepite ovu sliku na img tag Dodajmo atribut class="animate1", tada će html kod slike izgledati otprilike ovako:
Za početak, možete jednostavno učiniti sliku transparentnom kada zadržite pokazivač miša. Transparentnost u CSS-u kontroliše svojstvo neprozirnosti, koje je specifično za CSS3. Vrijednost se koristi razlomci brojeva od 0 do 1, gdje nula odgovara potpunoj transparentnosti, a jedan, naprotiv, odgovara neprozirnosti objekta. Za stare ljude Internet verzije Explorer će morati koristiti svojstvo filtera sa vrijednošću alpha(Opacity=X) jer ne podržava svojstvo neprozirnosti. Umjesto X morat ćete zamijeniti broj od 0 do 100, gdje 0 znači puna transparentnost, a 100 je puna neprozirnost.
Zatim, da bi slika bila transparentna kada pređete mišem preko datoteke stila, ili između oznaka i html datoteke, morate dodati sljedeći css kod:
img.animate1:hover (
filter: alfa (Neprozirnost=25);/* transparentnost za IE */
neprozirnost: 0,25;/* transparentnost za druge pretraživače */
}
U slučaju da ne razumete CSS, unos img.animate1:hover govori pretraživaču da za sve elemente , koji imaju atribut klase jednak animate1 kada pređete preko njih kursorom miša, primijeniti specificirani stilovi. I stilovi su naznačeni između kovrčave zagrade( I ). Ako ste sve uradili kako treba, trebalo bi da izgleda otprilike ovako:
Možete se slikati originalno stanje proziran, a kada lebdi kursor čini ga neprozirnim. Zatim morate dodati sljedeće linije u CSS datoteku:
img.animate1 (
filter: alfa (Neprozirnost=25);
neprozirnost: 0,25;
}
img.animate1:hover (
neprozirnost: 1;
}
Rezultat će biti ovakav:
Za veći efekat možete usporiti promjene u transparentnosti slike. Da biste to učinili, možete koristiti svojstvo prijelaza CSS-a, koje postavlja efekat prijelaza između dva stanja elementa. Dodajmo jednu sekundu usporavanja kao primjer. Tada će naš CSS kod izgledati ovako:
img.animate1 (
filter: alfa (Neprozirnost=25);
neprozirnost: 0,25;
-moz-transition: sve 1s jednostavnost-in-out; /* efekat prijelaza za Firefox do verzije 16.0 */
-webkit-transition: sve 1s jednostavnost-in-out; /* efekat prijelaza za Chrome do verzije 26.0, Safari, Android i iOS */
-o-transition: sve 1s lakoća-in-out; /* efekat prijelaza za Opera do verzije 12.10 */
tranzicija: sve 1s lakoća ulaska; /* efekat tranzicije za druge pretraživače */
}
img.animate1:hover (
filter: alfa (Neprozirnost=100);
neprozirnost: 1;
}
rezultat:
Korišćenjem transformirati svojstva Slika se može skalirati, rotirati, pomicati, naginjati. Hajde da probamo da uvećamo sliku. Tada će css kod biti ovakav:
img.animate1(
— o-prijelaz: sve 1s lakoća;
tranzicija: sve 1s lakoća;
}
img.animate1:hover(
- moz-transform: skala (1,5); /* efekat transformacije za Firefox do verzije 16.0 */
- webkit-transform: skala (1.5); /* efekat transformacije za Chrome prije verzije 26.0, Safari, Android i iOS */
- o-transformacija: skala (1,5); /* efekat transformacije za Opera do verzije 12.10 */
— ms-transform: skala (1,5); /* efekat transformacije za IE 9.0 */
transform:scale(1.5); /* efekat transformacije za druge pretraživače */
}
A rezultat će biti ovakav:
Možete dodati rotaciju da uvećate sliku. Zatim se css stilovi malo mijenjaju:
img.animate1(
— moz-prijelaz: sve 1s lakoća;
- webkit-transition: sve 1s lakoća;
— o-prijelaz: sve 1s lakoća;
tranzicija: sve 1s lakoća;
}
img.animate1:hover(
- moz-transform: rotirati (360 stepeni) skalu (1,5);
- webkit-transform: rotirati (360 stepeni) skalu (1.5);
- o-transformacija: rotirati (360 stepeni) skalu (1,5);
- ms-transform: rotirati (360 stepeni) skalu (1.5);
transformacija: rotirati (360 stepeni) skalu (1,5);
}
rezultat:
Gore smo pogledali slučajeve kada je jedna slika uključena u animaciju. Zatim ćemo pogledati načine da zamijenimo jednu sliku drugom. U ovom slučaju se obično pripremaju dvije slike iste veličine: jedna za originalni oblik, drugi da ga zamijeni.
Recimo da imamo dvije slike, jednu crno-bijelu i drugu u boji:
Uvjerimo se u to kada zadržite pokazivač iznad crno-bijela slika bila prikazana u boji. Da biste to učinili, napravite originalnu sliku pozadinom elementa div koristeći svojstvo background. A kada pređete kursorom preko slike, promijenit ćemo se pozadinska slika koristeći istu pseudo-klasu i svojstvo pozadine. Da biste ostvarili ovaj efekat na html stranica dodati div element sa klasom rotate1:
I dodajte sljedeće opise stilova:
div.rotate1(
pozadina: url (img/2.jpg); /* Put do datoteke sa izvornom slikom */
širina: 480px; /* Širina slike */
visina: 360px; /* Visina slike */
}
div.rotate1:hover (
pozadina: url (img/1.jpg); /* Put do datoteke sa slikom koju treba zamijeniti */
}
I rezultat:
Ova metoda ima jednu značajan nedostatak. Budući da se druga slika učitava samo kada se kursor lebdi, ako korisnik ima spor Internet, a veličina datoteke slike je velika veličina, slika će biti prikazana sa malom pauzom. Stoga ćemo u nastavku razmotriti još nekoliko načina za zamjenu slika kada lebdite kursorom miša.
Sljedeća metoda će se temeljiti na kombiniranju dvije slike u jednu datoteku. Recimo da treba da postavimo dugme na stranicu koje, kada kursor miša pređe preko njega, menja svoj izgled. Da biste to učinili, spojite dvije slike u jednu datoteku i rezultirajuća slika će izgledati otprilike ovako:
U ovom slučaju, promjena iz jedne slike u drugu vršit će se pomicanjem pozadinske slike okomito pomoću svojstva background-position. Pošto klik na dugme obično vodi na drugu stranicu, sliku ćemo umetnuti u element< a>. Zatim umetnite sljedeći kod u html stranicu:
A css fajl je ovakav:
a.rotate2 (
pozadina: url (img/button.png); /* Put do datoteke sa izvornom slikom */
displej: blok; /* Link kao blok element */
širina: 50px; /* Širina slike u pikselima */
visina: 30px; /* Visina slike */
}
a.rotate2:hover (
background-position: 0 -30px; /* Pomak pozadine */
}
rezultat:
I posljednja metoda za danas je kada se jedna slika stavi ispod druge koristeći css pozicija pravila: apsolutna . U ovom slučaju postavljamo dvije slike u div kontejner:
I dodajte css stilove:
Animiraj2(
pozicija:relativna;
margin:0 auto;/* postavljeno div blok centriran na stranici*/
širina:480px; /* širina */
visina: 360px; /* Visina */
}
.animate2 img (
pozicija:apsolutna; /* apsolutno pozicioniranje*/
lijevo: 0; /* poravnaj slike u gornjem lijevom kutu ugao div*/
vrh: 0; /* poravnaj slike lijevo gornji ugao div */
}
Nakon dodavanja css pravila, slike će biti postavljene jedna ispod druge. Sada, kontroliranje transparentnosti slika pomoću svojstva neprozirnosti u normalnom stanju ćemo prikazati drugu sliku, a kada zadržite kursor, prvu. Da bismo to učinili, u normalnom stanju činimo sliku s prvom klasom potpuno prozirnom, a kada zadržite pokazivač, obrnuto: slika s drugom klasom će biti potpuno prozirna, ali s prvom klasom neće biti prozirna :
Animate2 img.first ( /* prva slika je potpuno transparentna */
opacity:0;
filter:alfa (prozirnost=0);
}
.animate2:hover img.first ( /* kada lebdite kursorom, prva slika postaje neprozirna */
neprozirnost:1;
filter:alfa (prozirnost=100);
}
/* a drugi postaje transparentan kada zadržite kursor */
opacity:0;
filter:alfa (prozirnost=0);
}
rezultat:
Možete postići glatki prijelaz dodavanjem svojstva CSS prijelaza posljednjem pravilu:
Animate2:hover img.second, .animate2 img.second:lebdi (
opacity:0;
filter:alfa (prozirnost=0);
-moz-transition: sve 2s lakoća;
-webkit-transition: sve 2s lakoća;
-o-transition: sve 2s lakoća;
tranzicija: sve 2s lakoća;
}
I rezultat:
A ako dodate svojstvo transformacije:
Animate2:hover img.second, .animate2 img.second:lebdi (
opacity:0;
filter:alfa (prozirnost=0);
-moz-transform:scale(0, 1);
-webkit-transform:scale(0, 1);
-o-transform:skala(0, 1);
-ms-transform:skala (0, 1);
transform:skala(0, 1); /* smanji širinu slike na 0 */
}
Ispast će ovako:
Kombinovanje različitih CSS svojstva možete postići drugačije efekti lebdenja kada mijenjate slike dok lebdite kursorom miša. Ove i druge primjere postavio sam na ovu stranicu, gdje također možete preuzeti izvore. To je sve, vidimo se ponovo.
Ovaj članak pokazuje, koristeći primjer, kako promijeniti boju na proizvoljnom elementu web mjesta ako se kursor miša pređe preko njega.
Ova "stvar" se radi pomoću CSS stilovi, tj. Morat ćete dodati nekoliko redova teksta u datoteku sa stilom predloška, kao i pokazati svoje dizajnerske vještine. Reći ću vam šta tačno da dodate.
Ažurirano 17.1.2019
Pažnja! Objavio sam novu temu Romb za vaše pisce članaka i blogove. Najbrži prema Google PageSpeed i maksimalna optimizacija
pod SEO.
Hajde da odmah damo primjer radi jasnoće kako bismo razumjeli o čemu govorimo. Pomičite se mišem kroz stavke menija: Čim se miš pređe preko bilo kojeg polja na listi, dolazi do promjene pozadini
linije, kao i boju teksta/linka u naslovu sekcije sajta.
Ovako izgleda kod za ovaj blok:
XHTML
Razmjena linkova Svi Wordpress dodaci Wordpress hakovi U mom primeru vidimo da efekat deluje na redovni link
Da bih rekao pretraživaču da efekat treba da se izvrši na određenim linkovima, uzeo sam ih u zasebne veze ovde. Za vas to može biti i kontejner koji ste kreirali ili već gotovi (na primjer, widget na bočnoj traci).
VježbajteSada morate podesiti radnju lebdenja mišem. Kao što je gore spomenuto, sve radimo koristeći CSS stilove (datoteka šablona se može nazvati style.css, css.css, core.css ili nešto drugo).
Catside a:hover (pozadina: #0078BF; boja: #fff;)
Catside a:hover (pozadina: #0078BF ; boja: #fff ;) |
Ovom linijom smo rekli pretraživaču da promijeni boju pozadine kada miš pređe preko plave (#0078BF) i rekli da bi boja fonta trebala postati bijela (#fff). Sama „stvar“ koja omogućava pretraživaču da shvati da to treba da se uradi lebdenjem miša je pseudo-klasa lebdenja (možete pročitati o tome
Prije nego što pogledamo dugmad, pogledajmo podešavanja koja su zajednička za sve njih.
HTMLZa dugmad će se koristiti vrlo jednostavan HTML kod:
Pretplatite se
CSSTakođe će imati sva dugmad opšta podešavanja za tekst naslova i poništite odabir linkova:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; boja: #fff; ) a ( boja: #fff; dekoracija teksta: nema; )
Uobičajeno, korisnik očekuje prilično blag efekat kada pređe mišem preko veze ili dugmeta. A u našem slučaju, gumb mijenja veličinu - povećava se, prikazujući dodatnu poruku.
Osnovni CSS kodZa početak, dugmetu trebamo samo dati oblik i boju. Definirajte visinu od 28px i širinu od 115px, dodajte margine i padding, a također dajte gumbu svijetli okvir.
#button1 (pozadina: #6292c2; granica: 2px čvrsta #eee; visina: 28px; širina: 115px; margina: 50px 0 0 50px; padding: 0 0 0 7px; prelijevanje: skriveno; prikaz: blok; )
CSS3 efektiNeki ljudi vole kada jednostavno dugme prati dovoljno veliki kod CSS. IN ovaj odeljak Evo dodatnih CSS3 stilova za naše dugme. Možete i bez njih, ali oni gumbu daju moderniji izgled.
Zaokružite uglove okvira i dodajte gradijent. Ovo koristi mali trik s tamnim gradijentom koji je u interakciji s bilo kojom bojom pozadine.
/*Zaobljeni uglovi*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; radijus granice: 15px; /*Gradijent*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS animacijaSada podesimo CSS tranziciju. Animacija će se koristiti za bilo kakve promjene svojstva i trajat će pola sekunde.
Pređite mišemSve što ostaje je dodati stil za proširenje dugmeta kada pređete mišem preko njega. Dugme mora biti široko 230px da bi prikazalo cijelu poruku.
#button1:hover (širina: 230px; )
Jednostavna promjena tona boje
Vrlo jednostavno i popularno CSS efekat za dugme. Kada lebdite kursorom miša, ton se glatko mijenja boja pozadine.
Osnovni CSS kodCSS kod je vrlo sličan prethodnom primjeru. Koristi se drugačija boja pozadine, a oblik je malo promijenjen. Takođe centrira tekst i postavlja visinu linije za dugme tako da se izvrši vertikalno centriranje.
#button2 (pozadina: #d11717; granica: 2px čvrsta #eee; visina: 38px; širina: 125px; margina: 50px 0 0 50px; prelijevanje: skriveno; prikaz: blok; text-align: centar; visina linije: 38px; )
CSS3 efektiPostavite zaokruživanje uglova, gradijent za pozadinu i dodatnu sjenu. WITH koristeći rgba učinite sjenu crnom i prozirnom.
/*Zaobljeni uglovi*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; radijus granice: 10px; /*Gradijent*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Sjena*/ -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 animacijaAnimacija se praktički ne razlikuje od prethodnog primjera.
/*Tranzicija*/ -webkit-transition: Sve 0.5s lakoće; -moz-transition: Sve 0.5s lakoća; -o-transition: Sve 0,5s lakoća; -ms-transition: Sve 0,5s lakoća; tranzicija: sve 0,5s lakoća;
Pređite mišemKada lebdite kursorom miša, bit će postavljena drugačija boja pozadine. Pokušajte odabrati svjetliju opciju u Photoshopu za odličan efekat.
#button2:hover (boja pozadine: #ff3434; )
Ovaj efekat može biti prilično impresivan u zavisnosti od izbora pozadinske slike. Demo koristi neopisnu pozadinu i efekat izgleda neopisivo. Pokušajte koristiti drugu sliku i efekat može biti zapanjujući.
Osnovni CSS kodGlavni dio koda je isti kao u prethodnim primjerima. Obratite pažnju šta koristimo pozadinska slika. Početna pozicija pozadina je postavljena na "0 0". Kada zadržite pokazivač, pozicija se pomiče okomito.
#button3 ( background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; visina : 58px širina: 155px margina: 0 0 50px;
CSS3 efektiIN u ovom primjeru nema ništa posebno - zaobljeni uglovi i senke.
/*Zaobljeni uglovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; radijus granice: 5px; /*Sjena*/ -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 animacijaAnimacija za ovaj slučaj traje duže kako bi se stvorio uglađen i zanimljiv efekat.
/*Tranzicija*/ -webkit-transition: Sve 0.8s lakoće; -moz-transition: Sve 0.8s lakoća; -o-transition: Sve 0,8s lakoća; -ms-transition: Sve 0.8s lakoća; tranzicija: sve 0,8s lakoća;
Pređite mišemSada je vrijeme da premjestite pozadinsku sliku. Početna pozicija je bila "0 0". Postavite drugi parametar na 150px. Da biste pomaknuli horizontalno, morate promijeniti prvi parametar.
#button3:hover (položaj pozadine: 0px 150px; )
Simulacija pritiska na 3D dugme
Poslednji primer u našoj lekciji je o popularnoj 3D metodi simulacije pritiska na dugme kada se kursorom miša lebdi preko njega. Animacija za ovaj slučaj je toliko jednostavna da čak i ne zahtijeva CSS prijelaz. Ali krajnji rezultat je prilično impresivan.
Osnovni CSS kodCSS kod za naše dugme.
#button4 (pozadina: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; visina: 58px; širina: 155px; margina: 50px 0 0 50px; overflow: hidden ; display: block-align: line-height: 58px;
CSS3 efektiIN u ovom slučaju CSS3 više nije dobra opcija. Za postizanje efekta potrebne su sjene i gradijent. Oštra senka stvara izgled 3D dugmeta.
/*Zaobljeni uglovi*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; radijus granice: 5px; /*Sjena*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradijent*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: -o-linearni-gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); pozadinska slika: linearni gradijent(vrh, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Pređite mišemU ovom slučaju imamo najveći lebdeći dio. Dužina sjene je smanjena, a margine se koriste za stvaranje mješavine tamnog područja. Sve zajedno stvara iluziju pritiska na dugme. Okretanje gradijenta pojačava efekat.
#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 box-shadow: 0px 4px rgba(0, 0, 0, 0,8); 0, 0), rgba(0, 0, 0, 0.4) pozadinska slika: -moz-linearni gradijent (dno, 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)); dno, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) pozadinska slika: linearni gradijent (dno, rgba(0, 0, 0, 0), rgba(0,); 0, 0, 0,4));
