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: 10 9 8 7 6 5 4 3 2 1 » Show All
There are 99 comments (+Add)
Pages: 10 9 8 7 6 5 4 3 2 1 » Show All
Loading ...
99 Cöp Konteyner http://www.dehacopkonteyner.com
August 28th, 2010 at 8:53 am
I always follow your site thank you
98 Buz http://www.isbet.com.tr/
August 23rd, 2010 at 7:08 am
admin thanks for this website
97 Haliyikama http://www.billurhaliyikama.com/
August 21st, 2010 at 8:43 am
Share admin thans a lot for sharing a very successful.
96 hurdaci http://www.gunduzmetal.com
August 20th, 2010 at 10:38 am
I think type of site that is useful
95 eka http://ekas0615.student.ipb.ac.id
July 16th, 2010 at 1:38 pm
thank you so much for sharing :p
94 Progs4u http://www.progs4u.net
July 6th, 2010 at 11:07 pm
Thank you so much ..
You are very cool
93 Chris
June 10th, 2010 at 11:13 am
Ummm, if this works - then why is your example an image dump!
92 Ramona http://www.hapkemedia.com
June 7th, 2010 at 6:33 am
The same problem like Hugo has: I cannot style the first:letter. There is no other blockquote definition in my styles.
91 Catalin C. http://softpedia.com
May 29th, 2010 at 9:04 am
It works fine.
Thank you.
Included it in my frontend framework.
90 Michelle
May 17th, 2010 at 10:50 pm
What do you mean by getting of the paragraph tags within the blockquotes? Could you give examples? Thanks! (: