早上設計師妹子把設計稿交付過來,乍一看,上面的文字顏色漸變的,而且文字內容是動態的,也就是我們無法用圖片來代替。作為一個有責任擔當的漢子,堅決不能說不行。
想起了CSS3 擅長做顏色漸變。所以趕緊查看了一下文檔,看看CSS3在對字體顏色漸變的實現上有沒有相關的方案。
我試了一下,強大的CSS3給我們提供相關的特性,能讓我們很方便地就實現字體顏色漸變,看下面這段代碼:
<h1 class='beauty-font' text=< span >'web前端教程'>
web span>前端教程
</h1>
<style>< br> .beauty-font{
display: inline-block;
font-size: 80px;
position: relative span>;
color: red;
}
.beauty -font:after {
content: attr(text);
position: absolute;
left: 0 span>;
z-index: 2;
color:black;
-webkit-mask: -webkit-gradient(
linear,
left top,
right top,
from(rgba(0,0< span >,0,0.1)),
to span>(rgba(0,0,0 span>,0.8)));
);
}
< /style>
最後實現的效果如下:
(效果圖)
我們來詳細學一下字體漸變的實現,這裡使用到的幾個核心特性有:content內容生成技術和漸變蒙版。
1.content內容生成技術
說起偽類 :after 大家一定不陌生,在日常開發中我們會經常用到它。我們經常會這樣使用:
.demo:after{
content: 'web前端教程 ';
}
但很少人知道,content屬性的值除了使用文本之外,還可以直接訪問讀取標籤的一些屬性值。使用的方法是: attr() ,參見如下的代碼:
<div class=< span >'demo' text='web前端教程'>< /span></div>
. demo:after{
content : attr(text);
}
以上這種寫法同樣能給content屬性賦值:“web前端教程”。
2.漸變蒙版
漸變蒙版的實現主要是靠CSS3的 -webkit-mask 和 -webkit-gradient 配合著使用。
-webkit-mask 主要是用來給一個元素添加一個蒙版。蒙版可以是透明的png圖片也可以是CSS3的漸變效果。在這裡我們使用CSS3的 -webkit-gradient 來實現漸變效果。
大家上面看到的字體顏色漸變的效果就是用這兩個屬性來實現的。我把實現的效果拆分一下,大家就一目了然。如下圖:
大家看到最後的字體漸變效果,其實是兩個字體疊加出來的效果:原始元素+蒙版。在這裡給大家講解了字體實現漸變的原理,有興趣的同學可以自己實現一個,CSS3的語法就不在這裡展開了,具體的語法不熟悉的話可以翻查相關文檔,相信大家很容易就能上手。
不過這些CSS3屬性還沒有被所有瀏覽器所支持。但相信在不久的將來這些屬性都會被其他瀏覽器所支持,目前在還沒有支持這些屬性的瀏覽器中,我們只能採用優雅降級的方式處理。
熱門文章
原創教程:《ECMAScript 6 教程》
附加習題:《ECMAScript 6 教程》測試題
原創教程:《Vue2.0基礎教程》
原創教程:《Vue2.0進階教程》
附加習題:《Vue2.0基礎教程》測試題
職場感悟: span>混口飯吃,談不上喜歡
感到迷茫:我很努力,但依然很迷茫
薪資待遇:那麼點工資,能招到人嗎?
培訓出身:我是一個培訓出身的程序員
培訓費用:花1.8萬參加前端培訓,值嗎?
培訓簡歷:簡歷包裝成1-2年經驗,咋辦?
搞笑黑話:互聯網公司黑話,搞笑到爆
職業自由:程序員職業自由的6個階段
職場形象:在別人眼裡,程序員是這樣的
文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/Designer%20girl%20asked%20Font%20color%20gradient%20can%20you%20achieve%20it.html
评论列表(196条)
测试