.::. 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>

W3Schools offers a comprehensive CSS3 reference: http://w3schools.com/css3/default.asp CSS3.Info contains tons of great articles on the newest CSS3 stuff: http://www.css3.info/ Pixel2Life offers a ton of tutorials: http://www.pixel2life.com/tutorials/css_stylesheets/ Check out Good-Tutorials for more CSS tutorials: http://www.good-tutorials.com/tutorials/css NetTuts+ has a lot of great articles and tutorials on CSS3: http://net.tutsplus.com/?s=css3

::selection { background: #ffb7b7; /* Safari */ } ::-moz-selection { background: #ffb7b7; /* Firefox */ }

Supporting Browsers: Apple Safari 3, Firefox 1, Google Chrome 1 CSS3 Mozilla WebKit border- top-right-radius -moz-border- radius-topright -webkit-border- top-right-radius border- bottom-right-radius -moz-border- radius-bottomright -webkit-border- bottom-right-radius border- bottom-left-radius -moz-border- radius-bottomleft -webkit-border- bottom-left-radius border- top-left-radius -moz-border- radius-topleft -webkit-border- top-left-radius border- radius -moz-border- radius -webkit-border- radius Here is example for Rounded Corner in CSS3 <div class="content-box"> <h2>Four Corners</h2> <p>This box has all corners rounded.</p> </div> <style type="text/css"> .content-box { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #AFAFAF; border-radius: 5px 5px 5px 5px; height: 200px; margin: 10px auto 0; width: 600px; } </style>

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature. Here’s a basic example: This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background (aligned to the top-left corner). <div class="examplemultiplebackgrounds"> <p>This box has two background images, the first a balloon (aligned to the top and center) and the second a grass and sky background (aligned to the top-left corner).</p> </div> <style type="text/css"> div.examplemultiplebackgrounds { width: 446px; height: 395px; background-image: url(images/balloon-orange.png), url(images/landscape.jpg); background-position: ...

Beginning August 1, 2011, we’ll support the current and previous major releases of Chrome, Firefox, Internet Explorer and Safari on a rolling basis. Each time a new version is released, we’ll begin supporting that version and stop supporting the third-oldest version. Learn more about supported browsers for Google Apps in the Google blog post .