CSS3 linear-gradient

Rich representation in the gradient

In CSS3, gradients to the specified color is now available.

This thing that was expressed in the image up to now will be available only in the implementation CSS code.

Along with the three-dimensional effect by using a gradient, it can also be expressed upscale image.

  div#linear{
     width:90%;
     height:100px;
     background-color:#EFEFEF;
     background:-moz-linear-gradient(top,#FCFCFC,#AAAAAA);
     background:-webkit-linear-gradient(top,#FCFCFC,#AAAAAA);
     background:-o-linear-gradient(top,#FCFCFC,#AAAAAA);
     background:-ms-linear-gradient(top,#FCFCFC,#AAAAAA);
 }

In this way you can easily set the gradient.

Moreover, it is also possible, such as the following expression.

  div#linear{
     width:90%;
     height:100px;
     background-color:#EFEFEF;
     background:-moz-linear-gradient(left,rgba(255,255,255,0.95),rgba(255,255,255,0.15));
     background:-webkit-linear-gradient(left,rgba(255,255,255,0.95),rgba(255,255,255,0.15));
     background:-o-linear-gradient(left,rgba(255,255,255,0.95),rgba(255,255,255,0.15));
     background:-ms-linear-gradient(left,rgba(255,255,255,0.95),rgba(255,255,255,0.15));
 }

You can also be in this way some transparent, you can also specify the direction of the gradient.

In addition, in the above, but I set the "background-color", this is, because the color is not displayed when viewed in CSS3 unsupported browser, will be its substitute.

Set the vendor prefix, let's use the background color or object.