Wednesday, 15 August 2012

All About Blockquote With Cute Icon

Assalamualaikum.
Anis ada reka beberapa type of blockquote with cute icon. Mungkin dah lama dah style macam ni tapi tak pe, THIS IS MY OWN CODE
Type 1 . Sebelum di hover :
Selepas di hover :
Dashboard --> Edit Html --> Ctrl+f
.post blockquote {
Copy kode di bawah dan paste di bawah kod atas tu
background-color: #FF72B5;
border-left: 1px dashed #000;
border-right: 1px dashed #000;
border-bottom: 1px dashed #000;
border-top: 1px dashed #000;
padding: 9px;
-webkit-transition-duration: 0.7s;
}
.post blockquote:hover {
background-color: #FFD0E7;
background-image:url(URL Icon );
-webkit-transition-duration: 0.7s;
background-position:bottom right;
background-repeat:no-repeat;
border-top-right-radius: 9px;
border-bottom-right-radius: 9px;
border-top-left-radius: 9px;
border-bottom-left-radius: 9px;
}
 Preview dan Save .
Type 2. Malas nak printscreen. Ngeh, ngeh, ngeh . Korang try je la dulu :)
background:#CCC; padding:5px;
-moz-border-radius: 8px 10px;
border-radius: 8px 10px;
}
.post blockquote:hover {
background:#E9E6E7;
border-left: 15px solid #72BCFF;
border-right: 15px solid #FF72B5;
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
-webkit-transition-duration: 2.7s;
}
Preview and Save.
 Type 3. No preview too . Sorry eh, try je dulu.

 background:url('http://2.bp.blogspot.com/-iTrQyY381AM/T6yHyTCsl9I/AAAAAAAAGag/mOkGl8Y3ejc/s1600/sparkles.png'); padding-left: 9px;
padding-right: 10px;
padding-top: 12px;
padding-bottom: 12px;
margin:1em 20px;
border-top: 1px solid #FF72B5;
border-bottom: 1px solid #72BCFF;
-moz-border-radius: 15px;
border-radius: 15px;
}
.post blockquote:hover {
border-top: 1px dashed #FF72B5;
border-bottom: 1px dashed #72BCFF;
-moz-box-shadow: 0 0 15px #9BB6FF;
-webkit-box-shadow: 0 0 18px #9BB6FF;
-webkit-transition-duration: 1.6s;
background-image:url(URL ICON);
background-position:bottom right;
background-repeat:no-repeat;
}
Preview and Save.
Itu aje. Kalau Anis rajin, Anis design lah blockquote lagi. Bye Assalamualaikum. Komen kalau berhasil


2 comments:

Langit said...

Kalau tak ada code kat atas tu macam mana ?

anis Sk said...

kalau x de cari kod ]]> dan pastekan kod .post blockquote { kt atas dia. then boleh teruskan ngn tutorial ^^