Lead Visual Designer (Reticulator of splines), Mozilla
Transmogrifier of vectors, animator of GIFs, CSS eyebrow waggler, father of pure energy kids, stubble tamer, 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.