Blockquote Dengan CSS Gradient Dengan 2 Pilihan

Dua pilihan Blockquote Dengan CSS Gradient

Pilihan 1




blockquote {
  background: -moz-linear-gradient(left,  #f7ea00 2%, #00c10c 10%, #0072ff 43%, #ff0000 81%, #e000e0 96%);
  background: -webkit-gradient(linear, left top, right top, color-stop(2%,#f7ea00), color-stop(10%,#00c10c), color-stop(43%,#0072ff), color-stop(81%,#ff0000), color-stop(96%,#e000e0));
  background: -webkit-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -o-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -ms-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: linear-gradient(to right,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}

Pilihan 2




blockquote {
  background: -moz-linear-gradient(left,  #f4f466 10%, #26c14a 10%, #26c14a 20%, #7db9e8 20%, #7db9e8 30%, #ff0000 30%, #ff0000 40%, #0029e0 40%, #0029e0 50%, #ad9000 50%, #ad9000 60%, #eacf00 60%, #eacf00 70%, #e000e0 70%, #e000e0 80%, #db006d 80%, #db006d 90%, #aad100 90%);
  background: -webkit-gradient(linear, left top, right top, color-stop(10%,#f4f466), color-stop(10%,#26c14a), color-stop(20%,#26c14a), color-stop(20%,#7db9e8), color-stop(30%,#7db9e8), color-stop(30%,#ff0000), color-stop(40%,#ff0000), color-stop(40%,#0029e0), color-stop(50%,#0029e0), color-stop(50%,#ad9000), color-stop(60%,#ad9000), color-stop(60%,#eacf00), color-stop(70%,#eacf00), color-stop(70%,#e000e0), color-stop(80%,#e000e0), color-stop(80%,#db006d), color-stop(90%,#db006d), color-stop(90%,#aad100));
  background: -webkit-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -o-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -ms-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: linear-gradient(to right,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}

HTML

<blockquote>isi teks</blockquote>

Kumpulan Blockquote Keren Dengan CSS

Style 1

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Style 2

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Style 3

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Style 4

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Style 5

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Style 6

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3uJCYI-3-PvhFk8RiW4CbgZ3Mj7rB2jJOvsdgL_McQ6_LV8d52kKZbFp41ynvYu_WSE3CBnQ9pn0FgtpQYZo4mutS-RWmDYYxWjZ4G5qb20SSERI81OHSdZaUBixNaAgiTxRHIF6oq-A/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Style 7

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNWmhz9ZwNcbumyrtDTGc9lYlv5biT4zYUco1HI5z0L2HG2wHnOG4uHX7J-r1HxJEM062B8zwiUu0Kvkm6Izk2fAP1PhFhMvF8wvqKq-h2H0jMdjI49mNFI4WYmikcAgiQaKIv7msy10/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Style 8

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN_iUqUBayu7o4CVaMEOdJdwAhMqG7OPSleizG7Wsqkd3oFnOSKSdA0lmbcalQS_hUFUr1q7_JpjiIfTWX1QlLh8aFcrKVCJOQgwz9L-NOB58o0FMAaemSFY9snvweOITw8_DY2rSDEKs/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Style 9

blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

Style 10

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-qRAc5aboZnnx3RVBEZWOA2PgOZFNwYKDR1LEMy4T1jRvVa5lBnuk9qcPzxtgQ5NllZWKkInpuuxfXAVElE_dDiK_bUy3MgEahc8KxjeyCmb-So0A077NREIldbFawMeqOEerTZZylNW_/s1600/quote.png") 5% no-repeat #FFF8DD; }

Sekian dulu ya

Blockquote Styles

Style 1:

blockquote{padding-left: 6px; background:#f5f5f5; padding-bottom : 7px; font-family: "PF Tempesta Seven Condensed"; font-size:8px; border-left: 6px solid #4d8876; text-shadow:1px 1px 0px #fff; color:#9a9a9a; width:448px; margin-left:10px; padding-right:6px; padding-top:4px;} @font-face {font-family: "PF Tempesta Seven Condensed"; src: url('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}

Style 2:

blockquote{ padding-left: 18px; background:#fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding-bottom : 7px; font-family: "Pixelberry"; font-size:8px; border-left: 0px solid #4d8876; text-shadow:1px 1px 0px #fff; color:#898888; width:448px; margin-left:10px; padding-right:6px; padding-top:7px; border-bottom:1px dashed #f295aa; border-right:1px dashed #f295aa; border-top:1px dashed #68baaf; border-left:1px dashed #68baaf;} @font-face {font-family: "Pixelberry"; src: url('http://static.tumblr.com/y0x5xm1/Ylpmcc4r7/pixelberry.ttf'); format("truetype");}

Style 3:

blockquote{padding-left: 6px; background:#f5f5f5; text-align:center; padding-bottom : 7px; font-family: "folks-light"; font-size:12px; border-left: 6px solid #4d8876; border-right: 6px solid #4d8876; text-shadow:1px 1px 0px #fff; color:#9a9a9a; width:448px; margin-left:10px; padding-right:6px; padding-top:4px;} @font-face {font-family: "folks-light"; src: url('http://static.tumblr.com/y0x5xm1/4e1mcc5kl/folks-light.ttf'); format("truetype");}

Style 4:

on hover:

blockquote{padding-left: 16px; background:#f5f5f5; padding-bottom : 7px; font-family: "PF Tempesta Seven Condensed"; font-size:10px; border-left: 6px solid #4d8876; text-shadow:1px 1px 0px #fff; color:#9a9a9a; width:448px; margin-left:10px; padding-right:6px; padding-top:4px;} blockquote:hover { padding-left: 45px; border-left: 10px #528B8B solid; background-color:#d6d6d6; color:#000; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; transition-duration: 2s; @font-face {font-family: "PF Tempesta Seven Condensed"; src: url('http://static.tumblr.com/8yo5xxv/b5cm22t2y/pf_tempesta_seven_condensed.ttf'); format("truetype");}

22 style blockquote untuk blog

Style 1

 

Blockquote Code:

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Style 2

 

Blockquote Code:

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }

Style 3

 

Blockquote Code:

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }

Unlike other quotes this style has an option of bold first letter. Style 4

 

Blockquote Code:

blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

Style 5

 

Blockquote Code:

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }

Blockquote With a Fancy Border and Owl Image

Blockquote Code:

blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3uJCYI-3-PvhFk8RiW4CbgZ3Mj7rB2jJOvsdgL_McQ6_LV8d52kKZbFp41ynvYu_WSE3CBnQ9pn0FgtpQYZo4mutS-RWmDYYxWjZ4G5qb20SSERI81OHSdZaUBixNaAgiTxRHIF6oq-A/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }

Blockquote With a Purple Corner Label and Border At Bottom

Blockquote Code:

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmNWmhz9ZwNcbumyrtDTGc9lYlv5biT4zYUco1HI5z0L2HG2wHnOG4uHX7J-r1HxJEM062B8zwiUu0Kvkm6Izk2fAP1PhFhMvF8wvqKq-h2H0jMdjI49mNFI4WYmikcAgiQaKIv7msy10/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Jigsaw Blockquote With An Image At Right Corner

Blockquote Code:

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN_iUqUBayu7o4CVaMEOdJdwAhMqG7OPSleizG7Wsqkd3oFnOSKSdA0lmbcalQS_hUFUr1q7_JpjiIfTWX1QlLh8aFcrKVCJOQgwz9L-NOB58o0FMAaemSFY9snvweOITw8_DY2rSDEKs/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquotes With Classic Left Borders

Blockquote Code:

.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiydAaFbynALjkxfkf3zmvQ_hb6zymg9ceIcyrcUMojNzg33G27gQeMtx81L94Y5T2K314bhbdeKuNX4ap_UpaK7bcSBmbBXcEC08GQK2pc6C3KAOclc0Ou9zd4NnZcmghJ-QXm6goE3-0/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }

Blockquotes left sided green black

Blockquote Code:

blockquote { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuQK8rEEBkkhuaO_Ad2sfIbhd9U6Cy5i8YfK3jAIhMrwJ_G234bG5OuHHE_4thzEHADd9L7sgkwhyphenhyphen4P8r01_oGP7DYaAGSPxd1_cDD0p6pwDlEbMs5aQU8ZPuZ3HB6FfUtF2dZgvTU4o/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Blockquote With A Brown Corner Label

Blockquote Code:

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKTx3YHDmQLxv8TCnDLzrmGO0ThXazRFaW6MRCJRS3-DnaMq6fMHOKnYix0NNSTVugXlMmyiv9orNuElwSu3K4cYV9v-1mYWYowHKgJJWjAbK3j_g8gHiDd5Han4LDPBj5XbSbZknKUeA/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquotes With Inverted Commas

Blockquote Code:

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicmfjhttjGcQRO0nn8E8koXx0hpGs70HgN1unCS5z_5Ua_shzUN37TDVA1Eck_ooDLps3LbqgwFFFntPkKtfso0bvrSj5c03BIUXU7i6TqM502SUM16xljK5hPx5nV6tljUvZHhg8-MnY/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1JXKkHcF-6RMaNDresNBOH8e0PF9gf6C-3ZroTvenK1ZIDrIH_vdTKaFIDgUq5jSp15fMjIMgzzpyVy_jfG-Cm54zOTwfXMswGLN8sw4iB-Pw8MNQgXtU7TkMU87Dfqx1hdeB4un5zw/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquotes commas orange

Blockquote Code:

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmUIOL8oZltDwa3ISr8xtpHrh90LTv7DrP7AeoFR6Sx_ShEuclDrnl3zac_yQcrqzEZCvJtu0b8o3o-KmSkf6J8SPp7YgOw1KxSW9kWtJ4p11jJGT9MDEHtdyBcStaDVzYc0X0fTrTE9k/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLTEjELGo8xIccTommS4AFzEco9FSIWLblFDDPZcM3nR7vyk7f3cQYfti9cOiytmuTqG7yPjQID4hPnppSiBGjzvDh6PFicGk5BXIm0cMXJD-8g1_0PIeHOfpwm4fiil-NGxyfQNCOvA/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquotes commas hands

Blockquote Code:

.post blockquote { font:bold italic .9em "comic sans ms", Tahoma, sans-serif; padding-top: 25px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2-mvH7swOZO17fiHbo1iHEZf_PzfZdOKZSVihkgvkBjnv40V77_VgEU8YU8uadcJpxksxgbVJJiV6_QswNthPkQBGbJmdOvUaE6QSRIdfszVNDWUVbj4ClkJaJGyPaZVXefA419ocYA/s400/left.gif) no-repeat top left; text-indent: 65px; color:#6299E4; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiMJWoAiPQgP9H7r98zr-ZhbrNKoVKvmjS9PLLg8H6MWyyB6S_DPxP6Ysd1os_fBi9gNDIUAW6FbNl_OFQiK-CNz0NYoZEGyRS1BgdUcke6IDUJBTp9KRyNFkgtgdwfXlIryqixXVUBp8/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquotes commas green

Blockquote Code:

.post blockquote { font: italic 1em "comic sans ms", Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_xR3KRlcX9RalCAWd8Upa-63JuGD5gRK6fMkso_ckszuSWg_PQBHRRR5YkmD9kvglK-C0_IvpR-VTtRH5kaEG60877W1u8DnzoSOkiLOe01qwbNxHgRVyyRVLBZDwFm6eEKiCN9Itucg/s400/comma2-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFyTdkSDL7ayD2FwMItF3meaVP4zlcFAaGBQtLOxHl6iPNDfaPe42nichCETibbFiosKDxX1IMaL60-KfQJmKxuZNcLXThklZc2vD3NE5KWxmn25nS9FxUO59Dqd4yWo4cR-iP9xiMHJc/s400/comma2-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquote With Well Aligned Image At Top

Blockquote Code:

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFz_xWiUPNHDtzbyZEssUR1OwO6kk4shr-1p84lLHq-Ld9ryA6rCeLR1E9R1n2pTY5cLdoJ3GXzzkJY1OUkIHZAj4oSYrN1w7Q-uvI60SxF5Kfol_H8n14FdF-SIaIrroSTLAKYYeEsgs/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }

Blockquote With Canopy Style Image At Top and Bottom

Blockquote Code:

.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWcVx6LQfzVGnvozwspT0L-FlzJ0iNLBCRKPS-HRUWSC9m6vuQa56_tWmEIQBS2JVYunpU8EUhFuFukJ30yaLQMlOlsGragcJLG_qk7_voLyMaLLlBYjPL3otnJXv_BWmR7xay7z5VRU/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNyoLJQYKkhAOISFvsrJO54ErD-ZpKZYa-spGNQV5MBXUXZZwsy1nmG8mTq_QtkOGTtSeyowuHNASmKH2huiisfNXaUti7vqd5wDNoLxgpyRTEsZnPrykdOegPp8hSkZTkgoL9Ly-Mxug/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }

Box Style Blockquote Surrounded By Borders

Blockquote Code:

.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8yDu-PI65moS5tsDafZ8IjDdaequIeoJ7AO17PPd8YV5ub9JHT_r04nSn0Gh5s1AGf9UpK23oWoEf1AgiSSU5boZbTF63XeW5NHR6eaXeIQBG4SWQ4nqMuIjZrMXYHp-EXc-P1Qm3dU/s400/block3331.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } .post blockquote p { margin: 0; padding-top:10px; }

The Monkey Man Blockquote!!! Once you get an idea on how to use these blockquotes then you can create artistic and some funny blockquotes like the one below,

Blockquote Code:

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0CgD7uH7gbiIH-yDmjjetuI1Rl4Av881kIIM9RTyNyOWALAj1J5d8WE1-i-sJQp2pBXjmQAdF8oFAfHdwmqILVFeZ1KhxNZep9iJsytINVT3kWiV_fVyM7VKjC69RaeCBnocb5vnssOo/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhALMU9-RxvEAbDWjkmjLsZIfbgfkuURwmfn8qMCxC8PjgP0QdzpnT6JTnvrwKxS8D029vymVpUjuz_omqc-MOdmh7Sc_aDH-bOPxO1EyszWA2zJsIIBW2EafmtI8L1dj9s4m8rFaF0z_w/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }

couple of ways to dress up the lowly blockquote

Blockquote Code:

.post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } blockquote { background:#EFEFF7; }

big chunky quotation mark blockquote

Blockquote Code:

blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-qRAc5aboZnnx3RVBEZWOA2PgOZFNwYKDR1LEMy4T1jRvVa5lBnuk9qcPzxtgQ5NllZWKkInpuuxfXAVElE_dDiK_bUy3MgEahc8KxjeyCmb-So0A077NREIldbFawMeqOEerTZZylNW_/s1600/quote.png") 5% no-repeat #FFF8DD; }

Here is one more. I use it on Buttermilk Clouds. It is simple in a fancy way. I'm changing the color here so you can see a variety. The great thing about this blockquote is you don't need an image to save and upload. It is all done with smoke and mirrors!

Blockquote Code:

blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }

If you want a different color, find one on this fantastic color chart then put that color code in place of #DC143C in the code above.

Easiest Blockquote Quotation Marks CSS

Here’s our blockquote code:

1 2 3 4

<blockquote>     <p class="says">I went to a bathhouse last Saturday (after all, I cannot go to America for a bath). They handed me two checks. One for my underwear, the other for my coat and hat. But where is a naked man to put those checks? Honestly, there is no place for them. You have no pockets. All you have is a belly and legs.</p>     <p> - Mikhail Zoschenko - Nervous People and other stories</p> </blockquote>

And here’s its CSS:

blockquote { font-style: normal; background:#ccd7dd; padding:24px 40px 16px 25px; line-height:24px; } blockquote p { font-size:14px; text-align:right; padding:0; color: #134977; display:block; } blockquote p.says { font-size:16px; text-align:left; padding:0 0 10px 20px; position:relative; } blockquote p.says:before, blockquote p.says:after { content: '”'; font-size: 32px; font-family:Georgia, "Times New Roman", Times, serif; color: #134977; font-weight:bold; vertical-align:top; line-height:0.8 } blockquote p.says:before { content: '“'; position:absolute; left:0; top:-2px; }

CSS Blockquote Styling

 

Style #1

blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
width: 400px;
font: italic normal 12pt/1.2em Georgia;
color: #888;
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

That produces this look which can be inserted in your text in a float left or right position.

CSS Blockquote Style

Style #2

This blockquote style I used for some testimonials for a client site. The idea was to stack the testimonials on top of each other using some spacing and some bold quotations. It’s actually a div class that could work as a blockquote. Or, your could simply assign the class to your blockquote tag. Here’s the code:

.Testimonial {
background:#F7F7F7 url(images/testimonial_top.gif) no-repeat scroll 0 0;
border:1px solid #EBEAE9;
clear:both;
margin:0 0 15px;
padding:15px 0 0 15px;
}

And here’s what the result would be (reduced image):

Css Blockquote Style

Style #3

I used this style for a typical blockquote containing a snippet of the text from the page in order to make a visible point to the visitor regarding an aspect of their services. Here’s the code:

blockquote {
width: 500px;
font: italic normal 12pt/1.2em "Lucida Bright";
padding: 10px;
border: 1px #00CCFF solid;
text-align: center;
}

And the simple HTML:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lectus magna, consectetur eu eleifend sit amet, condimentum ac massa. Maecenas at diam eu est scelerisque facilisis id sit amet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

And here’s the result:

CSS Blockquote Style

You can see that your blockquotes can have background colors, background images if you wish, miscellaneous border controls, spacings, fonts, etc. just using your imagination.

Blockquotes Style

 

1. Classic CSS Blockquote

Usually people use CSS background-image to add large quotation marks in blockquote. In this example we have used CSS to add large quotation marks.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 18px;

04	font-style: italic;

05	width: 450px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #383838;

11	background:#ececec;

12

}

13

14	blockquote:before {

15	display: block;

16	content: "\201C";

17	font-size: 80px;

18	position: absolute;

19	left: -10px;

20	top: -10px;

21	color: #7a7a7a;

22

}

23

24	blockquote cite {

25	color: #999999;

26	font-size: 14px;

27	display: block;

28	margin-top: 5px;

29

}

30

31	blockquote cite:before {

32	content: "\2014 \2009";

33

}

2. Classic Blockquote with Image

In this example we have used a background image for quotation marks.

01	blockquote {

02	font: 16px italic Georgia, serif;

03	width:450px;

04	padding-left: 70px;

05	padding-top: 18px;

06	padding-bottom: 18px;

07	padding-right: 10px;

08	background-color: #dadada;

09	border-top: 1px solid #ccc;

10	border-bottom: 3px solid #ccc;

11	margin: 5px;

12	background-image: url(http://example.com/wp-content/themes/your-theme/images/gray-georgia.png);

13	background-position: middle left;

14	background-repeat: no-repeat;

15	text-indent: 23px;

16

}

17

18	blockquote cite {

19	color: #a1a1a1;

20	font-size: 14px;

21	display: block;

22	margin-top: 5px;

23

}

24

25	blockquote cite:before {

26	content: "\2014 \2009";

27

}

3. Simple Blockquote

In this example we have added background color and dashed left border instead of blockquotes. Feel free to play with the colors.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 16px;

04	font-style: italic;

05	width: 500px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #383838;

11	border-left:3px dashed #c1c1c1;

12	background:#eee;

13

}

14

15	blockquote cite {

16	color: #999999;

17	font-size: 14px;

18	display: block;

19	margin-top: 5px;

20

}

21

22	blockquote cite:before {

23	content: "\2014 \2009";

24

}

4. White Blue and Orange Blockquote

Blockquotes can be made to standout and they can be just as colorful as you want them to be.

01	blockquote {

02	font-family: Georgia, serif;

03	font-size: 16px;

04	font-style: italic;

05	width: 450px;

06	margin: 0.25em 0;

07	padding: 0.25em 40px;

08	line-height: 1.45;

09	position: relative;

10	color: #FFF;

11	border-left:5px solid #FF7F00;

12	background:#4b8baf;

13

}

14

15	blockquote cite {

16	color: #efefef;

17	font-size: 14px;

18	display: block;

19	margin-top: 5px;

20

}

21

22	blockquote cite:before {

23	content: "\2014 \2009";

24

}

5. Using Google Web Fonts for Blockquotes in CSS

In this blockquote CSS example we have used Droid Serif font from Google web fonts library.

01	blockquote {

02	@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);

03	font-family: 'Droid Serif', serif;

04	font-size:16px;

05	font-style:italic;

06	width:450px;

07	background-color:#fbf6f0;

08	border-left:3px dashed #d5bc8c;

09	border-right:3px dashed #d5bc8c;

10	text-align:center;

11

}

12	blockquote cite {

13	color: #a1a1a1;

14	font-size: 14px;

15	display: block;

16	margin-top: 5px;

17

}

18

19	blockquote cite:before {

20	content: "\2014 \2009";

21

}

6. Round Corner Blockquote

In this example we have blockquote with rounded corners and we have used drop shadow for borders.

01	blockquote {

02	width: 450px;

03	background-color: #f9f9f9;

04	border: 1px solid #ccc;

05	border-radius: 6px;

06	box-shadow: 1px 1px 1px #ccc;

07	font-style: italic;

08

}

09	blockquote cite:before {

10	content: "\2014 \2009";

11

}

7. Using Gradient as Background for Blockquote

In this CSS blockquote example, we have used CSS3 gradient to enhance background of blockquote. CSS gradients are tricky, because of cross-browser compatibility. We recommend using colorlabs, CSS gradient generator.

01	blockquote {

02	width: 450px;

03	color:#FFF;

04	background: #7d7e7d; /* Old browsers */

05	background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */

06	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */

07	background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */

08	background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */

09	background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */

10	background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */

11	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

12	border: 1px solid #ccc;

13	border-radius: 6px;

14	box-shadow: 1px 1px 1px #ccc;

15	font-style: italic;

16

}

17	blockquote cite:before {

18	content: "\2014 \2009";

19

}

8. Blockquote with Background Pattern

In this example we have used a background image as pattern for blockquote.

01	blockquote {

02	width: 450px;

03	background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

04	border: 1px solid #ccc;

05	box-shadow: 1px 1px 1px #ccc;

06	font-style: italic;

07

}

08	blockquote cite:before {

09	content: "\2014 \2009";

10

}

9. Using Multiple Images in Blockquote Background

You can use multiple images in blockquote background using css. In this example we have used blockquote:before pseudo element to add another background image to blockquote.

01	blockquote {

02	width: 450px;

03	background-image:url('http://example.com/wp-content/themes/your-theme/images/lined_paper.png');

04	border: 1px solid #ccc;

05	box-shadow: 1px 1px 1px #ccc;

06	font-style: italic;

07

}

08	blockquote:before{

09	position:absolute;

10	margin-top:-20px;

11	margin-left:-20px;

12	content:url('http://example.com/wp-content/themes/your-theme/images/pin.png');

13

}

14	blockquote cite:before {

15	content: "\2014 \2009";

16

}

We hope that you found this article helpful in learning how to customize blockquotes style in WordPress. If you have any questions or suggestions, then please feel free to leave a comment below.