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.
JPatti is right. This method does not work with IE8. It looks great in Firefox though. Any ideas?
Another thing is that when searching for a good on the web electronics store, look for online stores that are regularly updated, trying to keep up-to-date with the most current products, the most effective deals, and also helpful information on goods and services. This will ensure that you are doing business with a shop that really stays atop the competition and offers you what you ought to make knowledgeable, well-informed electronics expenditures. Thanks for the essential tips I have really learned through your blog.
These are really stunning, there are even some sites that are new to me. All the colour schemes complex 41are definatly brave but I really think they work to make the sites eye catching and engaging.
TFS your site’s design shares a very nice thank you
Everything was very nice great wonderful color matching shares
How use Quotations in CSS
http://www.handycss.com/tips/adding-quotations-using-css/
The closing date is May 2012 right ?
definitely, a BIG BIG deals.thx, for article
Nice article!
What also worked for me was:
#id a {
padding-left: 18px;
text-indent: -18px;
line-height: normal;
display: block;
}
#id a:before {
content: open-quote;
}
#featured a:after {
content: close-quote;
}
This doesn’t require images.
“#featured a:after” ofcourse has to be “#id a:after” in this example.
only shows the bottom quotation mark tho.. this is the third tutorial i’ve seen but i see the samples working fine on each website except when i place it on mine. im using IE8 at this pc and tried compatibility mode and still the other image doesnt show..
how do you make the command on “blockquote:first-letter { ” work? other sites suggested
blockquote span {
-OR-
blockquote div {
but still only the ones inside the code “blockquote {” shows..
any help would be appreciated. thanks!
Nice blog here! Also your web site loads up very fast! What host are you using? Can I am getting your affiliate hyperlink on your host? I desire my website loaded up as fast as yours lol
Awesome quotes !
Servante occupation, Celine Bags http://celine-bags-118.webs.com propre, envoi rapide, domestique adresse Exellent !!!