Applications for Box-shadow and flex layouts

After I got the design manuscript yesterday, I found that the design of the border shadow of the designer is very special, I do not normally contact.

So at first I was directly transduction and used the border as the background. When the page is all done, I searched the Internet Box-shadow related articles, found that there are a lot of cattle people summed up. Here is the result of my study.

<Divclass= "Fans">                        <ulclass= "Fans-ul">                <Li>                    <imgclass= "lazy"src= "Img/fans_1.jpg">                    <span>Favorite of their own repair cream, has used a college time ~</span>                </Li>                <Li>                    <imgclass= "lazy"src= "Img/fans_2.jpg">                    <span>After the birth of the baby, girlfriends recommend this grain mask, very mild, will not irritate the skin.</span>                </Li>                <Li>                    <imgclass= "lazy"src= "Img/fans_3.jpg">                    <span>3 months ago began to use the whitening kit, the skin is not only white, but also full of elasticity! Now the PAT makeup also has no pressure!</span>                </Li>            </ul>        </Div>                <Divclass= "Zsyh">            <imgclass= "lazy"src= "Img/zsyh_1.jpg"/>            <P>Married woman, do not pay attention to maintenance, the old faster! I've always been using the black and white whitening set of the porcelain muscle. Oh, moisturizing + whitening, every night also spend 10 minutes of time to use, the skin has always been better than the same age, the husband also said I am still tender like a young girl ~</P>        </Div>

Shadows are mainly combined: after and: Before,transform these elements.

. fans-ul{                   width:100%;        display:flex;/* here using the Flexbox layout, horizontal center of the 3-column graphics        /display:-webkit-flex;        Justify-content:space-between;    /* Let the child container be justified, the spacing between 22 is equal */    }

/* Shadow one effect */

Display:-webkit-box;/* set display:box for child elements, using compatible browser notation */
margin:0 5px;
padding:5px;

box-shadow:0 0 5px Rgba (0,0,0,0.3);


position:relative;
Background: #ededed;/* This background color is very important, if the setting is not reasonable, you can not cover the hidden parts * *
}

. Fans-ul Li:before,

. zsyh:after{Position:absolute; Z-index:-1;}

. Fans-ul li:before{
Content: "";
width:50%;
height:10px;
left:0;
top:100%;
box-shadow:0px 0px 20px 10px rgba (0,0,0,0.5); /* parameter after a long adjustment */
-webkit-transform:skew (0,-10deg) translate (21px,-23px);
Transform:skew ( -5deg,-10deg) translate (14PX,-16PX);
}
. Fans-ul li:after{
Content: "";
width:50%;
height:10px;
right:0;
top:100%;
box-shadow:0px 0px 20px 10px rgba (0,0,0,0.5);
-webkit-transform:skew (5deg,10deg) translate ( -14PX,-16PX);
Transform:skew (5deg,10deg) translate ( -14PX,-16PX);
}

/* Shadow effect two */
. zsyh{
padding:5px;
Font-size:0.75em
; border:1px solid #ccc;
Color: #444444;
margin:0 15px 40px 15px;
border:1px solid #EDEDED;
box-shadow:0 0 5px Rgba (0,0,0,0.3);
Background: #ededed; position:relative;
}
. zsyh:after{
Content: "";
width:80%;
height:15px;
left:0;
Bottom: -15px;
box-shadow:0px 15px 15px 2px rgba (0,0,0,0.6);
transform-origin:0 0;
-webkit-transform:skew ( -5deg,-10deg) translate (20PX,-9PX);
Transform:skew ( -5deg,-2deg) translate (5PX,-19PX);
}

Shadow effect One:

Shadow effect Two:




It's a little bit different than the design, but I think I can definitely do a better job of the shadow if it's a bit more accurate.
The study of CSS3 is still going on, constantly groping.

Applications for Box-shadow and flex layouts