CSS 3 is full of ways to reduce our dependence on background images, one of which is pure CSS gradients. They have several features, which I’m sure designers are salivating over, like multiple color stops, and angled, radial, and linear gradients. Many people had built cool designer-focused tools to make interacting with a somewhat confusing gradient syntax a little easier. The issue for me has been that I’m not a designer. I generally work off of photoshop comps or (when doing big re-architecture projects) the site itself, as if the old version were a design. This means that, for the most part, I was trying desperately to match CSS gradients to an image with zero information about how that image would have been created. Because of my focus on fixing old and broken CSS, the original designer may not even still work at the company.
If you don’t know what I mean, picture me with a color picker going pixel by pixel to try to figure out by hand where the color stops should be and what colors I should use versus extrapolate. Then, for each version, making an image of the gradient I’ve created, blowing it up so I can compare it to the image of the original. Rinse, repeat until I’ve come up with something that kinda, sorta approximates the original. Oh yeah, painful.
Which lead me to tweet the following:
There was a lot of response, many people re-tweeted saying that if I found such a tool, they wanted to know about it! Several others said it was interesting, but that the more complex cases would be difficult to navigate. Twelve hours later, Philip Tellis had gone from not knowing what a CSS 3 gradient was, to writing an open source command line tool to convert png to CSS. It solved for linear gradients, which is exactly what I needed to fix the performance of sites whose that had gotten sloggy. Most of these sites used linear gradients as images, which are notoriously difficult to sprite.
I was excited, to give it a try, and also, a little nervous to once again meet my nemesis, the command line. Then, before I could blink Zoompf took Philip’s BSD licensed code and created a hosted version (w00t! hosted version!):
In the mean time, Colorzilla, creators of several fab tools for designers, had also gotten word about my plea for a conversion tool, and they thought it would be a great addition to their own functionality. A couple days later they tweeted that they had a prototype up:
Perhaps I’m being a little too Californian, but I have a warm fuzzy feeling about our community. I think one of the biggest challenges we are going to face is the lack of tools we have relative to other communities. So when we can come together to build tools that will save loads of developer time, I kind of love it. Even better, Philip’s choice to open source his work meant that others were free to expand upon it.
Is anyone else doing something really cool with CSS 3 gradients? I’d love to hear more about it. The CSS 3 Pattern Gallery kind of blew my mind. With every example, the boundaries of what is possible expand.