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: 8 7 6 5 4 3 2 1 » Show All
There are 74 comments (+Add)
Pages: 8 7 6 5 4 3 2 1 » Show All
Post Your Comments
Loading ...
74 Ben http://twincircuits.com
June 6th, 2009 at 12:38 pm
Hey, what happened to the content: open-quote; property?
Oh well.
73 The Bible Post http://www.thebiblepost.com
May 28th, 2009 at 2:29 am
This is exactly what I have been looking for. Thank you!
72 Jasmeet
April 27th, 2009 at 7:47 am
very nice technique…
71 Natalie
April 22nd, 2009 at 12:13 am
Thanks you
70 tacohell
April 15th, 2009 at 10:35 pm
i luv u for this tut
69 Odwa
February 25th, 2009 at 4:01 am
i am using a text box type of field in a details view, now when i’m typing “1″ it changes to “&qoutes 1 &qoutes” now i want to fix that.
68 live dealers casino
January 30th, 2009 at 3:20 am
I really, truly am glad I found this site. It has answered so many questions for me. I will be back. Thank You
67 Eric Martindale http://www.ericmartindale.com
December 31st, 2008 at 11:58 am
Great tutorial, but what happens when you want to use the following code:
text-align: justify;…to justify the contents of the blockquote? I’m noticing that the hanging indent changes are causing the first word to sometimes overlap the contents of the sentence (Google Chrome 1.0.154.36).
Any idea on how to prevent that from happening?
66 ntas http://www.kalicido.com
November 26th, 2008 at 5:53 pm
thank’s for share our
65 walson ma
November 5th, 2008 at 11:09 pm
Your web page ’s design look very good. I learn a lot of things from your web site. Thank you