css--Shadow Effect

1. Curve Shadows:

The implementation of the Curve Shadow is generated by the overlay effect of the shadow. When a primary element sets a shadow, a secondary element is added below the main element. Makes the secondary element and the main element coincident, and the secondary element is an ARC element. The shadow effect overlay of the primary and secondary elements creates a curve shadow.

The first step:

The inner shadow is added to the main element, and the size of the V and H directions is set to 0, but the blur radius is set larger to achieve the shadow effect inside the main element.

Step Two:

The attributes that the secondary element needs to transform are: added to the lower layer of the main element level, implemented by Z-index, by adding a sub-element after or before the main element, the sub-element needs to be transformed to arc: border-radius:100px/10px, and the position of the secondary element is determined by absolute positioning ; Adds a shadow to a secondary element.

Html:

<class= "Wrap effect">        <H1> Shawdow Effect</H1>    </div>

Css:

. effect{    position:relative;    box-shadow:0px 1px 4px Rgba (0,0,0,0.3), 0px 0px 50px #ddd inset;}. effect:after,.effect:before{    content: ";    Background: #fff;    Position:absolute;    Z-index:-1;    left:10px;    right:10px;    top:50%;    bottom:0px;    border-radius:100px/10px;    box-shadow:0 0 20px Rgba (0,0,0,0.8);}

Two. Tilt Shadow:

The principle of the warping shadow is similar to the Curve shadow, but the warping shadow is used to distort and rotate the two properties. The shaded shadows on the left and right are also added two sub-elements, and then the two sub-elements are twisted to the left and rotated slightly to form parallelogram, and then obscured under the main element.

Css

. box{    width:980px;    Height:auto;    Clear:both;    Overflow:hidden;    margin:20px Auto;}. Box li{    width:300px;    height:210px;    Float:left;    Background:white;    margin:20px 10px;    border:2px solid #efefef;    box-shadow:0 1px 4px Rgba (0,0,0,0.27), 0 0 60px Rgba (0,0,0,0.1) inset;    Position:relative;}. Box Li img{    display:block;    width:290px;    height:200px;    margin:5px;}. Box li:before{    content: ";    Z-index:-1;    Position:absolute;    width:90%;    height:80%;    left:20px;    bottom:8px;    background:transparent;    box-shadow:0 8px 20px Rgba (0,0,0,0.6);    Transform:skew ( -12deg) rotate ( -4deg);}. Box li:after{    content: ";    Z-index:-1;    Position:absolute;    width:90%;    height:80%;    right:20px;    bottom:8px;    background:transparent;    box-shadow:0 8px 20px Rgba (0,0,0,0.6);    Transform:skew (12deg) rotate (4deg);}

css--Shadow effect