v.plonk!

CSS3-Transforms and Shadows

Yes, that's the deal this time. To actually SEE the differences you need to get the brandnew Opera 10.5 or the latest Safari. Firefox will surely join in very soon. Coming with the latest Opera is Carakan, the new JavaScript-Engine, Presto 2.5 that will bring the next big steps towards CSS3 and Vega, the new graphics libraries of Opera. When 10.5 gets released we will probably have the fastest browser on Earth again. YAY!

But back to the topic: Let's have a look at the easier part first: Shadows.
You might already remember my article about the DragonAge skin where I used text-shadows. Now we take it a little step further and create a box-shadow.

It sounds like a big deal, but to be honest it's very simple. We just take a box... like a div container or a menu element and create a shadow right behind it. I'll use one of the photos above as an example:

#menu #menu_blog {
    box-shadow: 0px 0px 7px #000;
}

You can see that it consists of 4 parameters: the distance of the shadow in X axis, the distance of the Y axis, how much the shadow is spread and the colour of the shadow (traditionally a shadow is grey or black, but you can guess that you can do far more with that: imagine lots of small and completely transparent boxes with different black shadows... that could look like smoke!



Alright, that was easy. Now let's dig a bit deeper into CSS3 and do a Transformation:

In this example I'll only show how a very simple rotation works, but I'll surely show the other options a bit later, too.

#menu #menu_blog { 
    -o-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

Okay, this looks weird at first but let me explain: the first two line are for Opera (-o-transform) and any Webkit compatible browser (-webkit-transform) like Safari or Google Chrome. The last line will most likely be the final CSS3-attribute we will be able to use when all browsers support transform.
So after telling the browsers that we want to do a transformation, we write what kind of transformation. That can be translate, scale, skew and rotate. In this case I only used rotate to make sure that most browsers show at least some kind of menu and the latest CSS3-browsers just get a little extra hug. So I positioned the polaroids the traditional way and then used transform:rotate to rotate the image 30 degrees clockwise (use a minus in front to rotate counter-clockwise).

If you don't add a so called transform-origin the element will be rotated around its middle. A more detailed article about transforms (and more) was written by Molly E. Holzschlag and David Storey.



Yes, that's all for now. I hope you'll enjoy this nice (and a little bit erotic) skin. I hope to see you again when releasing the next backpackers article.