Lead Visual Designer (Brand) at Mozilla, Transmogrifier of vectors, animator of GIFs, CSS eyebrow waggler, ketchup chip expert, lover of thick cut bacon.
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.