CSS Blockquotes

I figured I’d share two ways I’ve done blockquotes on this site.
Here is the HTML being used

<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet quam. Sed quis justo scelerisque dui iaculis euismod. Nunc sit amet lectus ac orci placerat pulvinar?</p></blockquote>

The first is from the original design the site had.
old blockquote

In this one I just use 2 images for the quotes, but no extra div for the closing quote, because I use the last-child pseudo-class.


blockquote {
margin:1.5em;
padding:5px 40px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:url(images/quotation_marks.gif) no-repeat left 5px;
color:#717f53;
min-height:30px;
}
blockquote p:last-child {background:url(images/quotation_marks_close.gif) no-repeat right bottom;}/*css3*/


The second is the one I use on the site right now. Instead of using images, I just use the css content property and set the value to open-quote for the before pseudo-class and close-quote for the after pseudo-class. I also add css rounded corners for some extra styling.


blockquote p {
padding:10px;
margin:10px;
}
blockquote:before, blockquote:after {
display:block;
cursor:default;
line-height:1em;
font-weight:bold;
font-size:1.6em;
color:#000;
font-family:Georgia, 'Times New Roman', serif;
}
blockquote:before {
content:open-quote;
}
blockquote:after {
text-align:right;
content:close-quote;
}
blockquote {
margin:20px;
padding:10px;
border:1px solid #eee;
line-height:1.4em;
color:#918e95;
-moz-border-radius:5px; -webkit-border-radius:5px;/*css3 rounded corners*/
}

This CSS may not work in older-browsers, but if the blockquote is indented with a border or set to another color, it should stand out enough to be ok.

Tags: , ,

Comments 1-4 of 4 to “CSS Blockquotes”

  1. 1 · Andrew says:

    Check out my technique here: http://burdongrange.co.uk/
    It doesn’t use images, and the quotes stay with the text rather than their container. It also resizes really nicely. Doesn’t rely on css3 either.

  2. 2 · Mike Rundle says:

    Nice technique! I’m not sure I’ve seen last-child used in such a way, very smart though. Good stuff.

  3. 3 · Sabogal says:

    Llevo tiempo buscando por la red como modificar el aspecto de los Tags en WordPress, ¿alguna sugerencia?

    Saludos

    Google Translate Spanish » English
    I’ve been looking for the network time as modify the appearance of the Tags in WordPress, does any suggestions?

    Greetings

  4. 4 · Stevie G says:

    Great work!

Leave a Comment

Comments are reviewed before publishing to prevent spam.