[TUTORIAL] Blockquote & Hover #1

by - Saturday, February 13, 2016

Assalamualaikum dan salam sejahtera ,


Jom ^^ Anis nak share kan tutorial macam Anis punya blockquote , bila korang halakan cursor dekat kotak blockquote tu nanti akan keluar icon yang menari-nari, kan ? So macam ni lah , caranya nak buat macam tu jugak :)

1. Cari code di bawah ini .

body {

2. COPY code di bawah ni dan PASTE DI BAWAH code yang telah ditemui atas tadi .

blockquote {
padding-left: 2px;
background:transparent;
padding-bottom : 5px;
font-size:12px;
border-top: 4px solid #000000;
border-bottom: 2px solid #000000;
border-right: 4px solid #000000;
border-left: 2px solid #000000;
color:#585858; width:490px;
margin-left:10px;
padding-right:6px;
padding-top:4px;
}
blockquote:hover {
padding-left: 45px;
border-left: 10px #000000 solid;
color:#B43104;
-webkit-transition-duration: 2s;
-moz-transition-duration: 3s;
transition-duration: 1s;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
background:url(URL ICON COMEL / TINY ICON);
background-repeat:no-repeat;
}

MERAH - Saiz font
HIJAU - Warna border blockquote
PINK - Warna font
PLUM - Panjang kotak blockquote
BIRU - URL Image yang korang nak letak kat situ

3. Lepas dah siap ubah suai mengikut citarasa sendiri , bolehlah anda SAVE .

P/S : Selamat mencuba :)

You May Also Like

1 LOVE(S)

Thank you for dropping some comment and have a nice day! 😉