Playing with CSS3

Play with CSS3

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.

Ie view

Ie view

Firefox view

Firefox view

My imageroll page is inspired from this page: line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery . Go and check it out (Y) .

Thank you and happy coding! ;)

About The Author

I'm a 24 year old designer, web designer and web developer. I always liked computers and photography. I first started working on little computer programs and after finishing Informatics and Mathematics at "Gib Mihaescu College" I applied for Informatics at the "University of Craiova" and took my license this year. I"m currently aiming for a Masters Degree in the same field.

0 Comments