csscss-transitions

How to achieve fading opacity on an element?

I'm currently learning jQuery and I developed my own coverflow_slider. Its 228 lines long and works pretty fine, currently I'm working to design it a bit better. Currently, its looking like this:

Current Slider

This here is my .css for the buttons:

.left, .right {
    position: absolute;
    z-index: 20;
    background-color: #000;
    height: 100%;
    width: 30px;
    opacity: 0.5;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

So now you see the 2 grey stripes at both sides? These are the buttons for left/right. Now I want that they have some kind of transition. It should look like this:

The goal

Solution

  • You can use a CSS3 background gradient. There are lots of online CSS3 background gradient generators such e.g. http://www.colorzilla.com/gradient-editor/. Punching in some parameters (e.g. horizontal, #999999 to #FFFFFF, etc) result in the following:

    background: #999999;
background: -moz-linear-gradient(left, #999999 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #999999 0%,#ffffff 100%);
background: -o-linear-gradient(left, #999999 0%,#ffffff 100%);
background: -ms-linear-gradient(left, #999999 0%,#ffffff 100%);
background: linear-gradient(to right, #999999 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#ffffff', GradientType=1);