CSS for surface shading effects

Know what you will do when you meet a very beautiful design when you are doing the project. There are some designs that often use the shadow effect to look more solid, and in general the lazy people like me cut the diagram directly. There's no way to think about how the code is going to work.

Later, we always change the design of the draft, AH, * * * is annoying me, if he changed the figure I will be the original transduction replacement. So I decided to study this thing, in fact, we can achieve it Oh!

：

650) this.width=650; "class=" AlignCenter size-full wp-image-932 "src=" http://www.aliyue.net/wp-content/uploads/2016 /05/photo01-2.png "alt=" photo01 (2) "width=" 487 "height=" "style=" height:auto;vertical-align:middle;border:0px; text-align:center;margin:0px auto; "/>

The above effect is usually write the project most typical effect, do the design of the small partner must know PS minutes to do, but the code to implement it can we? ——— told them: Must be able! Haha o (∩_∩) O; that's a big talk. Let's do some research on it!

The first part:HTML

The content of the page section is simple let's take a look at the CSS section.

<div class= "Con yy" > 
Part II:CSS3
When we see this picture above, everyone is sure that the first impression is CSS3 Box-shadow, But if it is just this we can achieve it? Very clearly not to.
Whether it is the curved surface or the edge,box-shadow oneself is impossible to achieve, we need to cooperate with CSS3 pseudo-class elements to achieve.
Let's look at the code together!
 Surface Shadow We can implement the following code, not familiar with the pseudo-class elements of the small partners can self-check the document to see. 
*{ padding: 0; margin: 0; list-style: none;}. con{     width: 70%;     height: 200px;     margin: 50px auto;    background: #FFFFFF;     line-height: 200px;    text-align: center;     font-size: 24px;}. yy{    position: relative;    box-shadow: 0 1px  4px rgba (0,0,0,0.3),  0 0 40px rgba (0,0,0,0.1)  inset;    - Webkit-box-shadow:0 1px 4px rgba (0,0,0,0.3),  0 0 40px rgba (0,0,0,0.1)   Inset;    -moz-box-shadow:0 1px 4px rgba (0,0,0,0.3), 0 0  40px rgba (0,0,0,0.1)  inset;    -o-box-shadow: 0 1px 4px rgba (0,0,0,0.3),  0 0 40px rgba(0,0,0,0.1)  inset;}. yy:after , .yy:before{    position: absolute;     content:  ';    top: 50%;    bottom: -1px;     left: 10px;   right: 10px;    background: #fff;     z-index: -1;    /*  fillet horizontal for 100px  perpendicular to 10px  must be separated by '/'   , you cannot  */    border-radius: 100px/10px;    box-shadow a space:  0 0 20px rgba (0,0,0,0.3);    -webkit-box-shadow: 0 0 20px  rgba (0,0,0,0.3);    -moz-box-shadow: 0 0 20px rgba (0,0,0,0.3);    -o-box-shadow: 0 0 20px rgba (0,0,0,0.3);}
 The following code is how to achieve the effect of the edge shadow: 
.box{     width: 980px;    height: 300px;     margin: 0 auto; }.box li img{    display: block;     width: 290px;    height: 200px;}. box li{   position: relative;    float: left;     width: 290px;    height: 200px;    background:   #FFFFFF;    padding: 5px;    margin-right: 25px;     box-shadow: 0 0px 4px rgba (0,0,0,0.3)  , 0 0 60px  rgba (0,0,0,0.1)  inset;    -moz-box-shadow: 0 0px 4px rgba ( 0,0,0,0.3)  , 0 0 60px rgba (0,0,0,0.1)  inset;    - Webkit-box-shadow: 0 0px 4px rgba (0,0,0,0.3)  , 0 0 60px rgba (0,0,0,0.1)  inset;    -o-box-shadow:  0 0px 4px rgba (0,0,0,0.3)  , 0 0 60px rgba (0,0,0,0.1)  inset;  }.box li:before{    position:absolute;    content:  ";     width: 90%;    height: 80%;    left:  18px;    bottom: 11px;    z-index: -2;     background: transparent;    box-shadow: 0 8px 20px  RGBA (0,0,0,0.6);     -moz-box-shadow: 0 8px 20px rgba (0,0,0,0.6);     -webkit-box-shadow: 0 8px 20px rgba (0,0,0,0.6);     - O-box-shadow: 0 8px 20px rgba (0,0,0,0.6);     transform: skew (- 12DEG)  rotate (-5DEG);     -moz-transform: skew ( -12deg)  rotate ( -5deg);     - Webkit-transform: skew ( -12deg)  rotate ( -5deg);     -o-transform: skew ( -12DEG)  rotate ( -5deg); }.box li:after{    position:absolute;     content:  ';    width: 90%;    height: 80%;     right: 18px;    bottom: 11px;    z-index:  -2;    background: transparent;    box-shadow: 0  8px 20px rgba (0,0,0,0.6);    -moz-box-shadow: 0 8px 20px  RGBA (0,0,0,0.6);     -webkit-box-shadow: 0 8px 20px rgba (0,0,0,0.6);     -o-box-shadow: 0 8px 20px rgba (0,0,0,0.6);     Transform: skew (12DEG)  rotate (5deg),     -moz-transform: skew (12deg)  rotate (5deg);     -webkit-transform: skew (12deg)  rotate (5deg);     -o-transform:  skew (12deg)  rotate (5deg);  }
The effect of this is very clever use of CSS3 pseudo-class elements to achieve, in the visual experience for the product is a big addition to Oh! Try it out with a small partner of interest.
Need the demo to leave me a message! Do not know can add QQ to find me Oh!
==================
For more resources, please click here:http://www.aliyue.net
==================

This article is from the "Xiao Yue Blog" blog, please be sure to keep this source http://aliyue.blog.51cto.com/11564403/1775306
CSS for surface shading effects