10 Awesome CSS3 Features which makes designers dreams come true.

In this post i will share about some CSS3 basic properties. Today is the day for which i am always waiting for. By using this properties we can make some awesome effect instantly with small amount of code such as Border Radius,Box Shadow,Text Shadow,Text Stroke,Linear Gradient, Radial Gradient,Rotate,Reflection,Resize,Outline etc. So here i tried to explaing them in a sort way. Hope it will helps you.

1. Border Radius

Earlier we used to use images to get border radius, which is bit a long procedure and lots of codes are needed to complete this. But now with CSS3 Border Radius Property we can do it in second. View alos css curve button

Code #border-radius { width: 200px; height:100px; background-color:#398ebe; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

Demo

Browser Support : Firefox 3+, Chrome 4+, Safari 3.1+

2. Box Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code #box-shadow { width: 200px; height: 150px; background-color:#398ebe; -webkit-box-shadow: #244766 5px 5px 10px; -moz-box-shadow: #244766 10px 10px 10px; box-shadow: #244766 10px 10px 10px; }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

3. Text Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Code #text-shadow { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:50px; color:#398ebe; text-shadow: #555 3px 3px 3px; -webkit-text-shadow: #555 3px 3px 3px; -moz-text-shadow: #555 3px 3px 3px; box-text: #555 3px 3px 3px; }

Demo

Browser Support : Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+

4. Text Stroke

This is the new property of CSS3 which gives stroke/outline to Text. Here we will use syntax as text-fill-color for color of text, text-stroke-color which gives color to the stroke and text-stroke-width for width of stroke/outline.

Code #text-stroke { font-family:Arial, Helvetica, sans-serif; font-size:50px; font-weight:bold; -webkit-text-fill-color: #398ebe; -webkit-text-stroke-color: #000000; -webkit-text-stroke-width: 2px; }

Demo

Browser Support : Chrome 2+, Safari 4+

5. Linear Gradient

Linear Gradient gives a gradient to any HTML elements. View also css gradient button for more details.

Code #linear-gradient { width: 200px; height: 150px; /* For Firefox */ background-image: -moz-linear-gradient(top, #83cbf4, #d1ecfa); /* For Safari/Chrome */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1ecfa),color-stop(1, #83cbf4)); }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

6. Radial Gradient

This CSS3 Property gives a radial gradient to any selected element of XHTMl. Visit Webkit and Gecko for more detail on this property.

Code #radial-gradient { width: 200px; height: 150px; /* For Firefox */ background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #d1ecfa 10%, #83cbf4 70%); /* For Safari/Chrome */ background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#d1ecfa), to(#83cbf4)); }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

7. Rotate

This CSS3 Property allows any html element to rotat

Code #rotate { width: 200px; height: 150px; background-color:#398ebe; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); }

Demo

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

8. Reflection

This CSS3 Property allows reflection of text or boxes.

Code #reflection { font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:18px; color: #398ebe; -webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4))); }

Demo

Browser Support : Chrome 2+, Safari 4+

9. Resize

This CSS3 Property allows resizing of box on horizontal, vertical and both axis.

Code #resizing { width: 200px; height: 100px; border:1px solid #398ebe; overflow: hidden; resize: both; }

Demo

Browser Support : Chrome, Safari

10. Outline

When we style any element with outline then we can have a outline specified with offset to that particular element. Suppose we want to have an outline which is 5px away from the element box then we use outline property.

Code #outline { width: 200px; height: 150px; background-color:#398ebe; outline: solid 1px #398ebe; outline-offset: 5px; }

Demo

Browser Support : Firefox, Chrome, Safari