CSS3 Corners, Gradients, Shadows and more…

css3 properties

Cascading Style Sheets (CSS) is an incredible technology, allowing you to easily separate content from design. We still work with companies that have hard-coded sites and interfaces, forcing them to rely on developers to make any edits. If that’s where your company is, you need to scream at your development team (or get a new one). The initial release of CSS was 14 years ago! We’re now on our third iteration of CSS3.

CSS3 is now adopted and supported in all of the latest popular browser versions, and it’s time to take advantage! In case you didn’t realize what was possible with CSS3, oneextrapixel has put together a nice Infographic on the key features enabled by CSS3 – including applying a border radius (rounded corners), opacity (the ability to see through an element), border images, multiple background images, gradients, color transitions, element shadows and font shadows. There are some incredible effects that you can develop with the combination of HTML5 and CSS3.

Why is CSS3 important? Currently, designers utilize a combination of graphics, HTML and CSS to fully design web pages that are aesthetically pleasing. Once all graphical elements are supported, it may eventually be possible to do away with Illustrator or Photoshop and have the browser render graphics and layers the way we’d like them to. This may still be a decade away – but the closer we get, the nicer the sites we can develop and the easier they’ll be to develop on the fly.

css3 infographic full

If you’re concerned with adopting CSS3 because your users or visitors are still utilizing older browsers, there are JavaScript libraries like Mondernizr out there you can include in your HTML5 and CSS3 projects that will help older browsers render the elements accurately.

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.