This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.
1. HTML source code
Start with a blockquote and some text.
<blockquote>Hello, I am a double quote...</blockquote>
2. Specify blockquote
Specify blockquote element as follow:
blockquote {
font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
width: 400px;
background: url(images/close-quote.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}
The CSS code above will display the close-quote.gif graphic background at bottom right corner. The padding-left and text-indent will create a hanging indent of -18px. It will look like this:
3. First letter of blockquote
Now add 18px left padding to the first-letter of blockquote. This will make the text align together. Then display the open-quote.gif at top left corner. Note I made the first letter in different font styles just to look nice.
blockquote:first-letter {
background: url(images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
Pullquote style
If you want to make a pullquote, simply specify the blockquote float left or right. View my pullquote sample.
btw. it’s not necessarily but you should use block elements inside your blockquote, like for example
shit… like for example:
That’s a great idea. I wanted to do this before, and when I saw this article I almost slapped myself. So obvious, yet so clever. Nice work.
Thank you so much! Perfect Tutorial!
I Quite agree with Ankur on this tutorial. Ingenious, and i can’t believe that I did not think of how to do this myself.
Ludwik is right (I can imagine what his examples would have looked like).
According to the w3c, under a strict doctype blockquote is for long quotations (block-level content). Unless you’re using a transitional doctype, text should not be placed directly inside a blockquote element without block-level tags surrounding it. Therefore, if the blockquote is marked up correctly, the method of using
:first-letterunfortunately won’t work.The only solution I can think of is perhaps applying the bottom-right background image to the blockquote itself and the top-left background image to
blockquote p. All you’d have to do then is cancel out the top-left background image for any subsequent paragraphs, using something likeblockquote p ~ p { background: none; }.The same technique could be used for the drop-cap:
blockquote p:first-letter { font: italic 1.4em Georgia; }blockquote p ~ p:first-letter { font: normal 1.2em Georgia; }.You might run into some trouble when quoting content other than straight-forward paragraphs though (such as a list). Hope that helps.
Good tutorial, very simple but very effective.
Thanks
Good example, but this doesn’t work in IE 6, does it?
Good, but useless in production work since it doesn’t work in IE6.
Stavanger and Wolf:
Sure, it works in IE 6. I tested in IE6, IE7, Opera, Firefox, and Safari.
Thanks for the confirmation Nick. I asked the question because IE 6 doesn’t support child selectors (>), not even :hover outside of link. This thread http://archivist.incutio.com/viewlist/css-discuss/21459 also discuss some interesting stuff. It looks like IE6 support fo :first-letter is off and on, I’ll take a look next time I have a change bootcamping.
You can also use this css:
blockquote p:before {
content: open-quote;
}
blockquote p:after {
content: close-quote;
}
This will only work in a modern Browser but it’s nice and quite simple. You can also use additional CSS to style the quotes. E.g. a bigger font size or an other color. take a look
Steffen:
Thanks for your input. Unfortunately IE doesn’t support CSS selectors.
@Nick: That wont matter when IE’s market share drops below 10%… I long await that day *sniff*
What a great idea. Thanks for the tutorial, I will start using this in my current project. I owe you one :)
You’re welcome.
I know IE sucks in this (and many more other) matter. In this case you should use conditionals comments or (css)hacks.In fact the example above is a great way for a standard conform web browser. IMHO.
This is a nice technique, but unfortunately of no use to me if it doesn’t validate. On a related note, I put together a pull-quote design showcase that you might be interested in.
Hello Nick.
I see some bug.
The Close button ( X ) don’t transparent. Test on IE6 and MyIE.
And in Opera 8.5 im don’t see the title “Simple Double Quotes” and post “This CSS tutorial will show you how …” to first textarea.
first..congrat on the opening nick :)
been looking for the double quote css trick some times now..thanks
checking out your other post now ;)
Personally I use two images, because many browsers (first IE) not support yet this css features: first-letter, text-tranform, before, after, etc…