So before I begin, I can’t take all the credit for this blog post. It’s more of an update of an older post with some new bits thrown in here and there. I don’t want to harp about CSS3 for ages, as you already know what it means for the web design industry and how it can benefit us web designers!
We know a lot more about CSS3 now, than when this post was originally published, but some of the features/benefits are still as they were.
The features and benefits of CSS3
CSS3 offers some great new selectors, which will give web designers, not only better looking designs, but also many time-saving strategies to get the desired final result.
Here are some of the new selector highlights offered in the highly anticipated CSS3 release…
- Border images, radiuses and box shadows
- Background size and multiple background images
- Opacity of colours
- Text effects including shadows
- User interfaces such as box sizing and resizing
- Advanced selectors for identifying first and last nodes
- Speech, Multi –column layouts and web fonts
There’s been a lot of resources published to help us web designers get to grips with some of the new techniques and also experiment with CSS3. These are a great way to push the boundaries and workout how you can apply these new techniques to your designs.
CSS3 Tutorials & Resources
I’ve put together a small list of some great resources, some you may know about, others you may not. If you haven’t already started getting into CSS3 I would highly recommend having a play around. Like most new things with the web, they can only progress if we all start experimenting with them and seeing how far we can push it.
- Working with CSS3 selectors – View post
- Cross browser CSS3 gradients – View post
- Series of CSS3 tutorials – View post
- Border radius generator – View website
- CSS3 generator – View website
Although there are plenty of reasons why you should use CSS3, sometimes you can be hit with a few ‘problems’ in unsupported browsers. There are fall-backs which you can put in place to help, some of which will help but others can be a bit clunky. I’m definitely all for using CSS3, I would just say be sure that you have everything you need to make the solution seamless and compatible. The only real issue I’ve ever come across is with rounded corners. If you have a very rounded design which you want all users to see – I guess you could use border-radius with a fallback image.
If anyone has any tips or tricks of their own, or maybe some advice to anyone reading this, please post below!
