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. 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: <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: <blockquote>paragraph1 <p>paragraph2</p> <p>paragraph3</p> <cite>Somebody famous</cite> </blockquote> |
Tech Blog >