Wednesday, July 6, 2011

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

31 comments:

  1. @didie didoe

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

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

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

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

    ReplyDelete
  5. nape die punye link ta padam?
    die stay kat tepi??

    ReplyDelete
  6. thanks kak fara. semua tutorial menjadi hehe

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.