CSS3 is the new CSS kid on the block currently being drafted up by W3C. Here I list some of the most important changes I think will have the most impact on the future of web development!

1) The box-shadow property

Top of my list and many others, is the box-shadow property. This property enables the developer to add a drop shadow effect to an element. Simply by indicating a color of your choice, the horizontal offset which defines how much to the left or right you want the shadow, the vertical offset which defines how far upwards or down you want the shadow, and a blur radius which defines how deep or razor-sharp you want the shadow to be. The great thing about this result is that as it is rendered by the internet browser and not pre-rendered in an image Therefore it can be taken on elements which are animated using jquery – the shadow is animated to!

2) Typically the Border-radius property

This property is fantastic as it allows you to ultimately give your elements round corners. Simply provide a numeric measurement to define how large you want the radius to be. Each corner of your aspect can be individually identified. The rounded corners should also be reflected in the drop shadow if one is specified.

3) Web Fonts with @font-face

This is not strictly a CSS3 implementation I will admit as @font-face was already part of CSS2. On the other hand the exciting part is that developers will be able to specify OpenType and TrueType fonts use with their websites instead of being restricted to Embedded OpenTypes. To get this done you would refer to a font of your choice hosted on the internet (you can look for great resources by googling ‘font face fonts’). You may then use these fonts somewhere else in your CSS font-family styles. This finally clears the way and gives a breath of fresh air to the typography of the internet.

4) The text-shadow property

Certainly one of my favorite new options is the text-shadow property. This works much like the box-shadow property as you provide a color, two offsets and a radius. Like a lot of effects I would recommend being very subtle with this to achieve maximum impact. Making use of this with web site lends a lot of power to CSS without the need for Photoshop.

5) background color gradients

Specifying gradient background effects for elements is again, very beneficial. This is another area where Photoshop can now be bypassed in a lot of situations and hence enhancing your website size. An individual can specify a left to right, right to left, top to bottom, bottom to top or radial gradients to load the backdrop of a component, from one color to another. Again, being delicate with effects like this is vital for maximum impact.

6) The opacity property

The opportunity to control the opacity of an aspect is probably one of the much anticipated and widely used effect used today, where possible. By providing a number between 0 and 1 or a percentage, you can control how ‘translucent’ you wish your element, and their children, to be. Typically the effect being you can see the elements beneath it.

CSS3 is an exciting and welcome development in the web development community. Making use of the above effects which are widely supported across the most recent, popular browsers, likely to be working more efficiently and effectively!

Share it with your friends

Facebook

Twitter

Linkedin