Why Every Designer Should Start Loving CSS3?

CSS3 is "Cascading Style Sheet version 3", CSS3 comes with all the latest and best features that can lead any designer and front-end developer to fall in love with it. All though CSS3 is not fully supported by all the browsers but we can start using its features and make our users to move towards the new technology.

Top 4 Property that can convince you to use CSS3 NOW:-

1) Rounded-Corners
All designers’ most lovable effect is to use rounded corners. But when it comes to the SEO-friendly website or number of image restrictions designers have to make the less use of the rounded corners. But thanks to css3 without any image or plug-in by just writing css3 we can achieve the rounded corners in a click.

e.g.:
#box{
border:5px solid red;
-webkit-border-radius:5px;
-moz-border-radius:5px;}

So, now designers don't need to compromise on there creativity any more, without taking worry of the images and SEO issues.

2) Text-Shadow
Designers love to give the shadows to the Heading, Subheading or sometime text to make that standout and then the fight between the SEO and designers starts. As SEO people want the content to be pure text rather than images based as that effect the SEO of page. So, as always designers have to drop the text shadows.

But thanks to CSS3 to understand designer problem and gave us the property “text-shadow” where we can give the shadow without using any image and plug-in

e.g.:
h1{
Color:#000000;
text-shadow:0px 1px 1px #cccccc;}

Syntax text-shadow: x-axis y-axis feathering color

The Best thing about this property is that we can use multiple shadows on one text.

3) Box-Shadow
Same as text-shadow…we can give shadows to the boxes and images too by using CSS3 box-shadow property

e.g.:
#box{
Color:#000000;
-mox-box-shadow:0px 1px 1px #cccccc;
-webkit-box-shadow:0px 1px 1px #cccccc;}

Syntax box-shadow: x-axis y-axis feathering color

4) Gradients
Design is incomplete without using the gradients, weather it’s the button or banner or just a simple background effect. From so many years designers are used to use linear gradient and know all the tricks to handle that. But because of the again seo funds and image restrictions we have to drop it but now CSS 3 comes with gradients that we can achieve purely by css coding no image, no plug-in.

e.g.:
#box{
Background:-moz-linear-gradient(top, #fffff 0%, #000000 100%);
Background:-webkit-linear-gradient(linear, left top, left bottom, from
(#ffffff), to(#000000));
}