CSS3 Drop-Shadows效果製作教程分享

Cheng發表於2014-07-19
CSSS3

要求

    • 必備知識

      基本瞭解CSS語法,初步瞭解CSS3語法知識。

    • 開發環境

      Adobe Dreamweaver CS6/Chrome瀏覽器

    • 演示地址

      演示地址

Drop-Shadow效果，其實就是大家熟悉的內容盒子陰影效果，在沒有CSS3之前，大家都是通過Photoshop製作。而有了CSS3後，我們只需要利用box-shadow配合兩個偽元素:before和:after即可實現。首先我們需要給內容盒子新增相對定位屬性，然後給其新增兩個偽元素 :before和:after ，在偽元素上新增絕對定位屬性和z-index屬性，將其定位到盒子的底部。

 

Photoshop製作Drop-Shadow效果:

http://www.missyuan.net/school/ps_2011/photoshop_5700.html

 

CSS3 製作Drop-Shadows效果:

 

1，在body中新增html標籤

<div class="box">LICHENG</div>

 

2，給盒子新增基本樣式

.box {
    width: 500px;
    height: 200px;
    position: relative;
    background: #ccc; 
    margin:100px auto;
    font:35px/200px "微軟雅黑";
    text-align:center;
    text-shadow: 0 1px 1px #fff;                
}

 

3，給盒子新增偽元素：before和 :after,新增盒子陰影和transform屬性，到目前我們只得到了盒子左邊的陰影。

.box:before,
.box:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    max-width: 150px;
    height: 20%;
    /*新增陰影效果*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*新增transform屬性*/
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

 

4，改變 :after 偽元素的方向，獲得右邊陰影。

.box:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

 

最終效果如下:

2014-07-18_150502

 

更多的Drop-Shadows教程和DEMO推薦:

 

drop-shadows-with-css3：

2014-07-18_151054

 

CSS drop-shadows without images

2014-07-18_151444

 

box-shadow-curl:

2014-07-18_151658

 

如以上文章或連結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。

作者:Li-Cheng
由於本人水平有限，文章在表述和程式碼方面如有不妥之處，歡迎批評指正。留下你的腳印，歡迎評論哦。你也可以關注我，一起學習哦！

相關文章