Wednesday, January 22, 2014 | 9:35 PM | 0 comments

Assalamu'alaikum Wr.Wb
Kali ini aku akan kasih tutorial bagaimana cara buat efek shadow pada saat kursor menyentuh gambar.
Silakan kalian arahkan kursor di blog aku ini pada gambar yang aku pasang,,what happen??????
kereeennn kaaaannn?! ;) Well, kesannya ada bayangan biru ditepi gambar itu, dan gambar jadi blur melengkung,,,
mau tahu caranya? Ok LET'S CHECK THIS OUT..!!

Ini bisa di pasang di BLOGSKIN MAUPUN BLOG TEMPLATE

1. silakan cari kode ini :

img:hover{

2. sudah ketemu kaan? Then paste kode di bawah ini di atas kode tadi:

/*------ IMAGE ANIMATION------*/ img {filter:alpha(opacity=100); -webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;} -moz-opacity:1.0; opacity:1.0; }

3. Silakan di PREVIEW dulu,,,
4. Jadikah??kalo jadi GOOD JOB!

Kalian bisa mengganti kode warna diatas seperti #FF3366 dan sebagainya dengan warna yang kalian suka ;)

Older Posts →