Tutotial 55 : Gambar Membulat Ketika Disentuh

Assalamualikum dan bertemu kembali kita dalam slot tutorial bersama Miss Farah..
Tetiba pula macam formalkan.. Ok ada reader yang minta tutorial ini dan aku asyik tersave dalam draft sebab belum print screen for u olls. Kang aku buat tutorial yang entah apa-apa kang korang tak faham kan..so i don't do hard but smart for u olls semua.

Tutorial kali ini aku nak ajar korang buat kesan rounded shadow ketika di hover atau sentuh. Contohnya, kalau korang letakkan cursor kat any picture dia akan keluar imej macam ini :

Memang comel dan nampak canggih sikit blog korang kalau guna tutorial ini.. Nak cuba tak? Jom ikuti step by step ye!

1. Sign in Blogger > Design > Edit HTML > Tick Expand Widget Templates
2. Cari code ini, nak mudah tekan ctrl F je dan pastekan code di bawah dalam kotak find..

/* Header

3. Lepas jumpa code di atas, copy code di bawah dan paste di atas atau sebelum code yang dicari 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 10px #000000; -moz-box-shadow: 0px 0px 10px #000000; -webkit-border-top-right-radius:10; -webkit-border-top-left-radius:10; -webkit-border-bottom-right-radius:10; -webkit-border-bottom-left-radius:10;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 30px; -moz-border-radius: 30px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px solid #F781BE;padding: 0px;}

4. Kalau nak ubah warna boleh tukar code #000000 kepada warna kesukaan anda. Nak code sila tengok SINI

5. Silalah SAVE dan tengok hasil tangan anda!

P/s : SIla la like2 dan komen ye ..

SHARE:

blog tutorial