Here is my pure CSS implementation of simple blockquote style, based on this article.
I will explain every line of CSS being used as CSS comments - you will need most of them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| blockquote {
font-size: 0.9em; /* quoted text will be slightly smaller than a paragraph */
font-style: italic; /* quoted text will be italic, change this to suit your needs */
margin: 10px 0; /* 10px margin at top and bottom, to separate multiple quotes, or single quote from the rest of content */
padding-left: 60px; /*quotes will be indented by 60px from the left */
position: relative; /*this is needed for absolute positioning of the quote symbol - see below */
}
blockquote:before { /* before each quotation, we will have a big double quote symbol */
font-family: Georgia, serif; /* quote symbol from this font looks nice to me, use any font family you like */
font-size: 80px; /* we need a big quote symbol, this one looks big enough to be noticeable */
content: "\201C"; /* this is a "left double quotation mark" - see below link */
position: absolute; /* needed for proper positioning of the quote symbol */
left: 15px; /* adjust this to move the quote symbol horizontally */
top: -10px; /* adjust this to move it vertically */
color: #7a7a7a; /* quote symbol is a shade of grey color, use a different color to suit your theme */
}
blockquote cite {
font-style: normal; /* parent blockquote is italic, my cite text is just using normal font style */
display: block; /* seems like by default cite element is inline, so this is to make right text-align work */
text-align: right; /* Yeah, I want my cite to be right aligned */
}
blockquote cite:before { /* every cite will begin with that */
content: "\2014 \2009"; /* "em dash" + "thin space", */
}
|
Works in as low as IE8. IE7 is still okay, just not showing the quote symbol.
Here is some information about embedding symbols in the content property of CSS:
http://brajeshwar.github.io/entities/
(in case you decide to choose different symbols for decoration)
Sample usage:
1
2
3
| <blockquote>Something famous
<cite>Somebody famous</cite>
</blockquote>
|
For the above style I figured that a single paragraph blockquote works just fine.
For multiple paragraphs, you need to introduce P tags starting from the second paragraph, i.e. p#1 goes without any tags.
Here is what I mean:
1
2
3
4
5
| <blockquote>paragraph1
<p>paragraph2</p>
<p>paragraph3</p>
<cite>Somebody famous</cite>
</blockquote>
|
