CSS3 radial-gradient

CSS3 radial-gradient

Technical representation in a circular gradient

The gradient specification of CSS3, you can also specify a circular thing.

It does not change with the time of the "linear" basically.


  div#radial{
     width:90%;
     height:100px;
     background-color:#EFEFEF;
     background:-moz-radial-gradient(#FAFAFA,#AAAAAA);
     background:-webkit-radial-gradient(#FAFAFA,#AAAAAA);
     background:-o-radial-gradient(#FAFAFA,#AAAAAA);
     background:-ms-radial-gradient(#FAFAFA,#AAAAAA);
 }
Sample of radial-gradient

In this way you can specify the gradient, but to actually use on the web site, there may be a high degree of difficulty.

In addition to the radial gradient There are two types of the "circle", "ellipse".

Basic has been designated the "ellipse".

Depending on the idea is also possible, such as the following expression.


  div#radial{
     width:100px;
     height:100px;
     border-radius:100px;
     background-color:#EFEFEF;
     background:-moz-radial-gradient(circle,rgba(255,255,255,0.9),rgba(255,255,255,0));
     background:-webkit-radial-gradient(circle,rgba(255,255,255,0.9),rgba(255,255,255,0));
     background:-o-radial-gradient(circle,rgba(255,255,255,0.9),rgba(255,255,255,0));
     background:-ms-radial-gradient(circle,rgba(255,255,255,0.9),rgba(255,255,255,0));
     box-shadow:0 0 10px rgba(255,255,255,0.3);
     -webkit-box-shadow:0 0 10px rgba(255,255,255,0.3);
 }
Sample of radial-gradient

Because this way can be a variety of representation, depending on how to use, please try us.

CSS of Innovation

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

Check

CSS Contents