Border-radius, box-shadow, and gradient )., Css3border-radius

Border-radius, box-shadow, and gradient )., Css3border-radius

Prefix

-Moz (for example,-moz-border-radius) is used for Firefox.
-Webkit (for example,-webkit-border-radius) is used for Safari and Chrome.

 

Css3 rounded corner code

<div class="radius"></div>.radius {    padding:10px; width:300px; height:50px;    border: 5px solid #dedede;    -moz-border-radius: 15px;      /* Gecko browsers */    -webkit-border-radius: 15px;   /* Webkit browsers */    border-radius:15px;            /* W3C syntax */}

Effect:

Other statements:

Border-radius: 5px 15px 20px 25px;
Upper right lower left



Css3 shadow:


Syntax:

Outer shadow: box-shadow: x y Npx # color;

Inner shadow: box-shadow: inset x y Npx # color;

First attribute: X axis of the Shadow (negative values can be used)

Second attribute: Y axis of the Shadow (negative values can be used)

Third attribute: Shadow pixel (size)

Fourth attribute: shadow color

Inset is used to set the inner shadow.

Text shadow: text-shadow:

Statement:

<Div class = "shadow"> </div>

. Shadow
{
Width: 300px;
Height: 50px;
Box-shadow: 0px 0px 8px # f00;
}

Effect:

 

Css3 gradient

 

Linear Gradient-from top to bottom

Gradient code:

<Div class = "gradient"> </div>

. Gradient
{
Width: 300px;
Height: 50px;
Background: linear-gradient (top, # ff911b, #000 );
Background:-webkit-linear-gradient (top, # ff911b, #000 );
Background:-o-linear-gradient (top, # ff911b, #000 );
Background:-ms-linear-gradient (top, # ff911b, #000 );
Background:-moz-linear-gradient (top, # ff911b 0, # 000100% );
Filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# ff911b', endColorstr = '# 000', GradientType = 0);/* ie6 filter */
}

Effect: