css3-css4

What’s CSS3?

CSS3 is the new coding standard for CSS (Cascading Style Sheet) it can enable you to do incredible things with just a bit of code! You can create Photoshop-like effects with a few lines of CSS and there are tons of things you can do. There are, however, issues with Internet Explorer and CSS3 (Surprise, surprise!)

You can view a fully in-depth browser support list at findmebyip.

css3-browser-support

Why would I want to use CSS3?

CSS3 gives you the ability to create beautiful effects a lot easier with CSS. It allows for faster changes for developers due to effects like drop shadows being created by code instead of via photoshop and so allows you to maintain a more up-to-date website!

Text Shadows

To add a text shadow to text you only need to add a little line of code in CSS:

The 0px is the X-Coordinate

The 4px is the Y-Coordinate

The 10px is the blur radius

And #FFFFFF is the colour of the shadow.

Adding a comma after a text shadow allows you to create another shadow expanding your possibilities further, for example:

Would create;

This

CSS3 Animation

There is lots that can be done in the way of animation with CSS3. You have a possibility to do 2d and 3d animation, sadly the more complex you get the less Internet explorer likes it.

Having CSS3 transitions can prevent you from having complicated javascript code for a simple animation:

Hover over the red box to see the effect

Workarounds

Internet explorer is (sadly) a big part of the internet.  You can see how big here and this means a lot of people are going to be visiting your fancy css3 website and are not going to be able to see your amazing skills!

For CSS styling take a look at Smashing Magazine’s article for plenty of workarounds some of which are jquery plugins and some are extra files to add to your website.

CSS3 Animations in IE on the other hand aren’t as easy and you’ll have to go back to good old fashioned jQuery.

Selectors

Another important thing about CSS3 is the new edition of selectors. This will make many web designers’ lives a lot easier, giving you the freedom to target more specific elements.

:last-child Allows you to select the last child of an element such as a list

[attribute*=value] Allows you to select an attribute with a set value eg. a[href*="nublue.com"]

: only-child Will select all elements that are a child of the parent eg. p:only-child

What about CSS4?

Well, I’m glad you’ve asked! CSS4 is just the next “level” – it’s not reinventing the wheel it’s just a naming convention!

So what’s new? Well there are a nice amount of selector classes, text, images, background and media queries updates on the way. For now they’re not ready to be implemented and even when the time comes it won’t be ready for Internet Explorer.  If you want to read the W3 Drafts for each you can see them here

CSS4 Selectors

CSS4 Text

CSS4 Images

CSS4 Media Queries

It is rather difficult to try and show you everything included in CSS3 in a single blog article so I will be releasing a few every now and then to keep you topped up with CSS3 goodness.

Happy Coding!

NuBlue are a multi-award winning web development agency, specialising in the planning, design, development and ongoing support of online projects.