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.
Thanks for great code, just what I was looking for. But I must be doing something wrong as it works perfectly on Safari browser on Mac and PC and Google Chrome on a PC, but on FireFox and IE on both Mac and PCs the open-quote graphic and first-letter code don’t show.
Any ideas where I went wrong here http://totalfmc.com
Thanks in advance.
Once again I am a little wiser…blockquote.
Nice simple CSS coding example, I’m sure I shall use it in the future.
thanks thanks thanks!!! :)
Nice blog layout by the way :)
Thank you so much! This saved me.
well i think there is 1 problem, small but, i can’t select the first leter.. :/
Steve – get rid of the paragraph tags within the blockquote and it will work.
It doesn’t work in IE8 though as the closing blockquote background rules get overwritten by the first-letter rules – works fine in compatibility mode though.
It works but it’s not the solution when you have to quote a dynamically generated text. The problem is the closed quote that can overlap the ending letters of your text.
Try to quote this text in your example page:
Hello, I’m a gggg gggg ggg beautiful pullquote, hfghssf hgd dgdgd sdsds sdsdsds sdsdsds sdsds
(I use FF 3.6)
thanks so muck
Thanks for info. aku mau coab dulu, mudah-mudahan berhasil
What do you mean by getting of the paragraph tags within the blockquotes? Could you give examples? Thanks! (:
It works fine.
Thank you.
Included it in my frontend framework.
The same problem like Hugo has: I cannot style the first:letter. There is no other blockquote definition in my styles.
Ummm, if this works – then why is your example an image dump!
Thank you so much ..
You are very cool
thank you so much for sharing :p
I think type of site that is useful
Share admin thans a lot for sharing a very successful.
admin thanks for this website
I always follow your site thank you
Nice trick with first-letter css. But if you change your text content (just one more single character at the end of your example text) you’ll see it is over the closing quotation symbol. I think a padding-right will be good.
I’m not sure is it possible to use something like last-letter? I’m looking for something like that which will place the ending quotation right after the end of last letter and not at the right-bottom of the blockquote box.
Thanks
Adnan