Saturday 19th April 2008
by Sajith M.R
The tag blockquote in html has a special beauty than any other tags by default. And when you use blockquote in your post, it gets more meaning than merely a text.
Then what will happen if you make your blockquote more stylish.
See my blockquote below:
There are 10 kinds of people in this world….Those who understand binary and those who don’t “
How i made this type of blockquote is simple. Add the following text to your style sheet.
blockquote:first-letter {
background: url(http://www.sajithmr.com/downloads/quote-left.png) no-repeat left top;
padding-left: 45px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
blockquote p:first-letter {
background: url(http://www.sajithmr.com/downloads/quote-left.png) no-repeat left top;
padding-left: 45px;
font: 3.4em Georgia, "Times New Roman", Times, serif;
}
blockquote {
font: 1.3em Georgia, Times, serif;
color: #555555;
}
the second block in not necessary. Some blogs automatically add P tag after blockquote , thats why i used blockquote “p”.
Download the file http://www.sajithmr.com/downloads/quote-left.png and save locally, (if you want) and you can change the quote picture according to your blog style.
Tags: , blockquote, html, style sheet, stylish
I tried it but it didn’t look too good on my site.Although I do like the top blue and green quote images.
that was really terrific.
rajesh n
http://masterandstudent.blogspot.com
I used the quote code from another CSS file and it worked. the site in question is t.hink.in But now I only want to make the quote look better and first letter BIg…
It might be due to overriding of this class by any previously declared blockquote style sheet object. Remove all other blockquote definition from your css if there is any thing already.
Sythoos
It does not work on my blog…maybe cuz i tried to hotlink the image? I used the web dev. toolbar for fx to try it out.