How to use CSS to implement a surface shadow effect sample code sharing

I do not 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!

：

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!

First part: HTML

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

<p 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 shading 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 level 100px perpendicular to 10px must be separated by '/', can not be a space */border-radius:100px/10px;   box-shadow: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); }