背景
有沒有想過如何創(chuàng)建從前景元素中繼承某些顏色的陰影效果?閱讀本文并找出如何實現(xiàn)方法吧!
前幾天我經(jīng)過家得寶(Home Depot
,美國家得寶公司,全球領(lǐng)先的家居建材用品零售商),他們正在大規(guī)模展銷正在出售的智能燈 💡
,其中一種是一系列燈泡位于電視機后面,它們會投射出與電視機前景屏幕上顯示的顏色相近的燈光,類似于以下圖片所示。
注意電視后面發(fā)生了什么。電視機屏幕前景中顯示的顏色被燈投影成彩色陰影背景。隨著屏幕上顏色的變化,背景投影顏色也發(fā)生變化。真的很酷,對吧?
看到這一點后,自然而然地我首先想到的是,能否使用 web
開發(fā)技術(shù)創(chuàng)建一個五顏六色的,并且足夠聰明可以模擬前景顏色的陰影呢?事實證明,在只使用 CSS
的情況下,完全可以實現(xiàn)這種效果。在本文中,我們將研究如何實現(xiàn)。
開干!
令其成真
在接下來的段落中你將會發(fā)現(xiàn),剛開始時,乍一看僅使用 CSS
來創(chuàng)建智能的彩色陰影似乎是一項艱巨的任務(wù),當我們循序漸進,把困難部分拆分成更小的部分時,你就會發(fā)現(xiàn)一切都會變得容易理解消化。在接下來的章節(jié)中,我們將創(chuàng)建一個如下所示的示例:
你看到的是一張壽司 🍣
的圖片,后面有與前景顏色相對應(yīng)的陰影。為了強調(diào)我們所做的是動態(tài)的,給陰影增加了一個脈動動畫效果。通過這個有效的示例,讓我們深入探討如何僅在使用 HTML
和 CSS
的情況下讓一切變得生動起來。
展示圖片
用于展示壽司 🍣
的 HTML
如下所示并沒有什么特別:
<div class="parent">
<div class="colorfulShadow sushi"></div>
</div>
我們有一個父級 div
元素 .parent
,它包含一個子級元素 .suchi
用于展示 🍣
。我們通過使用一張背景圖片的形式來實例化 🍣
,.sushi
元素的具體樣式規(guī)則如下:
.sushi {
margin: 100px;
width: 150px;
height: 150px;
background-image: url("https://www.kirupa.com/icon/1f363.svg");
background-repeat: no-repeat;
background-size: contain;
}
在上面樣式規(guī)則中,我們將 div
設(shè)置為 150 * 150
寬高像素,并且設(shè)置了 background-image
及相關(guān)屬性,如果展示一下我們現(xiàn)在所實現(xiàn)的結(jié)果,可以看到如下圖所示的內(nèi)容。
創(chuàng)建陰影
現(xiàn)在我們已經(jīng)展示出了我們的壽司 🍣
圖片,剩下更加有趣的部分就是來定義陰影。我們將使用指定一個子偽元素 ::after
來定義陰影,它將做 3
件事情:
- 直接位于圖片所在
div
的后面;
- 繼承與父元素相同的背景圖像;
- 通過濾鏡產(chǎn)生出多彩的
drop-shadow
陰影效果。
上述3個功能由以下2個樣式規(guī)則實現(xiàn):
.colorfulShadow {
position: relative;
}
.colorfulShadow::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
background-position: center center;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
z-index: -1;
}
花一點時間來瀏覽下這里的實現(xiàn),密切關(guān)注每個屬性和對應(yīng)值。最值得注意的是 background
屬性和 filter
屬性。 background
的值是 inherit
,這意味著它將繼承父級元素的背景值:
filter
屬性定義了兩個濾鏡值:drop-shadow
和 blur
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
我們的 drop-shadow
濾鏡設(shè)置了一個 50%
透明度的黑色陰影。blur
濾鏡為為元素設(shè)置 20px
的模糊效果。這兩個濾鏡的結(jié)合最終就可以創(chuàng)造出多彩的陰影,當這兩條樣式規(guī)則生效時,我們就可以看到如下圖出現(xiàn)在壽司 🍣
圖像后面彩色的陰影:
到這一點,我們已經(jīng)實現(xiàn)了很多。為了完整性,如果你想要多彩的陰影具有放大縮小的動畫效果,以下額外的 CSS
可以幫你實現(xiàn):
.colorfulShadow {
position: relative;
}
.colorfulShadow::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
background-position: center center;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);
z-index: -1;
/* animation time! */
animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;
}
@keyframes oscillate {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.3, 1.3);
}
}
如果你想在不使用循環(huán)動畫效果的情況下增強交互性,也可以使用 CSS transition
來改變陰影的行為,如在 hover
操作情況下。需要強調(diào)的難點是對待偽元素只需要像對待用 HTML
創(chuàng)建的或 JavaScript
動態(tài)創(chuàng)建的元素一樣,唯一的不同是這個元素完全是僅使用 CSS
創(chuàng)建的!
結(jié)論
偽元素允許我們使用 CSS
來創(chuàng)建通常在 HTML
和 JavaScript
領(lǐng)域內(nèi)完成的元素創(chuàng)建任務(wù)。對于我們多彩的智能陰影來說,我們依賴于父元素有一個背景圖像集,這使得我們定義一個既可以繼承父級背景細節(jié)又可以設(shè)置模糊效果和投影效果的子元素變得容易。雖然這一切都很好,減少了我們大量的復(fù)制粘貼工作,但是這種方法也不是很靈活。
如果我想將這樣的陰影應(yīng)用到一個不只是帶有背景圖像的空元素上,該怎么辦呢?如果我有一個 HTML
元素如一個按鈕或組合框,我想應(yīng)用這種陰影效果呢?一種解決方案是依靠 JavaScript
復(fù)制 DOM
中的相應(yīng)元素,將其放置在前臺元素底層,應(yīng)用過濾器,這樣也是一種方法。雖然這可以實現(xiàn)效果,但我想到這個有點重復(fù) DOM
元素的沉重過程就不寒而栗。更糟糕的是,JavaScript
沒有將你想提供的任意視覺意向轉(zhuǎn)換為渲染目標位圖的能力!🥶
本文是翻譯,原文地址請瀏覽:https://www.kirupa.com/html5/creating_colorful_smart_shadows.htm
本文地址:https://www.cnblogs.com/dragonir/p/14758359.html 作者:dragonir
到此這篇關(guān)于CSS 實現(xiàn)多彩、智能的陰影的文章就介紹到這了,更多相關(guān)css實現(xiàn)陰影內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!