Tutorial : Blockquote

Heyho, all !

Okay, tutorial about Blockquote.
I made two. Standard and Flash.

Pergi Template. Pastekan kod bawah sebelum </style>

Blockquote - Standard

blockquote {
background:url(URL GMBR);
border: 1px solid #ff0d62;
padding: 4px;
margin:1em 20px;
}
Pergi Template. Pastekan kod bawah sebelum </style>

Blockquote - Flash

blockquote {
background:url(URL IMG);
border: 1px solid #ff0d62;

padding: 4px;
margin:1em 20px;
}

blockquote:hover {
background:url(URL IMG);
border: 4px double #ff0d62;
padding: 4px;
margin:1em 20px;
}

Okay, sekarang nak cantikkan lagi blockquote.

1) Border atas, bawah, kanan dan kiri ?


Pastekan kod bawah selepas blockquote {
border-right: 6pt style #colour;
border-left: 6px style #colour;
border-bottom: 1px style #colour;
border-top: 1px style #colour;
Number - Ketebalan border
Style - Tengok sini
Colour - Gantikan dengan colour dekat sini

2) Shadow on border after hover.


Pastekan kod bawah blockquote:hover {

-webkit-transition: 1s;
-moz-box-shadow: 0 0 10px #colour;
-webkit-box-shadow: 0 0 18px #colour;

Red - Tempoh masa (second)
Biru - Ketebalan shadow
Colour - Rujuk sini

3) Icon keluar di hujung border after hover.

background-color: #FBEFEF;
background-image:url(URL ICON KECIL ANDA);

Comments

Post a Comment

You are free to speak, but please own up to it :)