CSS 3カーブシャドウと反りシャドウを実現
24397 ワード
予備知識
border-radius transform:skew && rotate :beforeおよび:after コード#コード#
HTML構造コードは簡単で、CSSには注釈が含まれています.画像の仲間たちは自分で置き換えます.
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="wrap effect">
<h1> !!!!</h1>
</div>
<p> !!!!</p>
<ul class="box">
<li><img src="img/iconfont-blog.jpg" alt=" "></li>
<li><img src="img/iconfont-github.jpg" alt=" "></li>
<li><img src="img/iconfont-weibo.jpg" alt=" "></li>
</ul>
<p> !!!!</p>
</body>
</html>
CSS
*
{ margin: 0; padding: 0; border: 0; outline: 0; }
/* reset*/
ul
{ list-style: none; }
/* */
p
{ font-size: 30px; font-weight: bold; margin: -30px 0 50px 0; text-align: center; }
.wrap
{ width: 50%; height: 300px; margin: 80px auto; background: #fff; }
/* , */
.wrap h1
{ font-size: 30px; line-height: 300px; text-align: center; }
/* , ( )*/
.effect
{ position: relative; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; -o-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset; }
/** * ----------------------------------------------------------------------- , , rgba box-shadow:h-shadow v-shadow blur spread color inset ：h-shadow( )，v-shadow（ ） ：blur（ ），spread（ ），color（ ），inset（ ） ：IE9+、FireFox4、Chrome、Opera、Safari5.1.1 */
.effect:after,
.effect:before
{ position: absolute; z-index: -1; top: 50%; right: 30px; bottom: 0; left: 30px; content: ''; border-radius: 100px/10px; box-shadow: 0 0 20px rgba(0, 0, 0, .8); -ms-box-shadow: 0 0 20px rgba(0, 0, 0, .8); -o-box-shadow: 0 0 20px rgba(0, 0, 0, .8); }
/** * . , , after+before , z-index ----------------------------------------- :after :before ，content ， ： IE8 ：after， <!DOCTYPE> border-radius:x/y( / ) */
.box
{ clear: both; overflow: hidden; width: 980px; height: auto; margin: 20px auto; }
/** * , .. */
.box li
{ position: relative; float: left; width: 300px; height: 300px; margin: 20px 10px; border: 2px; box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 0, 0, .7) inset; solid: #000; -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 0, 0, .7) inset; -o-box-shadow: 0 1px 4px rgba(0, 0, 0, .7), 0 0 60px rgba(0, 0, 0, .7) inset; }
/** * width:(300+10*2+2*2)*3 = 972 <980 * */
.box li img
{ display: block; width: 290px; height: 290px; margin: 5px; }
/** * width:(290 + 5*2) = 300 == li.width * height:(290+ 5*2) = 300 == li.height */
.box li:before
{ position: absolute; z-index: -1; bottom: 13px; left: 20px; width: 90%; height: 80%; content: ''; -webkit-transform: skew(-8deg) rotate(-4deg); -ms-transform: skew(-8deg) rotate(-4deg); transform: skew(-8deg) rotate(-4deg); box-shadow: 0 10px 20px rgba(0, 0, 0, .6); -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, .6); -o-box-shadow: 0 10px 20px rgba(0, 0, 0, .6); }
.box li:after
{ position: absolute; z-index: -2; right: 20px; bottom: 13px; width: 90%; height: 80%; content: ''; -webkit-transform: skew(8deg) rotate(4deg); -ms-transform: skew(8deg) rotate(4deg); transform: skew(8deg) rotate(4deg); box-shadow: 0 10px 20px rgba(0, 0, 0, .6); -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, .6); -o-box-shadow: 0 10px 20px rgba(0, 0, 0, .6); }
/** * .... . * * ---------------------------------------------------- * * transform ; skew(xdeg,ydeg) * tansform:skew(x-angle,y-angle) X Y 2D * 2D , X ,Y *rotate(degree) --- */
効果図
このノートが仲間たちに少し役に立つことを願っています~~~