in orbit

I mostly talk about video games and the world wide web

Mar102010

CSS3: I Should Not Be

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, scale, translate and skew which all do pretty much what you'd expect. Translate seems a bit redundant given absolute/relative positioning, but that's a minor quibble.

Rotated 45°
Scaled to 75%
Translated 10px, -10px
Skewed 20°
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 and -webkit-transition-timing-function. 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):

EXTRA! EXTRA!
CSS3 able to emulate spinning newspapers from TV! Kids from the 50s rejoice!
The relevant CSS for that box is as follows:

#b07
{	
	[...]
	-webkit-box-shadow: 5px 5px 5px #888;
	-webkit-transition: -webkit-transform 0.5s ease-in;
	
	-moz-box-shadow: 5px 5px 5px #888;
}

#b07:hover
{
	-webkit-transform: rotate(720deg) scale(3);
	-moz-transform: 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:

#b10
{
	-webkit-transition-property: background, -webkit-transform;
	-webkit-transition-duration:  1.00s, 1.50s;
	-webkit-transition-timing-function: ease-in, ease-in;
}

#b10:hover
{ 
	background: #00C000;
	-webkit-transform: rotate(180deg) scale(1.5);
}

And finally, because I know you've been waiting for this, we can bring our old friend Javascript into the picture. If you ever wanted to make the worst web site ever, CSS3 might just be for you.
Try not to think about it.
Click here to see a wonderful world of pain. 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;
setInterval(
	function()
	{
		var r = document.getElementById('b11');
		r.style['WebkitTransform'] = 'rotate(-' + (i++ * 360) + 'deg)';
		r.style['background'] = !(i % 2) ? '#E5E5E5' : '#7A95A5';
	}, 
	2000
);

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.

Add Comment
Name:

URL (optional):

Your Comment:

#1 - Jon R Reply
Haha, I love that spinning newspaper animation. You forgot about CSS3 gradients as well, which will surely bring back a level of ugliness not seen in since 1997. IE9 might have a decent level of CSS3 support as well, it's definitely getting rounded corners support, and more info will appear at Mix 2010 next week.

Mar. 11, 2010 (11:37pm EST)

#2 - Fuzztooth Reply
I've started incorporating border-radius into designs more, IE be damned. Haven't tried css based animations, I use yui for that (which may actually use css3 if it's available, not sure).

Jun. 6, 2010 (4:09am EST)