Toturial : Round Hover With Shadow


Assalammualaikum + annyeong, :)

\Bismillahirrahmanirrahim/..Nanie buat toturial ni...Jom kita mulakan...






1. Dari dashboard > design > edit html
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi find (ctrl + F), cari kod a img {

3. Delete kod selepas a img {, dan gantikan kod di bawah.


-webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}



Contoh: 
Sebelum



Selepas


4. Save dan lihat hasilnya..:)

UPDATE:
Bagi yang tidak jumpa kod a img {, 
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header


a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
Oklah..bye...selamat mencuba!!

0 cute elephant:

Post a Comment

Assalammualaikum + annyeong, :)

Komen di sini ya!!
Satu perkataan pun tak pe...hehehe
Komen banyak2 tau!!

 
Tempelate Designed by Nanie| Copyright-2011 Protected | Infinite
Fly away