CSS3 linear-gradient

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.

Gradation from the top


  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);
 }
Sample of linear-gradient

In this way you can easily set the gradient.

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

Gradient and transparency from the left


  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));
 }
Sample of linear-gradient

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.

CSS of Innovation

Consultant using the CSS on the front , strengthen the power of expression.

Check

CSS Contents