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:
Unlike other quotes this style has an option of bold first letter. Style 4blockquote { 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; }
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 { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpP-lZTy_Jmx5Ygu_IvKzTaxOPFfubHG9Ueu1A95lWqt4xDiEPhtxN53z0giCJdTow-0DqZq-3f6xtmJI2WY8-322pqXeK3R_YGAQVXW7Qe0ll-jox6lorwbLJxMrl896pS81o39nlpNI/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
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvnaSzQMkmVGwJ1-sGrb1K-RWkaL2X7iDPIJ7Oct8XFQMmvj2lDj-bnve2Dj6jbPW29ME1DxHicxLVv4vvgMtJTz-pNv-qFiIy2Krt5KQ_JZS8EAdoZX4WStt3OrhvaUhpowu24_qKMXo/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
.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2_cRv_o0KuiKChv4nCjPqhUix92-cw_eyXtvZnGVbozGWHJHWZAmu0Lb9_NBX3qs_mJd_XNENiIw8Jj9InCrnOgfa6UPxdOCRArYGfpHyBwu0pod636zREzLdKSUwgMczO8Kr0PphvwA/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
.post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZv1iQmPbXxYlysk4bjpoykrLBN3YeJ8TeUYlCVK-9dEDvx_ORbolIqoC68_yfziKJwqU5Uj_HP33wrL-SIdJkwBy68o2Ka7R1yegiW-9QtTNQNmWpDtmmqch9o8Z78wulBhqNkA4mgQ8/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 { background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8TbpWZGRMWjN-z6RjKfw6SEyYEdoOtiu-tJ6mRv_OgtZFyFlfL0yKT8RP5WmDAkUonXvbrt6kIHEFpLHBRIAYoyaxCdqlZu-sr4ZZCPXtOjbhcsydM12Sjtp0RnZlYcm9ZU9wSsEEvNs/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
.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXMJV5JS9ttTB5cERYHx4I2s1CtZlsvkPG0RNfo57RUivw-0eAdPv3MUZrBgjxNoAFQkPGMENfGEfcDU7nQNzzDC2SB8KPfe1QMpq6VZ-HuHyictMHFX2hSF1dyFEGNM560nBcTX9yxc/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
.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9tzBiWEIZYFZNvEGuoJg9FrdIxVE0E7mA1ToBRo04SMY0Zk_kloz2YtEM_ns7RL3wgyNfnX5ru0OBYd9u2y2n2YzQX6kK2Vt9WKr6lMXwwS_hgOrSmyz7d0vF6LkRkCUMTgKFluRGQUU/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/AVvXsEgMHbhqTqhlosv-dXaQzsA4Dj7sAJx7DSla65xtpQ2MOR5bAFoEkYKkcX4iOGFbkblhzr6_NWOx76gpP58aqw4Dsq-VGpePQGm6t8e_lSXk9zgmKgkccG1Dt0M2xEoeYkSB48GcDkzm7pQ/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
Blockquotes commas orange
.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNC4MX5WBL6ed_W211416gZJW3rApADjG8rCb-6W2cTr7tI2_uF_fYiw_SMcwekntOfhTCdSS13kL5xTs926dRKGfaFdODyp_UeHMnC_kSTVvGezkPkLWjvPGNhHuxRxW1QrqZ5nhalgU/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/AVvXsEiL1UiuMc-wRZSkdfshyphenhyphensjgipDT_dkIeVAU4cQjM4FB_HYXlumuiIRsUlclv014CNv76eJ1UOeBCrx-AEo22qMfB6mLSDK-jInnyzjH5IkkaZAIHAPatKjYiASyhH7zOBgpMUq_Fk88r-0/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
Blockquotes commas hands
.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/AVvXsEj9kv2p1K7YYIlmjKB3uqSqX5nj3abyijioNzkmuZw5TSllFA8Arhu9s5ScJ-ynxmvuM9n79Hn8CTb4WvIM4FNy5hcTgwo_t9YEdbw1HaoQfGZOpmDCeJWnoWGxqTuStpBi5AdRSf2I-Pw/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/AVvXsEhleqHwUuOiE7QLN1-60W6HE_g2_b9wqsoX0xstzz_9vFiWOfgVk1l4aamDmWGjtMjCsCnBqgNE7h0x4iQjjbhoBu47QmyIIaQ7AIoTZN56rudXdEdvwSOKQXitxT5kX69132pJVWIkYEY/s400/right.gif) no-repeat bottom right; padding-bottom:30px; } .post blockquote p { margin: 0; padding-top:10px; }
Blockquotes commas green
.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/AVvXsEiRcFvnHLe2KfEnV8khyphenhyphenBZ4lyqBh98jevgT-fSUTS-ydxJaNf8faPm5f-BKzxR5P_9UpNVI5ojlcjG7c2DBcYp8RR03O9mv6nfm_QtE1XGSNpGWAevhhZgHwU_mZMdALT-jKlBnYIn_Qfc/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/AVvXsEjxznsAj4OZwkAJS6G7fp4V0yaw4OwQabhvlBsKfaPRnMwvPXjoOI4O5PqbaUimUGI-BaT1_AlKAuGtfWz0C3LWEWfOWuzWuAbqPEFQ4eqxgWMJxc9CrbuAvt0umiUxLdlHBH2ZcRKehKc/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
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTvqdFv8n9aLsLPNzU-jS-0QwJoZB3K7w3c9lqDOSeedaKXGFiyGIfljTOM2Mzy-cJ_8S_MgfF4k7UTc2Z77mWTvWRPHTQastGgjDn5TgFlrY-71SrQWWKRHW6f5QbZR2xXwtwKhP-ms/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
.post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUpw_lC75pF0THyHmTqofDauW5DcOP4lJMloHckeQQ6UT9NKTB4vdZwzYtuLU6jeqRczG2jdfzV1Sc8Ab9L4YDgeW9fd3vDDUynFiT6ofo6RzLLaps6a-TwSLH6dcEWWhSazI1XZRQ8Pc/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/AVvXsEjeMCnUDcpbmI6TgtFBTtKmfHvx_wvH5tkkPfpvbzPq2VjRCR4V8hey6pPr-ROQzmflX7mSgkNQ4_8Pb5_W5ctQZQGd1q9lGxULy4TESjssq6Im_Z9LVhLaZvtF-moPVOJ4YW4tEvmloRo/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }
Box Style Blockquote Surrounded By Borders
.post blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJp1WIaCoJeO19ggf1eeSWcuB8ZlJZwy7NBiEysG9aziQPhj2gt3W2sV8M9FrgEjgWyLBRYnIqt8ErhXhyphenhyphenovJFRtDZwMWD-qmXeX40hkGi9dACrASWLucBHUQ1B7VtejqMjgul1-jYmhc/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,
.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZnNdy3joGFHUVdiCRDOLdYgvAtmAK_6T2q0Za_2tmsXzMhUxEqPypco6CgXesohU2K1N6wafmiEBw6os7_AqDuv8TS-qG1oOuWfLs_7ZaNBbNfM7Bh87JdQDyKkt7yVRtuVjsKBSxZEM/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/AVvXsEhpzpM6mL9nEBExV2X4qYx2QzfdVccIMXCRscHbik8BM1-FyHSrYOEiMz52O0SDwswmpToaJVU3tl4Ufjz2qOz1yIgnlrVC50ghtDWyThgwEU-HIMXuxRKLsZOwrlSdOPhuD66AvXJ5Abw/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
.post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } blockquote { background:#EFEFF7; }
big chunky quotation mark blockquote
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/AVvXsEhFFim6HiuKgx71GfX5uuac-bc0vJ6g6pJE-OJa63qLqtFl1uLq6eFP81md4fxUlfdZOXy8q48yDo8OzEAu2ojJd0HgIaFJHD9h6uhGtcvUAdaQ5u1ghO6lYkZiMIUDInO-tUupib_Yw_Sa/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{ 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.
No comments:
Post a Comment
Silahkan Komen Rider,