tentang
banner
tutor
fb
home

Tuesday, September 06, 2011

TUTOR : Image Opacity Effect

Macam udah lama ak xkongsi ilmu bersama kome kan.. jadi,nak continue balik..
kali ini nak kongsi camner nak wat effect pada gambar kome.. camner tu??


sila perhati baik-baik DUA gambar di bawah yer.. lau x,ak lepuk!! hahaha..


Image akan jadi pudar bila cursor mouse di letakkan pada gambar



Image yang pudar jadi terang..kira kesan sebaliknya yer..


MACAM MANA NAK WAT LAGU TU???

DESIGN > ADD A GADGET > HTML/JAVASCRIPT


Pastu kome copy la salah satu kod kat bawah ini..

Untuk kesan PERTAMA

<style>
/* ----- Image opacity effect 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>

Untuk kesan KEDUA

    <style>
    /* ----- Image opacity effect 2 ----- */
    .post a img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    }

    .post a:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }
    </style>

Pastu,apa kena buat?? belanja ak makan mekdi..ahakz!! SAVE la yang oi..
tengok hasilnya orait..


 n/y : lau ada yang buat dan udah berjaya,tahniah la teman ucapkan ea!!
 gembira dapat berkongsi bersama..




guna AKAL berfikir,guna HATI merasa dan guna JARI meluahkan ^ ___ ^

9 dak comei sayang YUI:

Unknown said...

agak menarik jugak ni..hehee

safurara said...

nice =)

Anum said...

bestnya
nak buat la

Rean said...

mmg menarik benda ni.. :) iMBobo dah buat..thanks ya! :)

eMMe said...

Rajin yui wat kesan2 di atas tu.... apa pun yui, akak sokong yui owez, hehehe....

anismelon said...

uiks..cam menarik je nie..mcm mcm..t anis rajin anis try..

a.R said...

yui, blockquote kte dah tak ley guna lol.. sbb tamplete yg bese nih tak de blockquote....hmmm sedey...

Kisah Kaseh Annisa said...

terima kaseh sis..

Anonymous said...

dapat Yui aku ikut tutorial ni...