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
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)));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With