Friday, 23 August 2013

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.
Classic CSS only blockquote example
01blockquote {
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 
14blockquote: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 
24blockquote cite {
25    color: #999999;
26    font-size: 14px;
27    display: block;
28    margin-top: 5px;
29}
30  
31blockquote cite:before {
32    content: "\2014 \2009";
33}

2. Classic Blockquote with Image

In this example we have used a background image for quotation marks.
Classic Blockquote with Image for Quotation Marks
01blockquote {
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;
13    background-position: middle left;
14    background-repeat: no-repeat;
15    text-indent: 23px;
16}
17 
18blockquote cite {
19    color: #a1a1a1;
20    font-size: 14px;
21    display: block;
22    margin-top: 5px;
23}
24  
25blockquote 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.
Simple CSS blockquote example
01blockquote {
02font-family: Georgia, serif;
03font-size: 16px;
04font-style: italic;
05width: 500px;
06margin: 0.25em 0;
07padding: 0.25em 40px;
08line-height: 1.45;
09position: relative;
10color: #383838;
11border-left:3px dashed #c1c1c1;
12background:#eee;
13}
14 
15blockquote cite {
16color: #999999;
17font-size: 14px;
18display: block;
19margin-top: 5px;
20}
21  
22blockquote cite:before {
23content: "\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.
Blue background and white font blockquote example
01blockquote {
02font-family: Georgia, serif;
03font-size: 16px;
04font-style: italic;
05width: 450px;
06margin: 0.25em 0;
07padding: 0.25em 40px;
08line-height: 1.45;
09position: relative;
10color: #FFF;
11border-left:5px solid #FF7F00;
12background:#4b8baf;
13}
14 
15blockquote cite {
16color: #efefef;
17font-size: 14px;
18display: block;
19margin-top: 5px;
20}
21  
22blockquote cite:before {
23content: "\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.
Importing Google Web font in CSS for Blockquote
01blockquote {
02@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400italic);
03font-family: 'Droid Serif', serif;
04font-size:16px;
05font-style:italic;
06width:450px;
07background-color:#fbf6f0;
08border-left:3px dashed #d5bc8c;
09border-right:3px dashed #d5bc8c;
10text-align:center;
11}
12blockquote cite {
13color: #a1a1a1;
14font-size: 14px;
15display: block;
16margin-top: 5px;
17}
18  
19blockquote cite:before {
20content: "\2014 \2009";
21}

6. Round Corner Blockquote

In this example we have blockquote with rounded corners and we have used drop shadow for borders.
Round corners blockquote
01blockquote {
02width: 450px;
03background-color: #f9f9f9;
04border: 1px solid #ccc;
05border-radius: 6px;
06box-shadow: 1px 1px 1px #ccc;
07font-style: italic;
08}
09blockquote cite:before {
10content: "\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.
Adding CSS Gradient as background for Blockquote
01blockquote {
02width: 450px;
03color:#FFF;
04background: #7d7e7d; /* Old browsers */
05background: -moz-linear-gradient(top#7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
06background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
07background: -webkit-linear-gradient(top#7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
08background: -o-linear-gradient(top#7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
09background: -ms-linear-gradient(top#7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
10background: linear-gradient(to bottom#7d7e7d 0%,#0e0e0e 100%); /* W3C */
11filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
12border: 1px solid #ccc;
13border-radius: 6px;
14box-shadow: 1px 1px 1px #ccc;
15font-style: italic;
16}
17blockquote cite:before {
18content: "\2014 \2009";
19}

8. Blockquote with Background Pattern

In this example we have used a background image as pattern for blockquote.
CSS blockquote with background image pattern
01blockquote {
02width: 450px;
04border: 1px solid #ccc;
05box-shadow: 1px 1px 1px #ccc;
06font-style: italic;
07}
08blockquote cite:before {
09content: "\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.
Adding multiple background images in blockquote using CSS
01blockquote {
02width: 450px;
04border: 1px solid #ccc;
05box-shadow: 1px 1px 1px #ccc;
06font-style: italic;
07}
08blockquote:before{
09position:absolute;
10margin-top:-20px;
11margin-left:-20px;
13}
14blockquote cite:before {
15content: "\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.

No comments:

Post a comment

Silahkan Komen Rider,