Stylish Blockquote
- 5 Comment
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.
5 Comments on this post
Trackbacks
-
TheAnand said:
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.
June 9th, 2008 at 1:23 am -
Sajith M.R said:
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
June 9th, 2008 at 1:28 pm -
TheAnand said:
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…
June 9th, 2008 at 3:33 pm -
rajesh n said:
that was really terrific.
rajesh n
http://masterandstudent.blogspot.comSeptember 5th, 2008 at 7:50 pm -
David said:
I tried it but it didn’t look too good on my site.Although I do like the top blue and green quote images.
October 4th, 2008 at 11:18 am
