Search code examples
cssgoogle-chromepng-24

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

You can make some cool tricks using a 24 bit PNG, which has a gradient from opaque to completely transparent. Elements sliding beneath this PNG will appear to disappear whilst fading.

Is this possible using CSS only with Google Chrome? I only have to target this browser.

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

Thanks

Solution

  • Yes it can, just use a -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 just targeting Chrome, you can also use :before and :after to add the gradients if you wanted to. Here is a quick example. You can view it live on CSSDesk (This method works in a lot more than Chrome, but breaks in FF 3.0 and just doesn't work in a number of IE versions) :

    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)));
}