css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果

css實現(xiàn)動態(tài)陰影
創(chuàng)建與類似的陰影box-shadow 而是基于元素本身的顏色。
代碼實現(xiàn):
<div class="dynamic-shadow-parent"> <div class="dynamic-shadow"></div> </div> <style> .dynamic-shadow-parent { position: relative; z-index: 1; } .dynamic-shadow { position: relative; width: 10rem; height: 10rem; background: linear-gradient(75deg, #6d78ff, #00ffb8); } .dynamic-shadow::after { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; top: 0.5rem; filter: blur(0.4rem); opacity: 0.7; z-index: -1; } </styel>
效果如下:
說明
代碼片段需要一些復雜的情況來正確堆疊上下文,這樣偽元素將定位在元素本身的下面,同時仍然可見。
position: relative 在父元素上為子元素建立笛卡爾定位上下文。
z-index: 1 建立新的堆疊內(nèi)容。
position: relative 在子級上建立偽元素的定位上下文。
::after 定義偽元素。
position: absolute 從文檔流中取出偽元素,并將其相對于父元素定位。
width: 100% 和 height: 100% 調(diào)整偽元素的大小以填充其父元素的尺寸,使其大小相等。
background: inherit 使偽元素繼承在元素上指定的線性漸變。
top: 0.5rem 將偽元素從其父元素稍微向下偏移。
filter: blur(0.4rem) 將模糊偽元素以在下面創(chuàng)建陰影的外觀。
opacity: 0.7 使偽元素部分透明。
z-index: -1 將偽元素定位在父元素后面。
瀏覽器支持91.7 %,需要前綴才能獲得完全支持
蝕刻文本
創(chuàng)建文本顯示為“蝕刻”或刻在背景中的效果。
代碼實現(xiàn):
<p class="etched-text">I appear etched into the background.</p> </styel> .etched-text { text-shadow: 0 2px white; font-size: 1.5rem; font-weight: bold; color: #b8bec5; } </styel>
效果如下:
說明
text-shadow: 0 2px white 創(chuàng)建白色陰影偏移0px 水平和2px 垂直于原點位置。
背景必須比陰影暗,效果才能發(fā)揮作用。
文字顏色應(yīng)該稍微褪色,使其看起來像是刻在背景上的。
瀏覽器支持98.1 %,沒有警告。
漸變文本
為文本提供漸變顏色。
代碼實現(xiàn):
<p class="gradient-text">Gradient text</p> </styel> .gradient-text { background: -webkit-linear-gradient(pink, red); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } </styel>
效果如下:
說明
background: -webkit-linear-gradient(...) 為文本元素提供漸變背景。
webkit-text-fill-color: transparent 使用透明顏色填充文本。
webkit-background-clip: text 用文本剪輯背景,用漸變背景作為顏色填充文本。
瀏覽器支持91.5 %,使用非標準屬性。
總結(jié)
以上所述是小編給大家介紹的css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
- 在開發(fā)中現(xiàn)在對于陰影效果的使用已經(jīng)越來越廣泛了,那么今天我們就來說一說用同樣的手法實現(xiàn)邊框陰影。下面腳本之家小編給大家?guī)砹薍tml/CSS前端實現(xiàn)文字邊框陰影效果,需2018-01-17
- 這篇文章主要介紹了使用Html5、CSS實現(xiàn)文字陰影效果的相關(guān)資料,需要的朋友可以參考下2018-01-17
- 這是一款由腳本之家翻譯自國外網(wǎng)站的在線CSS工具,可通過拖拽來調(diào)整生成盒子模型陰影效果的水平與垂直長度、模糊半徑、擴散半徑、不透明度等屬性,還可自由選擇陰影色、盒2017-09-19
css box-shadow實現(xiàn)曲邊陰影與翹邊陰影
這篇文章主要介紹了css box-shadow實現(xiàn)曲邊陰影與翹邊陰影,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-05css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光),通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11純css3使用transform屬性控制文字變形3D陰影效果源碼
這是一款基于純css3使用transform屬性控制文字變形3D陰影效果源碼。界面上的文字呈現(xiàn)出多層陰影漸變層疊出現(xiàn)的展示效果。主要通過css3的transform屬性實現(xiàn)。2017-06-09詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價值,有需要的可以了解一下。2016-12-03- 下面小編就為大家?guī)硪黄?分鐘讓你掌握css3陰影、倒影、漸變小技巧(小編推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-15
css3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例
下面小編就為大家?guī)硪黄猚ss3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-10