Jul 27, 2007
Background Quote Marks
Jul 27, 2007
Introducing new quote style to our blog...
It's better to regret something you did than something you didn't do.
Cool, eh?
I use this CSS to style the blockquote element:
blockquote {
width: 320px;
margin: 0;
padding: 0;
font-size: 150%;
line-height: 1em;
text-align: center;
color: #555;
background: #eee url(http://www.anassirk.com/files/quote_top.gif) no-repeat top left;
}
blockquote .quote {
margin: 0 10px 0 0;
padding: 20px 10px 10px 20px;
line-height: 1em;
background: url(http://www.anassirk.com/files/quote_right.gif) no-repeat right bottom;
}
blockquote .author {
margin: 0;
padding: 0 0 10px 0;
color: #999;
font-size: 60%;
background: url(http://www.anassirk.com/files/quote_bottom.gif) no-repeat bottom;
line-height: 1em;
}
and the html is just a <blockquote> with a <p> with class="quote" and a <p> with class="author"
source: Web Standards Solutions:
The Markup and Style Handbook
Well, I've just seen the style on IE6 ... it's not quite right. (I'm using Firefox)
I'll figure that out later ...
3 comments:
Nice styling.
If you are interested, I put together a little tutorial/demo that uses js to make a tooltip to show the title attibute of the block quote and a link to the cite attribute.
http://willcode4beer.com/tips.jsp?set=blockquoteHover
That way, visitors to your site can visit the site being blockquoted (is that a word?).
Let me know what you think. I know it doesn't look the best (see what happens when you get an engineer to do design) but, re-styling should be pretty straight forward.
ahh, that's a good one, I think.
Maybe I'll try it on some of my quotes. Thank you!
nice, i just added tons of some other new emo backgrounds at my blog
http://www.emo-backgrounds.info
Post a Comment