使用Html5、CSS實現(xiàn)文字陰影效果
我要評論前兩天有一個學(xué)html5前端小美女問我一個有關(guān)文字陰影的效果怎么去實現(xiàn)。她和我說文字陰影嘛,她也知道text-shadow,.但是卻做不出想要的樣子,其實css3的新功能是很強大的,不要把你的思想太過于局限化,好了,閑話也不多說,咱們就先來看看這個文本陰影.
一.文字陰影
text-shadow 文字陰影參數(shù): 參數(shù)1 : 第1個長度值用來設(shè)置對象的陰影水平偏移值?？梢詾樨撝?參數(shù)2 ：第2個長度值用來設(shè)置對象的陰影垂直偏移值?？梢詾樨撝?參數(shù)3 ：如果提供了第3個長度值則用來設(shè)置對象的陰影模糊值。不允許負值參數(shù)4 ： 設(shè)置對象的陰影的顏色
text-shadow: 10px 10px 50px #000;
二.實例
上圖的效果我們怎樣來實現(xiàn)呢?
HTML結(jié)構(gòu) CSS樣式字體樣式字體顏色文本陰影 那我們來看一下具體代碼:
HTML:
<div class="text">【千錘百煉】尚學(xué)堂</div>
CSS:
.text{
font: bold 100px/1.5 '微軟雅黑';
color: dodgerblue;
/*文本陰影*/
text-shadow: 10px 10px 50px #000;
/*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}
現(xiàn)在我們來看看前端小美女問我的效果該怎么做..
其實非常簡單了,我們來直接上代碼~
HTML:
<div class="text">【千錘百煉】尚學(xué)堂</div>
CSS:
body {
background: #000;
color: #fff;
}
.text{
font: bold 100px/1.5 georgia, sans-serif;
/*不同顏色的,多個不同值的模糊大小*/
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}
發(fā)散你的思維,其實css3樣式非常有趣,有時候往往是一點點改變,就可以實現(xiàn)很炫的效果^.^
總結(jié)
以上所述是小編給大家介紹的使用Html5、CSS實現(xiàn)文字陰影效，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在開發(fā)中現(xiàn)在對于陰影效果的使用已經(jīng)越來越廣泛了,那么今天我們就來說一說用同樣的手法實現(xiàn)邊框陰影。下面腳本之家小編給大家?guī)砹薍tml/CSS前端實現(xià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-05
css3 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
css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果
這篇文章主要介紹了css實現(xiàn)動態(tài)陰影、蝕刻文本、漸變文本效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-22
