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 this PostPin ThisEmail ThisShare on Google PlusShare on Tumblr
31 Comments for "Tutotial 55 : Gambar Membulat Ketika Disentuh"

@didie didoe

try again kalau byk sgt guna tutorial link dihover maybe xboleh guna..

salam...x menjadi la farah..mcmne yea...dah puas buat and copy code di atas header ttp x menjadi...ada cara lain x???

@♥Miss Farah♥ tuto ney sama ke macam tuto bila sentuh header membulat? or kat dalam entry je? sorry menyusahkan farah :)

:tak jadi.. kebanyakkan y saya buat mesti tak jadi?!! :'(

nape die punye link ta padam?
die stay kat tepi??

thanks kak fara. semua tutorial menjadi hehe

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top