欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

IE下實現(xiàn)類似CSS3 text-shadow文字陰影的幾種方法

  發(fā)布時間:2011-05-11 23:36:37   作者:佚名   我要評論
IE9瀏覽器確實不支持CSS3 text-shadow屬性,且根據(jù)最近的IE10 preview版的反饋,IE10瀏覽器也是不支持text-shadow屬性的
一、開始的擦邊話
為了測試IE9瀏覽器,下午晃晃蕩蕩把系統(tǒng)換成window7的了。果然,正如網(wǎng)上所傳言的一樣,IE9瀏覽器確實不支持CSS3 text-shadow屬性,且根據(jù)最近的IE10 preview版的反饋,IE10瀏覽器也是不支持text-shadow屬性的。至于為何不支持,就像女孩的心思一樣,我也是百思不得其解。

不過考慮到text-shadow的更多的是效果性質(zhì)的屬性,且潛力有限,所以,就我個人而言,最近版本的IE瀏覽器不支持該屬性我還是相對比較淡然的。雖然IE瀏覽器不支持text-shadow文字陰影屬性,但是我們可以使用一些特殊的手段,或是方法實現(xiàn)類似于文字陰影的效果,而本文就將簡單展示幾種我所知的方法。

二、glow濾鏡下的文字陰影效果
IE濾鏡中有個名叫g(shù)low的濾鏡,用來實現(xiàn)光暈效果,于是,我們可以用來實現(xiàn)無方向的文字陰影效果。

該濾鏡最簡單的使用類似下面:

filter:glow(color=black,strength=5);
上面實現(xiàn)的效果就是5像素擴(kuò)散大小的黑色光暈,效果類似下面(截自IE9瀏覽器):
光暈效果濾鏡下的文字效果 張鑫旭-鑫空間-鑫生活

demo頁面中效果想對應(yīng)的CSS代碼如下:

復(fù)制代碼
代碼如下:

.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; color:#fff; text-shadow:0 0 5px rgb(0, 0, 0); font-size:36px; font-family:"微軟雅黑"; float:left; filter:glow(color=black, strength=5);

對應(yīng)HTML代碼如下:

復(fù)制代碼
代碼如下:

<div class="bg">
<h4 class="font">張小姐長大了!</h4>
</div>

不足
1. 雖然IE瀏覽器的glow光暈濾鏡可以實現(xiàn)勉強(qiáng)可以稱為的文字陰影效果,但是其效果相比原生的text-shadow屬性就是玄彬和郭德綱的區(qū)別,如下firefox4下的text-shadow屬性效果:
Firefox4下的效果 張鑫旭-鑫空間-鑫生活

并且對不同顏色的支持效果大相徑庭,例如,我們把光暈的黑色改成灰色,看看IE9瀏覽器下的效果:
灰色光暈下的效果 張鑫旭-鑫空間-鑫生活

可以看到不僅光暈顏色不純(雜色叢生),且文字邊緣也有不和諧的黑色糙邊,讓人不僅感嘆:你能不能再丑一點。

2. 既然是光暈濾鏡,就決定了此方法實現(xiàn)的文字陰影效果是無方向性的,就四周均勻擴(kuò)散性質(zhì)的。這是該方法一個較大的局限性。
三、MotionBlur濾鏡下的文字陰影效果
IE濾鏡中有個名叫MotionBlur的濾鏡,用術(shù)語稱呼其為“動感模糊濾鏡”。該濾鏡使用的示例如下:

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
用中文釋義就是:145度方向上5像是大小的動感模糊。產(chǎn)生的效果基本上就是下面這幅模樣:
動感模糊的文字陰影效果demo 張鑫旭-鑫空間-鑫生活

demo頁面中相關(guān)的CSS代碼如下:

復(fù)制代碼
代碼如下:

.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; color:#fff; font-size:36px; font-family:"微軟雅黑"; text-shadow:1px 1px 5px #fff; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); float:left;}

對應(yīng)HTML代碼與上面一致,如下:

<div class="bg">
<h4 class="font">張小姐長大了!</h4>
</div>
不足
1. MotionBlur濾鏡雖然有了方向性,也可以設(shè)定大小,但是,其模糊出來的投影顏色卻只能是文字本身的顏色。也就是說,單單一個標(biāo)簽,一個濾鏡是無法實現(xiàn)類似于文字白色,投影黑色這種效果的。但是,這種先天性的不足也是可以通過某些手段修復(fù)的。

2. 此濾鏡在應(yīng)用動感模糊的同時本身也被模糊了,相對于挖自己身上的肉填飽自己饑餓的肚子。這種實現(xiàn)效果顯然是會大打折扣的,看看正經(jīng)八百text-shadow屬性下的白色投影效果(圖片截自chrome瀏覽器):

Chrome瀏覽器下的文字投影效果 張鑫旭-鑫空間-鑫生活

正所謂人比人,氣死人啊。兩者的效果差距可以趕上鳳姐和志玲姐的差距了。然而,通過某些小手段,我們也可以讓MotionBlur濾鏡下的文字陰影效果爺變得很贊,這就是下面一節(jié)的內(nèi)容。
四、MotionBlur濾鏡下文字陰影效果進(jìn)一步優(yōu)化
路上有坑怎么辦?很簡單,填上就好,如果沒有實物填充,蓋個蓋子什么的也是好的。所以,正如上面說到,文字應(yīng)用動感濾鏡實現(xiàn)投影效果好比割肉補(bǔ)瘡,現(xiàn)在,我們只要在被割掉的那塊肉上再補(bǔ)上一塊不就OK了嗎?

您可以狠狠地點擊這里:MotionBlur濾鏡下文字陰影效果優(yōu)化demo

結(jié)果在IE9瀏覽器的兼容模式下(貌似是IE7 的核)的效果如下圖:
兼容模式下的動感模糊濾鏡下的效果 張鑫旭-鑫空間-鑫生活

效果看上去要舒服多了。效果實現(xiàn)的原理是兩端一模一樣的文字相互重疊,背后的文字動感模糊,前面的文字就是很純潔的文字了。

CSS代碼如下:

復(fù)制代碼
代碼如下:

.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; font-size:36px; font-family:"微軟雅黑";}
.text{color:#fff; position:absolute;}
.sh{color:#000; text-shadow:1px 1px 5px #000; filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); *zoom:1;}

HTML代碼如下:

復(fù)制代碼
代碼如下:

<div class="bg">
<h4 class="font"><span class="text">張小姐長大了!</span><div class="sh">張小姐長大了!</div></h4>
</div>

考慮到不同IE瀏覽器下的兼容性問題,作為陰影效果的文字標(biāo)簽需要使用block水平的標(biāo)簽,且需要在IE6/IE7瀏覽器下haslayout。另外,這里的文字重疊是借助了absolute絕對定位元素的無高度性和無寬度性實現(xiàn)的。具體可參見我之前的“CSS 相對/絕對(relative/absolute)定位系列(二)”以及相關(guān)系列的文章。

不足
由于要借助于兩段不同的文字實現(xiàn)效果,所以,此方法不使用與長篇大論文字處的投影效果實現(xiàn),像是標(biāo)題啊,導(dǎo)航啊這些文字不是很多的地方就可以使用使用。
五、遠(yuǎn)離text-shadow和濾鏡的文字陰影實現(xiàn)
這里實現(xiàn)的原理的精髓其實跟上面的其實一致,兩段一模一樣的文字,重疊顯示,不過,投影效果是通過兩段文字的錯位差實現(xiàn)的,例如通過margin負(fù)值讓上下的文字出現(xiàn)1像素的偏移。

您可以狠狠地點擊這里:margin錯位下的文字投影效果demo

在IE下的效果如下圖:
IE下的文字投影效果 張鑫旭-鑫空間-鑫生活

在FireFox瀏覽器下效果為:
Firefox瀏覽器下的文字陰影效果 張鑫旭-鑫空間-鑫生活

可以發(fā)現(xiàn),此方法實現(xiàn)的效果是真正意義上的兼容,基本上像素毫厘不差。

相關(guān)CSS代碼如下:

復(fù)制代碼
代碼如下:

.bg{width:512px; height:340px; margin:1em auto; background:url(http://image.zhangxinxu.com/image/study/s/s512/mm19.jpg);}
.font{margin:0; padding:1em; font-size:36px; font-family:"微軟雅黑"; float:left;}
.sh{margin:-1px 0 0 -1px; color:#fff; position:absolute;}

HTML代碼如下:

復(fù)制代碼
代碼如下:

<div class="bg">
<h4 class="font"><span class="sh">張小姐長大了!</span><div>張小姐長大了!</div></h4>
</div>

不足
文字陰影效果的大小有限,且無法很好的實現(xiàn)透明度變化的投影效果。1像素的偏移投影是其最適用的情況。

六、快速的結(jié)語
就當(dāng)文章寫到這兒的時候,我突然想到,IE下還有個模糊濾鏡,如果結(jié)合文字重疊技術(shù),豈不第一個例子的四周擴(kuò)散型投影效果有了較好的UI表現(xiàn)。不過礙于自己精力有限,門衛(wèi)師傅也要休息,這里就不折騰了,有興趣您可以嘗試下IE模糊濾鏡(blur)下的文字投影效果。
當(dāng)然,一個人的智慧畢竟有限。如果您有比較好的實現(xiàn)文字陰影效果的方法,歡迎分享。
另外,由于重裝系統(tǒng)的原因,IE8,IE6等瀏覽器暫時沒有機(jī)會測試,所以,自己不確定這些瀏覽器下的表現(xiàn)是否令人滿意。如果有什么糟糕的地方,歡迎指正。文中要是有表述不準(zhǔn)確的地方也歡迎指正。

感謝閱讀。 原創(chuàng)文章,轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活

相關(guān)文章

  • 純CSS3代碼實現(xiàn)文字描邊

    CSS3作為新興的前端技術(shù)可以實現(xiàn)很多復(fù)雜變化的效果,比如文字描邊。這里主要用到text-shadow屬性,顧名思義就是為文字加上陰影效果,本文給大家介紹純CSS3代碼實現(xiàn)文字描
    2016-04-25
  • 簡單掌握CSS3將文字描邊及填充文字顏色的方法

    這篇文章主要介紹了CSS將文字描邊及填充文字顏色的方法,分別為text-stroke和text-fill-color屬性的使用方法講解,注意瀏覽器的兼容問題,需要的朋友可以參考下
    2016-03-07
  • CSS3利用text-shadow屬性實現(xiàn)多種效果的文字樣式展現(xiàn)方法

    下面小編就為大家?guī)硪黄狢SS3利用text-shadow屬性實現(xiàn)多種效果的文字樣式展現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-25
  • CSS3文本陰影text-shadow屬性詳解

    下面小編就為大家?guī)硪黄P(guān)于CSS3文本陰影text-shadow屬性詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-08-08
  • CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計

    這篇文章主要介紹了CSS3實現(xiàn)千變?nèi)f化的文字陰影text-shadow效果設(shè)計的相關(guān)資料,感興趣的小伙伴們可以參考一下
    2016-04-26
  • CSS3 text-shadow實現(xiàn)文字陰影效果

    這篇文章主要介紹了CSS3 text-shadow實現(xiàn)文字陰影效果的方法,豐富文字排版布局美化效果,感興趣的小伙伴們可以參考一下
    2016-02-24
  • 舉例詳解CSS中的text-shadow文字陰影效果使用

    這篇文章主要介紹了舉例詳解CSS中的text-shadow文字陰影效果使用,text-shadow的運(yùn)用是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-08-19
  • 用CSS的text-shadow制作超炫文字效果全攻略

    這篇文章主要介紹了用CSS的text-shadow制作超炫文字效果全攻略,文中給出了諸多陰影效果示例,超級推薦!需要的朋友可以參考下
    2015-07-23
  • CSS3的文字陰影—text-shadow的使用方法

    前段時間整理了CSS3中的漸變Gradient、透明度RGBA、邊框圓角box-radius三個新屬性的使用方法,這幾次繼續(xù)整理了有關(guān)于CSS3的text-shadow的使用方法,需要了解的朋友可以詳細(xì)
    2012-12-25
  • CSS3基礎(chǔ)(RGBa、text-shadow、box-shadow、border-radius)

    本文介紹CSS 3部分新屬性基礎(chǔ),包括RGBa、text-shadow、box-shadow、border-radius。這些屬性通常用來增強(qiáng)網(wǎng)頁布局和美譽(yù)度。(譯者注:在支持CSS3的瀏覽器如Firefox、Safa
    2012-11-13

最新評論