19閱讀網  |  最近更新  |  TAG  | 
19閱讀網
當前位置:首頁 > css文字顏色漸變

css文字顏色漸變

來源:互聯網 時間:2017-07-20 閱讀: 手機版

篇一:css文字顏色漸變

這篇文章發布于 2011年04月20日,星期三,22:47,歸類于 。

閱讀 36910 次, 今日 55 次

by from

本文地址:

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

可以狠狠地點擊這里:

如果您手頭上的瀏覽器是Chrome或是Safari,則您可以在demo頁面中看到類似下面的效果:

方法一下的文字漸變效果 張鑫旭-鑫空間-鑫生活

相應的HTML代碼如下:

h2 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代碼可以看出,效果的實現除了以外,主要是使用了mask-image屬性,內容則是了。

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

您可以狠狠地點擊這里:

如果您手頭上的瀏覽器是Chrome或是Safari,則您可以在demo頁面中看到類似下面的效果:

方法二下的文字漸變效果 張鑫旭-鑫空間-鑫生活

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

h2 >天賜美妞 /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瀏覽器下有更好的視覺體驗效果,何樂而不為呢?

就這些。感謝閱讀。參考文章:

原創文章,轉載請注明來自[]

本文地址:

(本篇完)

相關文章 (0.502) (0.281) (0.222) (0.222) (0.213) (0.190) (0.190) (0.150) (0.136) (0.135) (RANDOM - 0.010)

篇二:css文字顏色漸變

先來看看效果:

CSS3 文字漸變效果 - 獨行冰海 - 獨行冰海 使用到的知識點如下:對背景添加線性漸變:background:linear-gradient效果如下:CSS3 文字漸變效果 - 獨行冰海 - 獨行冰海 對文字進行透明處理:color:transparent(此時會顯示出文字后面的背景顏色)此時效果如下: 最后僅僅針對文字應用漸變(注意,此特性"text"僅僅在webkit內核的瀏覽器中得到支持)-webkit-background-clip:text;此句代碼作用是只有文字能夠顯示出漸變的背景,但是由于文字色是黑色,會將背景顏色覆蓋掉,因此添加了color的transparent屬性,令文字部分透明,從而達到欲達到的效果

整體代碼如下:

!DOCTYPE HTML

html

head

meta charset="utf-8"

title 讓文字顏色漸變 /title

meta name="Keywords" content=""

meta name="Description" content=""

style type="text/css"

p>

border:1px solid #000;

background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);

-webkit-background-clip:text;/*只有webkit內核支持text的剪切模式*/

color:transparent;

}

/style

link href="" rel="stylesheet"/

/head

body

p>

/body

/html

同樣也可以更改漸變模式為:radial,達到圓形漸變的效果CSS3 文字漸變效果 - 獨行冰海 - 獨行冰海 提示:請使用Safari或谷歌瀏覽器查看效果

篇三:css文字顏色漸變

.text-gradient {

display: inline-block;

color: green;

font-size: 10em;

ont-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;

};

結語

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

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

猜你喜歡

最新文章

熱門文章

黑龙江快乐十分实时