CSS3 Gradients and rgba
So, I was hacking up some creative at work the other day and hadone of those really BIG realizations: I hate cutting out gradient image repeaters or 1x1 pixel semi-transparent PNG’s for background transparency in IE. But, you have to do what you have to do. I did discover a fun little trick to have in the bag and I cannot wait to stumble across more of these.
I had essentially a div that was 50% black opacity and some toggles that had a background gradient from full opacity black to transparent over the 50% transparent background. Initial thoughts are, “Man! Time to cut up some lame little images for this game show!”
Here is the screencap from Firefox (you’ll see why Firefox in a sec):
Well, I went the alternate route and wanted to test my options with some of the newer UI technologies such as CSS3. I used rgba for the main background fill, of course, but the tricky one was I didn’t know if I could use rgba for the gradient. Turns out, you can… but only Firefox currently supports this. I tested in Chrome and Safari and it was a no go.
Alas it seems we are so far along yet still a ways from full fledged badassness on the Web.
Well, I have some images to slice out :P
-B
