你是不是想找相關Flash動畫公司: 二維動畫公司 Flash課件制作 宣傳片制作 還是要找北京、上海、西安、廣州、南京的動畫制作公司

flash制作純CSS文本陰影效果實現

編輯:翼虎動漫          操作時間:2010/6/24

 

 

CSS2中的text-shadow屬性能夠很容易的給web頁面中的文本添加陰影,但是到目前為止只有OS X的Safari瀏覽器支持它,今天,我們將為其他瀏覽器創建CSS文本陰影效果,包括Firefox。
討論了多年的text-shadow屬性可以讓你控制頁面元素陰影的顏色、偏移量及模糊度,盡管其還未被廣泛支持,但是某些設計師已經開始決定在任意地方使用CSS text-shadows屬性了。盡管這只是為很少數量的用戶增強性設計。
CSS Text-Shadows Safari實現
如果你使用的是Safari,你將可以看到在白色的背景上有陰影的白色文本:
This is white text, on a white background. Yet in Safari, you can read this, because of the black text-shadow.
如果你不是使用Safari,一下是效果圖:

瀏覽器通用CSS文本陰影
Firefox是個偉大的瀏覽器,但是它不支持以上的效果,所以我決定用CSS實現一個類似的效果,雖然沒有前面你看到的text-shadow屬性效果完美,但是該方法適用于更大范圍的瀏覽器,包括Safari。

This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow. 

HTML代碼
要添加陰影效果,我們在我們的例子段落中創建了個title屬性內容是需要投影的文本的內容一致。因為在該方法中我們重復了文本,所以該方法更適合在標題或文本比較短的段落中,而不適合整個頁面的陰影效果。 

<p class="shadow" title="This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow."><span>This is white text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p>

我們在段落中增強了個<span>標簽用來控制正常的文本的位置以將其與生成的陰影區分開。
The CSS
CSS :before 虛擬元素用來從段落的title屬性中生成陰影,而絕對(absolute)定位用來將正常文本放置于陰影文本之上。

.shadow  { position:relative; display:block; color:#fff; }.shadow span { position:absolute; display:block; top:0px;  }.shadow:
before { display:block; padding:1px; content: attr(title); color:#666;  } 

你可以使用position:absolute控制在相對定位(position:relative)的元素內部的元素的位置。該技能使得我們可以控制正常文本和陰影文本的放置,而又可以在原來的文本流程中使用該元素。
你可以在.shadow中控制文本及陰影的背景顏色、字體等屬性,而可以在.shadow:before中使用padding屬性控制陰影的偏移值,使用color設置陰影的顏色等。

 

 

版權申明 ┊ 業務范圍 ┊ 加入我們  ┊ 聯系方式
翼虎動漫工作室承接各類Flash動畫制作 翼虎口號做客戶滿意的flash訂單。!
地址:上海市青浦區崧澤大道6066號19號樓二樓(整層) 全國免費咨詢熱線:400 804 9112
我們的業務還包括制作各式公交動畫廣告,地鐵動畫廣告,電視動畫廣告以及多媒體設計與制作。
友情鏈接: 北京三維動畫公司 二維動畫制作 Flash動畫制作 北京動畫制作公司 動畫制作公司 蘇ICP備19008057號
黑桃棋牌输钱经历