Using CSS, can Google Chrome create an alpha channel effect similar to a 24-bit PNG?

Question

You can do some interesting tricks using the 24-bit PNG, which has a gradient from opaque to fully transparent. Elements sliding under this PNG will disappear during fading.

Is CSS only possible in Google Chrome? I only need to target this browser.

I would like to avoid a slice of 1px tall elements with a varying set of opacity .

thanks

Answer 1

Yes, it can only use -webkit-gradient with alpha values ​​as the background image:

 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0))); 

And if you are only targeting Chrome, you can also use :before and :after to add gradients if you want. Here is a brief example. You can see it works in CSSDesk (this method works much more than Chrome, but it breaks down on FF 3.0 and just doesn’t work in the number of versions of IE):

 div { position: relative; } div:before, div:after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 100px; } div:before { top: 0; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,1)),color-stop(1, rgba(255,255,255,0))); } div:after { bottom: 0; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1, rgba(255,255,255,1)),color-stop(0, rgba(255,255,255,0))); }