.::. Vuthy Sok .::. Web Developer

Create a simple CSS3 folded-corner effect without images. It works well in all modern browsers and is best suited to designs with simple color backgrounds. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. <style type="text/css"> blockquote.qoute { font: 14px/28px arial; background: #97C02F; color: #FFFFFF; margin: 2em auto; overflow: hidden; padding: 1em 1.5em; position: relative; width: 480px; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 20px 80px -20px rgba(0, 0, 200, 0.3) inset; }...

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>