|
內(nèi)投影效果很明顯，很正吧，只要稍加改造就是內(nèi)發(fā)光了，啊哈哈.....笑歸笑，分析下實現(xiàn)原理先：
既然在一個div層上面實現(xiàn)不了內(nèi)投影，那么就用多幾個層，但是不要在html中添加多余的標簽，所以自然而然的就想到用偽類，于是我用了個:after, content里面寫上跟div里面一樣的文字，結(jié)果居然樣式一模一樣（之前都是寫空格什么的，沒有寫過文字）；
我把.text層相對定位，.text:after絕對定位疊在它上面，因為樣式一樣，所以說完全重疊的，然后就試著用text-shadow來做效果，但是文字自身的顏色比投影的高，如圖：
本身的文字顏色是實體的，感覺處理起來會比較麻煩，所以我下意識的用rgba隱藏它，設置了文字的alpha為0，這里用rgba是因為我只想隱藏文字本身的顏色層，如果用opacity的話，整個層都會消失；所以我用color:rgba(0,0,0,0);來實現(xiàn)效果，寫在.text的話就是隱藏掉.text的文字本身顏色層，同時.text：after也會繼承這隱藏屬性，如果你單單想隱藏掉.text：after的話，那就在.text：after里面寫，這樣.text本身的顏色層就會保留；然后再在.text用text-shadow: 0px 0px 0px #000000;投影出一個不偏移不羽化的實體投影打底色，接著就是.text：after的投影層了，ps羽化選區(qū)的時候，是根據(jù)選區(qū)邊界為中心，向兩邊羽化，如果羽化值為10px，那么就是左右各5px,那么以選區(qū)邊界為中心的10px像素范圍會減緩的從不透明過渡到全透明，如圖：
中心是紅色，背景是黃色，羽化的時候原來不透明的紅色區(qū)域也出現(xiàn)了半透明狀態(tài)與背景黃色相融呈橙色，然而說這么多羽化的東西有什么用呢? 有用的，如果我們把背景色定死一個區(qū)域，上面的層羽化的話，會出現(xiàn)什么情況呢? 看下面這個ps圖片你就應該明白了：
下面是一個“廣州”的黑色純文本文字，然后我復制多一個圖層出來柵格化然后高斯模糊它，結(jié)果模糊層透過下面看到部分黑色純文本文字與上面的紅色半透明區(qū)域融合，視覺上有點內(nèi)陰影的感覺。這個就是我實現(xiàn)純css3內(nèi)發(fā)光的原理：一個.text純文字層，一個.text:after層疊在上面投影產(chǎn)生內(nèi)發(fā)光視覺錯覺，這個也就是為什么要設置文字顏色透明的原因，假如文字本身有顏色，那么就會擋住半透明，這樣背景色就給擋住了，給普通投影沒區(qū)別。不過這個方法有瑕疵，而且很致命，就是羽化多出邊界的會有羽化的紅色，如果投影紅色換成白色，這樣跟背景融合，效果沒話說，但是如果用與底色區(qū)別太明顯的顏色，這樣就惡心了，不過可以調(diào)節(jié)成為“外發(fā)光”效果，事在人為。
出處：藍色理想
責任編輯：bluehearts
上一頁 純CSS3文字漸變內(nèi)發(fā)光投影效果 [1] 下一頁 純CSS3文字漸變內(nèi)發(fā)光投影效果 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 純CSS3文字漸變內(nèi)發(fā)光投影效果 [2]
