Senin, 13 Juni 2011

Kesan Khas Pada Gambar Apabila Dilalukan Cursor


Satu kemestian bagi sesebuah blog mempunyai gambar di dalamnya. Tidak kira dalam entri atau di bahagian lain. Dan lebih menarik jika gambar yang anda letakkan memberikan sedikit kesan khas apabila anda lalukan cursor padanya.



Anda boleh lihat kesannya secara real di test blog ini.:)


Tutorial untuk membuat kesan khas pada gambar ini adalah seperti berikut.


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..:)

Note:
Anda boleh mengubah warna hover effect. Default warna pink (warna kegemaran perempuan ni.:).
Kalau hendak tukar warna lain, tukarkan FF66CC dalam kod di atas dengan kod warna yang anda suka. (kod warna lain boleh rujuk di sini)

Tidak ada komentar:

Related Posts Plugin for WordPress, Blogger...

Label

Info software game Health Sejarah anti virus trik gambar lucu gambar keren Info unik berita dan cerita unik software Converter dunia hewan info islam software portable software Editor film Teknologi Tokoh berita islam Tentang Indonesia Info Bunda Arsitek Gedung Hunian kata kuliner Berita Sport pendidikan DUNIA MILITER otomotif software Creator software Multimedia Sepak Bola software downloader software office Sains IPTEK Internet Motifasi ebook alam software Internet berita cerita unik dan lucu keajaiban alam alamat link Info Manca Negara Tampilan renungan gambar Keajaiban Al-Quran software islam Adobe Photoshop Lagu Tubuh Kita dunia extreme dunia flora mitos Foto video Fonts Icons and Buttons software Mobile software protector Tutorial Microsoft Office kamus software android software protect Berita Olah Raga Figur Maps Downloader promo Antariksa Dunia Misteri Tutorial buah software anti maling Driver Games Downloader OS Software BlackBerry adobe reader animasi komputer software Anti Porn software Get Data Back software simulasi software untuk usaha tips 3D Maker Aktivity BILLING Dokumentasi Eksperimen Face Logon Kumpulan Surat MP3 Cutter and Editor Recover Windows Screen Capture Software Akuntansi Software Billing Software Connection Software Pembaca Tulisan Software TeamTalk chat Software Webcam Software spy Software tampilan TuneUp Utilities ala ant arti biografi cheat corel cre desktop flash disk gam gambar jadul google google earth herbal hew i ilustrasi in info hp kasih sayang kreasi label pantun pelacak puisi repair resep s seni sof software Creator avi software Creator program software Cutter software Detektor software Emulator software LJK software Office Tab software Penghemat daya software Quis software RECOVERY software UNINSTALLER software anak software animasi software cek data software copy software driver software karaoke software pendeteksi software perintah software remote PC software usil sos syair toolkit tri trik blog tv streaming un undangan windows 7
Powered By Blogger