After hearing about it and knowing what it does and even seeing a few examples my curiosity finally got the better of me and I decided to mess around with some CSS3
stuff. For those of you who may be less web developer-y, it's just CSS but with some added wackiness that actually goes beyond just simple styling and into crazy territory. Of course it also goes into browser support territory and ends up being woefully inconsistent among most browsers (shocking, I kn0w), so it's ultimately useless right now unless you want to force people to use Chrome or Safari (which is not recommended).
Clicking 'Read More' will get you some quickly done examples of a couple of CSS3 properties, including some Webkit specific animation stuff. So if you want the full effect I recommend you read this post in Chrome or Safari or your Webkit nightly build of choice. Firefox 3.5 will work for some, but not all, and Internet Explorer will fail in every way. See how annoying that was?
This box has some rounded edges.
First up we have good old rounded edges. This one is pretty simple, just -webkit-border-radius: 10px;
for Webkit, -moz-border-radius: 10px;
for Firefox. Prior to CSS3 this always had to be done with images in an infinite number of ways, and it was kind of a pain to implement when you had to take div expansion (from the content) into consideration. It's a pretty common design practice too, so it's nice to see this implemented in the new spec. You can even apply it to things without borders to just make them solid looking:
Even rounder edges.
Now for some meatier stuff. Here we illustrate the transform property. For Webkit it's -webkit-transform
and for Firefox it's -moz-transform
. There are four possibilities here, rotate
which all do pretty much what you'd expect. Translate seems a bit redundant given absolute/relative positioning, but that's a minor quibble.
Scaled to 75%
Translated 10px, -10px
You'll notice in all of those the text is still selectable and everything, though I find that Firefox 3.5's font rendering is a little shaky when it comes to rotated and skewed text. Webkit seems to do just fine though. Also that grayish box behind the translated one is the original position, just for reference.
But wait, there's more! We can also use a fancy property called -webkit-transition
or his three pals -webkit-transition-property -webkit-transition-duration
. This is where the insanity starts because it turns out, in conjunction with the :hover
pseudo-class (which works on all elements, not just anchor tags in Webkit and Firefox) you can make some crazy shit. Observe this (put your mouse over it):
CSS3 able to emulate spinning newspapers from TV! Kids from the 50s rejoice!
The relevant CSS for that box is as follows:
-webkit-box-shadow: 5px 5px 5px #888;
-webkit-transition: -webkit-transform 0.5s ease-in;
-moz-box-shadow: 5px 5px 5px #888;
-webkit-transform: rotate(720deg) scale(3);
Note that the drop shadow is also put in there with CSS3. The basics of transition
is you specify the property, how long the transition takes and timing function for the animation (ease, linear, ease-in etc). Transitions only work in Webkit thus far, which is why if you're viewing this in Firefox the 'newspaper' just kind of gets bigger. Check it out in Chrome or Safari for the full effect. This is where the Firefox people should be leaving the show, by the way. Go ahead and switch, I'll wait.
Rotation of course isn't the only thing that can be animated. Animated skewing is one of my favorites, and animated background colors work well too:
Hover to skew
Fade to red
And for completeness sake, let's demo our more specific transition
friends. Here's a box that will rotate 180 degrees, fade to green and scale up to 1.5x its size when you hover:
Abandon all hope!
It also does them on slightly different timescales. Here's the CSS:
-webkit-transition-property: background, -webkit-transform;
-webkit-transition-duration: 1.00s, 1.50s;
-webkit-transition-timing-function: ease-in, ease-in;
-webkit-transform: rotate(180deg) scale(1.5);
Click here to see a wonderful world of pain
Try not to think about it.
. It will take two seconds to start. As an added bonus animations are stackable so if click that link multiple times the animation will speed up. The script here is pretty basic:
var i = 0;
var r = document.getElementById('b11');
r.style['WebkitTransform'] = 'rotate(-' + (i++ * 360) + 'deg)';
r.style['background'] = !(i % 2) ? '#E5E5E5' : '#7A95A5';
So there are just a few of the things CSS3 has to offer (there are other, more useful but less entertaining features). I don't know if it will necessarily make the web better or worse or what, but it will certainly make it interesting. Or at least it will make it interesting for Chrome and Safari users and sometimes Firefox. So, par for the course.