CSS3 tutorial | AjaxMasters Blog

Playing with CSS3

Created on October 1st, 2009 by Chocksy in Tutorial

Play with CSS3

If you saw our “ImageRoll” page and you used Firefox, Chrome or Safari then you saw the images being rotated in different angles well the way i did that is by using CSS3. I guess you already figured that out from the title.

CSS3 implements a lot of new features that can make your life easier of course you will not be able to use them quite yet. IE is not supporting like more than 90% of them so it’s useless if you want to make this for a client. The ones that we used on our blog are: box-shadow, border-radius and text-shadow. I think these are the most important of them but you can check all of them out by taking a look at this page: css3.info/preview/.

I’m gonna do a simple explanation on the ones we used and show you some code.

We used on the hrefs of the page this property:

-moz-box-shadow: 0px 2px 15px #333;

Now let’s explain. Why “-moz” in front of it? This is a simple hack for those who don’t know it. It tells the browser to render this only in mozilla based browsers. Next we have the property box-shadow and 0px means the top margin of the shadow, 2px means we move the shadow 2 pixels to the left and 15px
means we create a shadow with 15 pixels of size of blur if you want, #333 is of course the color of the box shadow. Pretty simple .

Now let’s rotate the images:

   -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);

You know -moz- already but we have a new one “-webkit-” this one means it will render in webkit based browsers, the most popular are: Safari and Chrome. Next we have the property “transform” and the degree of rotation “-10deg”.

The other one that we used all over the blog is text-shadow

text-shadow:1px 1px 0px #000;

This property is like this 1px means we move the shadow with 1 pixel from the top, 1 pixel from the left and 0 blur or size, #000 means of course the color of the shadow.

And here is a preview in 2 browsers IE and Firefox so you can see maybe you are not using a browser that supports CSS3.