Thursday, 22 August 2013

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

No comments:

Post a Comment