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
There are 51 comments (+Add)
Post Your Comments
Flash CS3 Components from FlashloadedSpeed up your Flash development with easy to use Flash Components: Menus, Slideshows, FLV Player & more!
Loading ...
51 fr http://www.mac2work.com
April 28th, 2008 at 2:39 am
with the element, specifying the language, you will obtain a more simplistic quote symbol. It is not as nice looking but it is coherent with accessibility principles and visual agents.
50 unitechy http://unitechy.com
March 17th, 2008 at 10:52 am
thanks will use this ..its great
49 Vidanjör http://www.berismakina.com/
March 5th, 2008 at 4:30 am
How about you use
?
I thought that was the way you were supposed to do it in XHTML?
48 David Jacques-Louis http://www.moleskinsoft.com
February 23rd, 2008 at 6:35 am
Will use on my site for sure.
47 sunrise
February 20th, 2008 at 7:54 pm
it’s cool, thank you for this site!
46 Aisyah http://aisyahrozi.com
February 15th, 2008 at 2:20 am
hmm.. this method works. but what it doesnt work with
<blockquote><p> text here</p></blockquote>
any idea?
45 TheSites http://www.metacafe.com/channels/thesites
February 7th, 2008 at 9:44 pm
Nice, I’ve used this with other images then the quotes. Very good way to make something stand out.
44 Robert http://www.bigspot.net/
February 3rd, 2008 at 2:57 pm
There is actually a problem implementing your method when the image is bigger then the font, although this can be fixed by giving a bigger font, i think it’s not recommended. The other bigger problem i see is when the last letter is not in the end of the line so the last ending quote wont be near it. The best solution i could come up and it works in FF2 and IE7 is just use:
blockquote {
margin: 15px 15px 0 15px;
padding-right: 30px;
background: url(images/blockquote_end.gif) no-repeat bottom right;
}
blockquote p {
background: url(images/blockquote_start.gif) no-repeat top left;
padding-left: 35px;
}
so 2 images are used. But it would cause problems if there are 2 paragraphs in a 1 blockquote…
43 Ryan Kelly
January 26th, 2008 at 5:14 pm
hmm.. How about you use <blockquote><p>Some text here</p></blockquote> ?
I thought that was the way you were supposed to do it in XHTML?
42 Hakan http://www.kwebtasarim.net
January 19th, 2008 at 2:52 pm
very good thanks