Jul 29
Simple Double Quotes
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.
30 Artistic Flash Sites Illustrating the Flower Pattern
Comments
Pages: 9 8 7 6 5 4 3 2 1 » Show All
There are 86 comments (+Add)
Pages: 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
86 bob
February 4th, 2010 at 10:00 pm
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.
85 Hugo
January 10th, 2010 at 7:55 pm
well i think there is 1 problem, small but, i can’t select the first leter.. :/
84 Ashley Farrand http://www.farrdesign.net
January 5th, 2010 at 1:52 pm
Thank you so much! This saved me.
83 Chelny http://ohsix2twice.tumblr.com/
December 27th, 2009 at 9:58 pm
thanks thanks thanks!!!
Nice blog layout by the way
82 Keith Davis http://easypublicspeaking.co.uk/
December 16th, 2009 at 3:33 pm
Once again I am a little wiser…blockquote.
Nice simple CSS coding example, I’m sure I shall use it in the future.
81 Steve http://totalfmc.com
November 11th, 2009 at 8:00 am
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.
80 Mike http://www.comastore.com
October 31st, 2009 at 4:14 am
Great tut, thank you
79 panel radyatör http://www.emkoisi.com
October 24th, 2009 at 8:52 am
thasnk so much
78 prabhu http://codinggeek.com
October 19th, 2009 at 2:26 am
i luv u for this Technique…. Useful Tips.
77 Cyrus
September 21st, 2009 at 12:31 pm
Great , Simple Double Quotes
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com