blockquote keren dengan css 3

Blockquote Keren dengan CSS
perbesar (klik)
Blockqoute adalah kutipan yang berada pada suatu blok atau area tertentu, dengan adanya blockqoute ini sangat membantu pengunjung dalam membaca artikel kita, apalagi jika sobat memposting artikel terntang code-code atau script tertentu.
Jadi kali ini saya akan share cara membuat blockquote yang lebih keren. Contohnya bisa sobat liat diblog gw ini atau liat gambar disamping :)

Untuk membuat blockquote tersebut kita harus mengedit sedikit kode CSS blog sobat. Ok..

Masuk ke Rancangan >> Edit HTML
Kemudian cari Kode blockquote atau .post blockquote (tergantung CSS pada blog sobat
Hapus kode tersebut beserta elemen-elemennya.
Ganti dengan kode dibawah :

blockquote {
background: #EEE ;
width: 400px;
padding: 5px;
margin: 5px;
width: 400px;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}

Oke Sampai sini aja Postingan