Finally, something not so outrageous using CSS3 that we can all understand

I got a link through twitter about a raindrop done using CSS (don’t bother looking at this in Safari or Chrome, because he write the additional CSS for that). Normally this is the kind of thing that I will look at and say cool, but waste of time. This one caught my eye though because it is actually pretty simple. I’m not going to recreate the damn thing, but all it is, is a bunch of divs and a surprisingly small amount of CSS. I was actually impressed with this one, and I think it could have been done with just an ul and list items. Now, I would still use an image in a real life situation, but I picked this piece because I did not really know how to use the new gradients. This guy obviously does.

Learnin’

That led me to do some small bit of research and tests, and found it is not all that hard, just slightly confusing to get a grasp of what the numbers do. On top of that, the CSS Safari uses to do radial gradients is pretty different.

Some things to note about Safari while doing my demo. I could not get it to recognize percentages for the values in the border radius, so I had to do pixels. I’m not sure it can or not, and I didn’t find anything about it. Safari 5 does not need -webkit- in front of border-radius – it will still use it, so I would include it anyway to support the older versions.

If you look at the demo, you can see a div with a basic radial gradient, with rounded corners set to 100% in FF, and 300px in Safari. This should appear as a circle with red in the middle, then orange fading out to yellow. The second, is just to show you something easy to do with it. It is a png with the word GRADIENT cut out of it, and a drop shadow layer style put on. It then has a div behind it with a radial gradient, which if you ever wanted to change the colors, you wouldn’t have to use photoshop to do it. Just change the CSS!

Click here for demo.

Read the rest of this entry »