建站
咨詢
售后
建站咨詢
新聞中心
CSS 陰影的存在，讓物體看上去更加有型立體。
成都創(chuàng)新互聯(lián)公司是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器，站群服務(wù)器，眉山聯(lián)通機(jī)房，海外高防服務(wù)器，成都機(jī)柜租用，動(dòng)態(tài)撥號(hào)VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。
然而，在最簡(jiǎn)單的陰影使用之上，我們可以實(shí)現(xiàn)更多有意思且更加立體的陰影效果。
本文將帶大家看看如何使用 CSS 實(shí)現(xiàn)幾類比普通陰影更加立體的陰影效果。
CSS 陰影基礎(chǔ)
CSS 中，明面上可以實(shí)現(xiàn)陰影的有三個(gè)屬性：
- box-shadow - 盒陰影。
- text-shadow - 文字陰影。
- filter: drop-shaodw()- 濾鏡內(nèi)的陰影。
關(guān)于它們的基礎(chǔ)語(yǔ)法和使用就不過(guò)多描述，這一部分大家可以先在 MDN 補(bǔ)齊，貼幾張圖快速?gòu)?fù)習(xí)一下：
box-shadow - 盒陰影：
text-shadow - 文字陰影：
filter: drop-shaodw() - 濾鏡內(nèi)的陰影：
基本上 3 種陰影大同小異，需要注意的就是：
- box-shadow 還區(qū)分內(nèi)陰影，內(nèi)陰影使用關(guān)鍵字 inset 進(jìn)行描述。
- box-shadow多一個(gè)陰影擴(kuò)散半徑參數(shù)。
長(zhǎng)投影
先 來(lái) 看 看 長(zhǎng) 陰 影 。我們可以通過(guò)多層陰影疊加實(shí)現(xiàn)文字的立體陰影。運(yùn)用在 div 這些容器上也是可以的。當(dāng)然這里還有一種挺有意思的方法。假設(shè)我們，有一個(gè)矩形元素，希望給他添加一個(gè)長(zhǎng)投影，像下面這樣：
要生成這種長(zhǎng)投影，剛剛說(shuō)的疊加多層陰影可以，再就是借助元素的兩個(gè)偽元素，其實(shí)上面的圖是這樣的：
關(guān)鍵點(diǎn)在于，我們通過(guò)對(duì)兩個(gè)偽元素的 transform: skew() 變換以及從實(shí)色到透明色的背景色變化，實(shí)現(xiàn)了長(zhǎng)投影的效果：
CodePen Demo -- 線性漸變模擬長(zhǎng)陰影[1]。
立體投影
好，我們繼續(xù)。下一個(gè)主題是立體投影。
這個(gè)說(shuō)法很奇怪，陰影的出現(xiàn)，本就是為了讓原本的元素看起來(lái)更加的立體，那這里所謂的立體投影，是個(gè)怎么立體法?
這里所謂的立體投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我們使用其他元素或者屬性模擬元素的陰影。而這樣做的目的，是為了能夠突破 box-shadow 這類元素的一些定位局限。讓陰影的位置、大小、模糊度可以更加的靈活。
OK，讓我們來(lái)看看，這樣一個(gè)元素，我們希望通過(guò)自定義陰影的位置，讓它更加立體：
上圖 div 只是帶了一個(gè)非常淺的 box-shadow ，看上去和立體沒什么關(guān)系，接下來(lái)，我們通過(guò) div 的偽元素，給它生成一個(gè)和原圖邊角形狀類似的圖形，再通過(guò) transform 位移一下，可能是這樣：
OK，最后對(duì)這個(gè)用偽元素生成的元素進(jìn)行一些虛化效果(filter或者box-shadow都可以)，就可以實(shí)現(xiàn)一個(gè)邊角看起來(lái)像被撕開的立體效果：
代碼非常簡(jiǎn)單，偽 CSS 代碼示意如下：
div {
position: relative;
width: 600px;
height: 100px;
background: hsl(48, 100%, 50%);
border-radius: 20px;
}
div::before {
content: "";
position: absolute;
top: 50%;
left: 5%;
right: 5%;
bottom: 0;
border-radius: 10px;
background: hsl(48, 100%, 20%);
transform: translate(0, -15%) rotate(-4deg);
transform-origin: center center;
box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
}
所以總結(jié)一下：
- 立體投影的關(guān)鍵點(diǎn)在于利于偽元素生成一個(gè)大小與父元素相近的元素，然后對(duì)其進(jìn)行 rotate 以及定位到合適位置，再賦于陰影操作。
- 顏色的運(yùn)用也很重要，陰影的顏色通常比本身顏色要更深，這里使用 hsl 表示顏色更容易操作，l 控制顏色的明暗度。
還有其他很多場(chǎng)景，都可以用類似的技巧實(shí)現(xiàn)：
詳細(xì)完整的代碼，你可以戳這里：CodePen Demo -- 立體投影[2]。
浮雕陰影
還有一類立體效果的陰影就是浮雕陰影，它的本質(zhì)還是 box-shadow 和 text-shadow，只是需要控制好顏色的配合以及內(nèi)外陰影的一起使用。核心就是 2 點(diǎn)：
- 背景色與內(nèi)容(文本或者盒子顏色)一致。
- 使用兩個(gè)相反的方向，使用兩組對(duì)比明顯的顏色值，來(lái)實(shí)現(xiàn)凹凸效果。
首先，我們來(lái)看一個(gè)文字版的浮雕效果。
先實(shí)現(xiàn)一個(gè)凸起的效果，我們需要實(shí)現(xiàn)一個(gè)背景色和文字色一樣的文字：
浮雕陰影
body {
background: #999;
}
p {
color: #999;
}
效果如下，由于背景色和文字色的顏色一樣，所以我們什么都看不到。
不過(guò)沒事，我們給文字添加一個(gè) 1px x、y 方向的黑色陰影：
p {
color: #999;
text-shadow: 1px 1px 1px #000;
}
效果如下：
有點(diǎn)感覺了，再反向，也就是 -1px x、y 方向添加一個(gè)黑色相對(duì)，也就白色的陰影：
p {
color: #999;
text-shadow:
1px 1px 1px #000,
-1px -1px 1px #fff;
}
效果如下，這樣我們就得到了一個(gè)凸起質(zhì)感的浮雕陰影：
如果我們把顏色對(duì)調(diào)一下呢?
p {
color: #999;
text-shadow:
1px 1px 1px #fff,
-1px -1px 1px #000;
}
就能很輕松的得到凹下質(zhì)感的浮雕陰影：
上述 DEMO 的完整代碼：CodePen Demo - Embossed Shadow[3]。
新擬態(tài)風(fēng)格陰影
我們將運(yùn)用在文字上的技巧，擴(kuò)展延伸到容器上，就能得到最近比較火的擬態(tài)風(fēng)格陰影，其原理也是大同小異。
兩個(gè)陰影，使用兩個(gè)相反的方向，使用兩組對(duì)比明顯的顏色值，來(lái)實(shí)現(xiàn)凹凸效果。與文字不同的是，這里的凹效果，我們需要使用盒子的內(nèi)陰影實(shí)現(xiàn)。
浮雕陰影浮雕陰影
div {
width: 120px;
height: 120px;
background: #e9ecef;
color: #333;
box-shadow:
7px 7px 12px rgba(0, 0, 0, .4),
-7px -7px 12px rgba(255, 255, 255, .9);
}
div:nth-child(2) {
box-shadow:
inset -7px -7px 12px rgba(255, 255, 255, .9),
inset 7px 7px 12px rgba(0, 0, 0, .4);
}
這樣，就可以得到擬態(tài)風(fēng)格的按鈕，如下圖所示，左凸右凹：
再通過(guò)一個(gè)簡(jiǎn)單的過(guò)渡，就可以實(shí)現(xiàn)整個(gè)點(diǎn)擊的交互：
div {
transition: .2s all;
box-shadow:
7px 7px 12px rgba(0, 0, 0, .4),
-7px -7px 12px rgba(255, 255, 255, .9),
inset 0 0 0x rgba(255, 255, 255, .9),
inset 0 0 0 rgba(0, 0, 0, .4);
&:active {
box-shadow:
0 0 0 rgba(0, 0, 0, .4),
0 0 0 rgba(255, 255, 255, .9),
inset -7px -7px 12px rgba(255, 255, 255, .9),
inset 7px 7px 12px rgba(0, 0, 0, .4);
}
}
看看效果：
文字立體投影 / 文字長(zhǎng)陰影
上面的立體效果在文字上就完全不適用了，所以對(duì)待文字的立體陰影效果，還需要另辟蹊徑。
正常而言，我們使用 text-shadow 來(lái)生成文字陰影，像這樣：
Txt Shadow
-----
div {
text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);
}
嗯，挺好的，就是不夠立體。那么要做到立體文字陰影，最常見的方法就是使用多層文字陰影疊加。
Tips：和 box-shadow 一樣，text-shadow 是可以疊加多層的!但是對(duì)于單個(gè)元素而言， drop-shadow 的話就只能是一層。
好，上面的文字，我們?cè)囍B加個(gè) 50 層文字陰影試一下。額，50 層手寫，其實(shí)很快的。
好吧，手寫真的太慢了，還容易出錯(cuò)，所以這里我們需要借助一下 SASS/LESS 幫忙，寫一個(gè)生成 50 層陰影的 function 就好，我們每向右和向下偏移 1px，生成一層 text-shadow：
@function makeLongShadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 50 {
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
div {
text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}
上面的 SCSS 代碼。經(jīng)過(guò)編譯后，就會(huì)生成如下 CSS：
div {
text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px #992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px 10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px 15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px 20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px 25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px 30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px 35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px 40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px 45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px 50px #992400;
}
看看效果：
額，很不錯(cuò)，很立體。但是，就是丑，而且說(shuō)不上來(lái)的奇怪。
問(wèn)題出在哪里呢，陰影其實(shí)是存在明暗度和透明度的變化的，所以，對(duì)于漸進(jìn)的每一層文字陰影，明暗度和透明度應(yīng)該都是不斷變化的。這個(gè)需求，SASS 可以很好的實(shí)現(xiàn)，下面是兩個(gè) SASS 顏色函數(shù)：
- fade-out 改變顏色的透明度，讓顏色更加透明。
- desaturate 改變顏色的飽和度值，讓顏色更少的飽和。
關(guān)于 SASS 顏色函數(shù)，可以看看這里：Sass基礎(chǔ)—顏色函數(shù)[4]。
我們使用上面兩個(gè) SASS 顏色函數(shù)修改一下我們的 CSS 代碼，主要是修改上面的 makeLongShadow function 函數(shù)：
@function makelongrightshadow($color) {
$val: 0px 0px $color;
@for $i from 1 through 50 {
$color: fade-out(desaturate($color, 1%), .02);
$val: #{$val}, #{$i}px #{$i}px #{$color};
}
@return $val;
}
好，看看最終效果：
嗯，大功告成，這次順眼了很多。
詳細(xì)完整的代碼，你可以戳這里：CodePen Demo -- 立體文字陰影[5]。
當(dāng)然，使用 CSS 生成立體文字陰影的方法還有很多，下面再貼出一例，使用了透明色疊加底色的多重線性漸變實(shí)現(xiàn)的文字立體陰影，感興趣的同學(xué)可以去看看具體實(shí)現(xiàn)：
詳細(xì)完整的代碼，你可以戳這里：CodePen Demo -- 線性漸變配合陰影實(shí)現(xiàn)條紋立體陰影條紋字[6]。
最后
總結(jié)一下，本文介紹了利用 CSS 實(shí)現(xiàn) 5 種更加立體的陰影效果的方式，可以幫助我們對(duì) CSS 陰影有更好的理解。
參考資料
[1]CodePen Demo -- 線性漸變模擬長(zhǎng)陰影: https://codepen.io/Chokcoco/pen/qJvVGy。
[2]CodePen Demo -- 立體投影: https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100。
[3]CodePen Demo - Embossed Shadow: https://codepen.io/Chokcoco/pen/yLPmMXM。
[4]Sass基礎(chǔ)—顏色函數(shù): https://www.w3cplus.com/preprocessor/sass-color-function.html。
[5]CodePen Demo -- 立體文字陰影: https://codepen.io/Chokcoco/pen/JmgNNa。
[6]CodePen Demo -- 線性漸變配合陰影實(shí)現(xiàn)條紋立體陰影條紋字: https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100。
文章題目：陰影進(jìn)階，實(shí)現(xiàn)更加的立體的陰影效果！
文章起源：http://www.dlmjj.cn/article/cdcgiij.html
