CSS3 is here! Well, kind of. Although the new specification is not yet finished, there are some really useful and impressive improvements already available in some of the latest browsers. Why not start getting familiar with the new features that will drive the future of web front end design and development? This article introduces you to CSS3 and provides tips and resources to get you started.

The third generation of CSS standards from the W3C, CSS3 has already delivered its promise of making common layout effects easier to implement.

The road-map for CSS3 development began in 2007, with basic text and layout modules, at the time of print there is no end-date for the project, W3C maintains a progress report so that avid developers can keep up-to-date with the latest changes.

Web developers and designers are going to be excited at this evolution of CSS as they can produce rounded corners, embed non web-based fonts, and create transformations and animations without losing touch of code semantics and having to rely on JavaScript.

However, of one the major problems with CSS3 lies in its browser support. Not all browsers are compatible.  CSS3 info lists all browsers supported.

Microsoft’s Internet Explorer is resistant to change and Opera just seems to be a bit behind, but it is their users that are missing out. Firefox, Safari and Chrome are all on-board to show off the amazing things that CSS3 can do. But, the great thing about CSS3 is that the code doesn’t need to be adapted for IE and Opera; if done right, users just won’t be able to see the gradients or the drop shadows, but the site itself won’t look like there is anything out of place.

The list of things that CSS3 can do is open-ended. In March, there were two new rules added, CSS3 Please! and CSS3 Generator. CSS3 Please! simplifies the design process and allows designers to enter one value, and have the code generated automatically. CSS3 Generator offers a drop down menu which will generate and customise rules for a wide selection of CSS3 properties and functionalities. With the promise of more rules coming to simplify CSS3 further, everyone could have this ultimate package at their finger tips.

Ben MacGowan, Creative Jar’s Front End Web Developer, commented; “CSS3 will change the way developers work, we can develop designs quicker and easier. I am looking forward to utilizing these new features and creating a slicker user experience.” Ben has a few of his own CSS3 favourites, here are his top three:

Rounded Corners

Previously, to get rounded corners, a developer would need four separate images of the corners, bloated html and large amounts of CSS. With CSS3 there are two lines of html and one line of CSS, plus no images.

Font Embedding (@font-face)

Long overdue, CSS3 has finally allowed developers to be free of web-safe fonts. Of course, developers will still need to make sure that the font license allows embedding. But, when they do, it is so easy to embed; just upload the font file to your server, then embed it using little amounts of code. Simple!

Drop Shadows

Applicable to both text and box elements, there is less imagery required and sites can emphasise whatever they choose. All you need to add a drop shadow to a container, for example:

.container { box-shadow: 1px 1px 5px #000 }

Although there is more CSS3 support on its way, Ben believes that “we shouldn’t wait for the extra support, use what has already been developed and start seeing the benefits of easier implementation”.

As Andy Clark said; “Build from the skies down, not the ground up”. Internet Explorer and Opera will improve and adapt in the future, but don’t wait for that day, developers should start expressing themselves now!

Ben MacGowan suggests the following sites that he believes best utilize CSS3 (don’t forget to use the correct browser!)


Author : Alex Iszatt

Digital Journalist at Creative Jar; working with a whole bunch of creative, technical and intelligent people… a big, happy team with the same goal – to make the client happy!

Follow CreativeJar on Twitter to get my daily ramblings

Pin It on Pinterest

Share This

Share This

Share this post with your friends!