Monday, August 8, 2011

blockqoute with first-letter in css3

This CSS3 tutorial will show you how to create Blockqoute with first-letter. First apply open quote background on Blockquote then apply close quote background to the first-letter.

Cras vestibulum ante vel tellus feugiat in convallis purus iaculis. Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium felis vulputate.

1. CSS
<style type="text/css">
blockquote.qoute {
 font: 14px/28px arial;
 width: 400px;
 background: url(close-quote.gif) no-repeat right bottom; 
 text-indent: -18px;
}
blockquote.qoute:first-letter {
 background: url(open-quote.gif) no-repeat left top;
 padding-left: 18px; 
}
</style>
2. HTML
<blockquote class="qoute">
Cras vestibulum ante vel tellus feugiat in convallis purus iaculis.
Donec eu auctor felis. Nullam gravida libero vitae dui varius id pretium
felis vulputate.</blockquote>

No comments:

Post a Comment