|
今天群上面同志們?cè)谟懻揷ss3內(nèi)發(fā)光效果，自己也就研究一下，寫(xiě)了個(gè)效果出來(lái)，涉及css3投影，漸變，蒙版，偽類(lèi)等知識(shí)點(diǎn)，現(xiàn)在寫(xiě)下設(shè)計(jì)思路，僅供參考。發(fā)個(gè)效果圖大家看先：
一般我們都是用css3的box-shadow來(lái)實(shí)現(xiàn)盒投影，用text-shadow來(lái)實(shí)現(xiàn)文字投影，box-shadow設(shè)置方型盒子投影，用raidus的話可以讓盒子產(chǎn)生圓角，看起來(lái)就很圓滑舒服，一般的寫(xiě)法是這樣的：
-moz-box-shadow:1px 1px 5px #000;
1px(水平方向偏移) 1px(垂直方向偏移) 5px(陰影羽化) #000(顏色);
當(dāng)偏移量為負(fù)數(shù)時(shí)就向反方向偏移，試試就明白了，這里不貼圖。
這個(gè)是一般的投影效果，如果是內(nèi)陰影，那么就加個(gè)“inset”屬性，寫(xiě)法如下：
-moz-box-shadow:inset 1px 1px 5px #000;
這樣就變成了PS里面的內(nèi)陰影，效果很贊，很實(shí)用，如果需要內(nèi)發(fā)光效果，則背景底色深，投影顏色淺，這樣就會(huì)感覺(jué)是發(fā)光，而背景顏色深，投影顏色淺，這樣看起來(lái)就是投影了；
不過(guò)群里面討論的是文字的投影內(nèi)發(fā)光，上面的是順便提提而已，下面才是正題：
文字是用text-shadow來(lái)產(chǎn)生陰影，而且產(chǎn)生的時(shí)候能跟隨文字的輪廓投影，如下所示：
text-shadow:2px 2px 1px #000;
如果用box-shadow的話效果是這樣的：
會(huì)根據(jù)放文字容器的盒子來(lái)投影(我設(shè)定了容器的寬度200px，背景未設(shè)定顏色透明)，不會(huì)跟隨文字輪廓投影，效果不是我們所要的；
然而text-shadow沒(méi)有inset屬性，這個(gè)就比較棘手了，怎么才能實(shí)現(xiàn)文字內(nèi)投影，同時(shí)還有文字漸變？
一層一層來(lái)，一般ps處理文字效果都是一層層的剝離，先從文字內(nèi)發(fā)光入手：
我寫(xiě)了這么一個(gè)頁(yè)面試內(nèi)發(fā)光，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
body{ background:#CCCCCC;}
.text{ font-size:100px; font-family:"微軟雅黑"; color:rgba(0,0,0,0); font-weight:bold; position:relative;text-shadow: 0px 0px 0px #000000;}
.text:after{ content:"廣州-龍"; position:absolute; left:0px; text-shadow:0px 0px 3px #fff;}
</style>
</head>
<body>
<div class="text">廣州-龍</div>
</body>
</html>
或者你可以下載這個(gè)代碼頁(yè)面看看：text.html
效果圖如下：
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 純CSS3文字漸變內(nèi)發(fā)光投影效果 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 純CSS3文字漸變內(nèi)發(fā)光投影效果 [1]
第 2 頁(yè) 
