3 Efek Hover Css Keren!
Hover adalah salah satu element css. Hover ini berguna untuk membuat efek saat mouse mengenai suatu element HTML. Contoh codenya adalah "a:hover". "a" adalah, element <a></a> yaitu element link. Bila mouse/pointer menyentuh link, maka link tersebut akan berubah sesuai yang dituliskan kode a:hovernya.
Ok, cukup penjelasannya ya. Nah, pada artikel ini, saya akan memberikan 3 Efek Hover Css yang amat keren. Berikut 3 Efek Hover Css Keren!
Box Shadow
Yang satu ini akan memberikan "box-shadow" pada saat Hover (div).
element:hover {Contoh Hasil:
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 0.5px rgba(0,0,0,0.5);
}
Ini merupakan salah satu contoh
Hover Css Box Shadow. Cobalah
sobat sentuh teks ini dan lihat hasilnya!
Hover Css Box Shadow. Cobalah
sobat sentuh teks ini dan lihat hasilnya!
Opacity (Transparent)
Dengan Css Hover ini akan membuat suatu element (div) menjadi keren, terutama pada gambar.
element {Contoh Hasil:
opacity:0.5;
}
element:hover {
opacity:1;
}

Posisi
Maksudnya adalah, ketika suatu element di "hover", maka posisinya akan berubah.
element {Contoh Hasil:
padding-left:0;
-webkit-transition: all 0.5s ease-in-out;
}
element:hover {
padding-left:5px;
-webkit-transition: all 0.5s ease-in-out;
}
Coba Sobat sentuh teks ini dengan pointer dan lihat hasilnya!
NB!!!:Ganti teks "element" dengan element HTML yang akan di beri effect Css! Contoh:#element (berarti: <div id="element">) atau .element (berarti: <div class="element">) !!
Bagaimana sobat? Keren 'kan hasilnya? Yah... semoga bermanfaat deh... Sekian dari saya, selamat mencoba!!!
Bila ada script tidak berfungsi, harap laporakan :)
Sumber Referensi: Bavotasan.com
Wew, keren sob.... :)
ReplyDelete#comment back ya.... :)
Wahh asyik nih bang seno,izin mau aku pelajari dulu ya bang..hahahyyy
ReplyDeletemasih bingung
ReplyDeletega ngerti apa itu css
klo counter strike ngerti sob, hehe :D
haha.. mainnya game mulu ya... Css itu singkatan dari cascading style sheets yang berfungsi untuk memodif element HTML
Delete.: nice share Mas Broo, counter strike lah...(he...he...he).
ReplyDeletewah, keren kang, mau ikutan nyoba ah, siapa tau cocok sama template aku hheehe
ReplyDeletemantap sob,,,
ReplyDeleteIjin nyoba dl aja nich tutor..
:D
Silahkan :)
DeleteWah iya sob keren bgt udh dicoba mantap, tp saya hapus lagi biarin aja blog saya minimalis.
ReplyDeletethanks sob
hm coba ah , thanks tipsnya kk
ReplyDeletesaya coba yach sob makasih infonya...
ReplyDeletemantap sob, sya coba yah
ReplyDeleteBisa dicoba nih, makasih udah share :)
ReplyDeletewawww mantab gannn :D
ReplyDeleteWahh, infonya berguna gan.
ReplyDeleteThanks mas guru informasi ilmunya sangat mengenai saya yg sdg blajar... mohon doanya mas guru spy sy bisa jdi programer web .
ReplyDelete