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 will allow the developer to add a drop shadow effect to an element. Simply by specifying a colour 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 up or down you want the shadow, and a blur radius which defines how deep or sharp you want the shadow to be. The great thing about this effect is that as it is rendered by the browser and not pre-rendered in an image Therefore it can be used on elements which are animated using jquery - the shadow is animated to!
2) The Border-radius property
This property is fantastic as it allows you to finally give your elements rounded corners. Simply provide a numeric measurement to define how large you want the radius to be. Each corner of an element can be individually defined. 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. However the exciting part is that developers will be able to specify OpenType and TrueType fonts for use in their websites instead of being restricted to Embedded OpenTypes. To do this you would refer to a font of your choice hosted on the internet (you can search for great resources by googling 'font face fonts'). You can then use these fonts anywhere else in your CSS font-family styles. This finally opens the door and gives a breath of fresh air to the typography of the internet.
4) The text-shadow property
One of my favourite new options is the text-shadow property. This works much like the box-shadow property as you provide a colour, two offsets and a radius. Like a lot of effects I would recommend being very subtle with this to achieve maximum impact. Using this with web fonts lends a lot of power to CSS without the need for photoshop.
5) background colour gradients
Specifiying 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 improving your website size. You can specify a left to right, right to left, top to bottom, bottom to top or radial gradients to fill the background of an element, from one colour to another. Again, being subtle with effects like this is key for maximum impact.
6) The opacity property
The ability to control the opacity of an element is probably one of the most 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 its children, to be. The effect being you can see the elements beneath it.
CSS3 is an exciting and welcome development in the web development community. Using the above effects which are widely supported across the most recent, popular browsers, you'll be working more efficiently and effectively!
The author of this article is a freelance web designer who provides professional Web Design in Kent.
Article Source: http://EzineArticles.com/?expert=Nick_Bright
1) The box-shadow property
Top of my list and many others, is the box-shadow property. This property will allow the developer to add a drop shadow effect to an element. Simply by specifying a colour 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 up or down you want the shadow, and a blur radius which defines how deep or sharp you want the shadow to be. The great thing about this effect is that as it is rendered by the browser and not pre-rendered in an image Therefore it can be used on elements which are animated using jquery - the shadow is animated to!
2) The Border-radius property
This property is fantastic as it allows you to finally give your elements rounded corners. Simply provide a numeric measurement to define how large you want the radius to be. Each corner of an element can be individually defined. 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. However the exciting part is that developers will be able to specify OpenType and TrueType fonts for use in their websites instead of being restricted to Embedded OpenTypes. To do this you would refer to a font of your choice hosted on the internet (you can search for great resources by googling 'font face fonts'). You can then use these fonts anywhere else in your CSS font-family styles. This finally opens the door and gives a breath of fresh air to the typography of the internet.
4) The text-shadow property
One of my favourite new options is the text-shadow property. This works much like the box-shadow property as you provide a colour, two offsets and a radius. Like a lot of effects I would recommend being very subtle with this to achieve maximum impact. Using this with web fonts lends a lot of power to CSS without the need for photoshop.
5) background colour gradients
Specifiying 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 improving your website size. You can specify a left to right, right to left, top to bottom, bottom to top or radial gradients to fill the background of an element, from one colour to another. Again, being subtle with effects like this is key for maximum impact.
6) The opacity property
The ability to control the opacity of an element is probably one of the most 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 its children, to be. The effect being you can see the elements beneath it.
CSS3 is an exciting and welcome development in the web development community. Using the above effects which are widely supported across the most recent, popular browsers, you'll be working more efficiently and effectively!
The author of this article is a freelance web designer who provides professional Web Design in Kent.
Article Source: http://EzineArticles.com/?expert=Nick_Bright
