Ako su vam potrebni atraktivni CSS3 hover efekti i trikovi koji deluju kada posetioci vašeg sajta pređu mišem preko slike, teksta ili objekta, na pravom ste mestu. Napravio sam nekoliko primera koje možete ovde videti. Ukoliko vam se dopadne neki od tih efekata, slobodno ga ukradite. U nastavku ću vam dati uputstva i kodove. 🙂
Oživite vaš sajt
Hover efekti (reakcija slike ili teksta na dodir miša) mogu učiniti da vaš sajt izgleda mnogo dinamičniji i življi. Nekada je java skript bio neophodna stvar da bi ste napravili zaista zanimljive hover efekte, ali u današnje vreme CSS3 je sposoban da radi puno zaista atraktivnih stvari, ako ste raspoloženi za malo kreativnosti.
Efekti koje ćemo ovde prikazati koriste kodove koji su podržani od strane modernih pretraživača, kao što su Mozila Fajerfoks, Gugl Hrom i drugi vebkit pretraživači. Međutim, mnogi dizajneri i veb programeri se ustručavaju da koriste veličanstvene revolucionarne mogućnosti koje nudi CSS3 sistem zbog problema sa majkrosoftovim Intrenet eksplorerom koji sve do izlaska verzije IE10 krajem 2012. god. nije imao dobru podršku za prikazivanje CSS3 stilova. Ali sada je taj problem rešen, oni koji su baš zapeli da koriste Internet eksplorer umesto Mozile, Hroma ili Opere, mogu besplatno da instaliraju najnoviju verziju tog programa ako imaju windows 7 jer na windowsu XP ne može da radi. Internet eksplorer 10 može da se preuzme ovde.
Skokovi
Ovaj efekat je najbolje upotrebiti kada imate niz od više horizontalnih stavki, tako da kada pokrećete miša preko njih dobijate lep efekat talasa. Prilično je jednostavan za izradu ali postoji više načina njegove primene.
Ono što sam uradio je da sam postavio marginu za svaku sliku, a zatim smanjio tu marginu na prelazak miša (hover). Margina je na početku 15 piksela a zatim se smanjuje na 2 piksela prilikom dodira mišem, što čini da slika poskoči na gore. Možete lako da upotrebite ovaj efekat i na tekstove ako je u pitanju lista.
Tranzicija je ovde potpuno neobavezna, jer će efekat raditi sasvim dobro i bez nje, ali ja sam ipak ubacio “ease-out” css svojstvo (property) koje umekšava kretanje i po mom mišljenju čini ovaj efekat još boljim.
Skokovi – CSS kod:
[css]
/*Primer 1*/
.ex1 img {
height: 100px;
width: 100px;
border: 5px solid #ccc;
float: left;
margin: 15px;
transition: margin 0.5s ease-out; /*ovo je za Interent Eksplorer 10*/
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
[/css]
Html kod:
[html]
[/html]
Lista koja se nadima
Ovaj efekat funkicioniše tako da kada pređete mišem na dole preko liste, svaka slika se polako širi a zatim se vraća na svoju originalnu veličinu.
Da bih ovo postigao, ubacio sam grupu slika koje su 400 piksela širine 133 pisela visine, a onda sam veličine tih slika u CSS-u definisao na 300 piksela sa 100 piksela i podesio da se prošire na dodir miša. Pošto sam koristio centralno poravnanje (alignment) a nova veličina slike stvara poremećaj, ubacio sam negativnu marginu i podesio je na polovinu veličine uvećanja po širini da bi rešio problem.
Odlično za vertikalni meni.
Lista koja se nadima – CSS kod:
[css]
/*Primer 2*/
#containerEx2 {
clear: both;
width: 300px;
margin: 0 auto;
min-height: 600px;
}
#ex2 img {
height: 100px;
width: 300px;
margin: 15px 0;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
[/css]
Html kod:
[html]
[/html]
Pojavljivanje teksta
Ovim efektom sam hteo da oponašam java skript pomoću koga možete da mišem pređete preko jedne stavke a da se efekat pojavi na drugoj. Da bih ovo postigao, ubacio sam tekst i sliku u div tag i onda pomerio sve ulevo (float), tako da tekst bude poravnat sa slikom. Sledeće, dodao sam boju transparent i line-height: 0px unutar div taga. To postavlja tekst na vrh div-a i sakriva ga.
Da bi se tekst pojavio na dodir miša, jednostavno sam promenio boju i visinu linije (line-height). Kada pređete preko slike, tekst se pokaže! Ovo je prilično efektan trik s obzirom da je sve urađeno samo pomoću CSS.
Pojavljivanje teksta – CSS kod:
[css]
/*primer 3*/
h1 {
font-size: 20px;
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
font-weight: 300;
text-transform: uppercase;
margin: 15px;
color: #aaa;
}
#ex3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
font-weight: 300;
text-transform: uppercase;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
#ex3 img{
float: left;
margin: 0 15px;
}
[/css]
Html kod:
[html]
Dodirnite sliku
[/html]
Nagnuta slika
Ovo je veoma jednostavan ali odličan efekat za sličice (thumbnails) u galeriji. Glavna ideja je da napravite mrežu sličica i onda podestite da se slike naginju kada prelazite mišem preko njih, stvarajući iluziju slike koja se nakrivila zidu.
Mi ćemo ovde koristiti najnovija specifična CSS svojstva: boks-senke (box-shadows), tranzicije i transformacije da bi postigli efekat koji želimo. Transformacija (transform) će upravljati rotacijom a tranzicija (transition) će je učiniti lepom i mekanom.
Ovaj efekat možete još više unaprediti ako upotrebite pseudo-selektore da bi se slike naginjale u različitim pravcima.
Nagnuta slika – CSS kod:
[css]
/*Primer 4*/
#containerEx4 {
background: #333333;
padding: 20px;
margin: 50px 0;
min-height: 100%;
}
#ex4 {
width: 800px;
margin: 0 auto;
}
#ex4 img {
margin: 20px;
border: 5px solid #eee;
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
#ex4 img:hover {
transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
[/css]
Html kod:
[html]
[/html]
Sjaj i refleksija
Ovaj efekat je prilično komplikovan, pa sam morao da se pomučim pre nego što sam došao do rezultata koji mi se sviđa. Početno stanje slike je smanjena providnost (opacity) što čini da ona bude zatamnjena. Kada pređete mišem preko nje, zatamnjenost nestaje, pojavljuje se sjaj oko ivica a refleksija se pojačava. Efekat ogledala – refleksija – radi samo u vebkit (Webkit ) pregledačima kao što su Safari i Gugl Hrom a ne radi u Mozili Fajerfoks i Internet Eksploreru. Nažalost, kod njih refleksija ne može da se uklopi sa tranzicijom, tako da je moguće samo da slika zasija, ali ipak sve prilično lepo izgleda.
Osvetljenje i refleksija – CSS kod:
[css]
/*Primer 5*/
#containerEx5 {
background: #333;
padding: 50px;
margin-top: 50px;
}
#ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}
#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
/*Tranzicija*/
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Refleksija*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Refleksija*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Sjaj*/
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
[/css]
Html kod:
[html]
[/html]
Zaključak
Ovih pet primera bi trebalo da vas inspirišu za kreaciju iz koje će nastati fantastični CSS3 hover efekti. Predlažem da eksperimentišete sa njima, kombinujte ih i date im svoj sopstveni stil kako bi bili još interesantniji.
U sledećem tutorijalu, objasniću kako da napravite nešto o čemu se mnogo priča u svetu veb dizajnera i programera – responzivni CSS3 sajt, tj. sajt koji se automatski prilagođava ekranu uređaja na kome ga posetioci gledaju, pa se zato savršeno dobro vidi i funkcioniše i na ogromnim HD monitorima i na malim ekranima pametnih telefona. Ja volim da kažem da je to vrsta sajta koja ima sposobnost da se “prepakuje” tako da se uklopi u svaki ekran.
Dodato 11.o2. 2013. – Tekst o značenju i izradi responzivnog sajta je danas objavljen i možete ga pogledati OVDE