

Highlights and shadows: the real color of transparent in CSS3 (with examples) - bitsweet
http://coderwall.com/p/s1d2rg

======
Foy
FWIW All the "demo" images look like this:

<http://imageshack.us/photo/my-images/835/demosk.png/>

Using Opera 12.

~~~
kevingadd
Same in Firefox. Page must be broken.

~~~
mark_story
All the examples are webkit only. And people wonder why opera and mozilla are
a bit frustrated about the state of vendor prefixes and CSS.

~~~
Foy
As a rule of thumb I just don't use vendor prefixes... if my stuff breaks I
just say I'm ahead of the times. 8)

------
notJim
tl;dr for this post: at least in Chrome transparent as a CSS color translates
to rgba(0,0,0,0), which means that if you have a gradient from something that
isn't fully transparent (alpha channel > 0) to transparent, there will be an
awkward phase in the middle where black is visible (because the gradient is
transition the alpha channel in lockstep with the color.)

