Raindrop Logo in CSS
Playing around with -moz-radial-gradient this past while, and seeing the amazing job done on the CSS Opera logo by David Desandro, I thought I’d have a go at recreating one of the logos I illustrated within the past year using pure CSS.
The Raindrop logo I created was the prime candidate, as my first thoughts were “hey, three of the corners are basically -moz-border-radius set to 100%!” Done.
Next was to figure out how to construct it. Well, turns out I made myself a cheat sheet shortly after I designed the logo, highlighting the gradient elements I layered within the shape using the appearance palette:
Using the separate elements as a guide, I built out the shapes and gradients checking the rgb settings and their gradient percentage positioning in Illustrator. Turns out, it translates pretty well. Only a few tweaks here and there.
In the end, it isn’t perfect, but pretty close for a half hour test. If I can sort out using ellipse gradients vs circles, I should be able to make it much closer to the original image.
Have a look at the result here and be sure to use zoom in the browser to see it scale!
Note: I did this as a quick test using only -moz CSS rules. At some point I will try and get this working across all browsers that use border radius and gradients.
Comments
Leave a Reply
Why doesn’t it draw at all in Safari?
Nice, but this would have actually been more interesting if you used CSS that worked in other browsers as well (like using other vendor prefixes etc)-
I mocked this up very quickly. I’ll try and get it working in more browsers eventually.
That’s amazing work. Very good to see layered advanced css!
Interesting, when I at first tried to drag the CSS version I got a “shadow” just like with the image. But after zooming in and then resetting the zoom level dragging only shows a faint “shadow” of the outline.
Ignore the above. I where apparently just dragging an invisible selection, thus the variation in results…
Sean, this. is. spectacular. I’m really floored by how you layered the gradients together. I’m curious if this could be accomplished with a couple less elements if you used multi-backgrounds instead.
Thanks for introducing me to border-radius: 100%. Never considered using percents in that context.
And grr, nitpickers who want it supported cross everything. It’s an achievement of CSS mastery! Applaud it!
Thanks!
I hadn’t thought of using multiple backgrounds. I was treating it like a layered document, but really in Illustrator I now do everything in one object with the appearance pane, so that would be similar to multiple backgrounds. I’ll have to test that out!
Nice idea, but it doesn’t fallback well, look in Firefox 3.5, you see just the outer border.
Are all the layers needed? Does it have to be pixel perfect, or could it be simplified? Now it’s pure CSS, you’d think you could cut back on the mental effects.
CSS gradients were introduced in Firefox 3.6, so there wouldn’t be much to see in 3.5! It is mostly all gradients.
I don’t understand. There are only images here ? where is the css demo ?
You mentioned David DeSandro’s version of the Opera logo, but did you see Jan Henrik Helmers’s version made with 4 elements and only standard CSS3 – http://is.gd/ajTi8
This is awesome Sean! So good.
Would it not have been possible to do it entirely with just one elment and positioning the gradients instead of multiple elements with #logo div?
Pretty cool indeed.
Ditto on the multiple backgrounds. Also I bet a couple of those box shadows could be combined – multiple shadows is legal too…
I bet you could get this down to just a couple of divs.
Note that transparent is the default background colour, so you don’t need to explicitly specify it when setting the background. Always assuming that you meant to set all the background properties at once, of course…
Doesn’t work in lynx, either. :/
How dare you not have this working on every browser every invented. Who do you think you are showing up with this proof of concept, that does not even work in ie 4 on my old ipaq, lynx and netscape 3.04?? Your rudeness knows no end. Only when you have this fully working in COLOR on my palm III will I be impressed! I want my 10 seconds back, right now.
This is amazing, work of an art using CSS, should we sing now “CSS raindrops falling on my head”
This is very creative!