CSS3實現漸層文字效果

來源:互聯網
上載者:User
本文主要和大家分享CSS3實現漸層文字效果,我們主要和大家分享兩種方法,希望能協助到大家。

一、方法一:藉助mask-image屬性

方法一下的文字漸層效果

相應的HTML代碼如下:


<h2 class="text-gradient" data-text="天賜美妞">天賜美妞</h2>

與HTML相對應的CSS代碼如下:


.text-gradient {      display: inline-block;    font-family: '微軟雅黑';    font-size: 10em;    position: relative; }    .text-gradient[data-text]::after {      content: attr(data-text);      color: green;      position: absolute;      left: 0;      z-index: 2;    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));}

從CSS代碼可以看出,效果的實現除了“content內容產生技術”以外,主要是使用了mask-image屬性,內容則是“webkit核心瀏覽器下的漸層”了。

二、方法二:background-clip + text-fill-color下的實現

方法二下的文字漸層效果

此處實現相對上面要簡單些,HTML代碼如下:


<h2 class="text-gradient">天賜美妞</h2>

與HTML相對應的CSS代碼如下:


.text-gradient {      display: inline-block;    color: green;    font-size: 10em;    font-family: '微軟雅黑';    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;};

CSS代碼中關鍵有用的其實就是最後三行:


background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));-webkit-background-clip: text;-webkit-text-fill-color: transparent;

此方法雖然使用的CSS屬性相對多些,但是結構簡單,易於控制,顏色的選取與控制也更精確,理解上也更容易理解。我個人是推薦使用方法二的。

三、結語

由於目前text-fill-color與mask-image屬性貌似就webkit核心的瀏覽器支援,所以兩個demo頁面只能在Chrome瀏覽器或是Safari瀏覽器下才能看到漸層效果。Firefox瀏覽器下純色,IE下就更不用說了。

但是,文字漸層本身就是裝飾性的功能,所以,本著漸進增強原則,我們在實際項目中其實是可以大膽使用的。在不影響原來功能基礎上,幾行CSS代碼,讓佔有率愈來愈高的Chrome瀏覽器下有更好的視覺體驗效果,何樂而不為呢?

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.