CSS3 & CSS4 Part 1
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.
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:
text-shadow: 0px 4px 10px #FFFFFF;
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:
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
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:
#animatingbox{
width:50px;
height:50px;
margin:0px auto;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
#animatingbox:hover{
width:500px;
}
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
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!
Follow Us on Twitter
