從展示的效果可以猜到這個效果由3層文字組成。
要實現多層文字,我首先想到的是文字投影 text-shadow ,但通常 text-shadow 只能投個純色出來。
于是思路要改一下,黑色和白色層是投影,斑馬條紋是真正的文字本身。
看到這種條紋效果,我想到了背景圖漸變。
第一種思路不推薦,因為作為一個有追求的前端能不使用圖片就盡量別使用圖片!
漸變紋路的想法確定后,就可以使用 background-clip: text 規定背景圖案渲染到文本中。
這個方法經常用來做文字特效。
要將背景渲染到文本中還需要把文字原本的顏色設置成透明,這樣才能把背景圖案顯示出來。
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-text-fill-color 是用來指定文字填充顏色,如果同時出現 -webkit-text-fill-color 和 color,-webkit-text-fill-color 將覆蓋 color 的顏色。
但 -webkit-text-fill-color 并不是標準屬性,這里之所以這樣寫,是因為怕 color 被其他更高權重的規則覆蓋了。
多數人使用box-shadow的方法是,指定三個長度值和一個顏色值
box-shadow: 2px 3px 4px rgba(0,0,0, .5);
這句話的意思就是:
使用4px的模糊半徑意味著投影的尺寸會比元素本身的尺寸大約8px(上下左右各4px),因此投影的最外圈會從元素外顯露出來.所以我們只需要改變偏移量,就可以把投影的頂部和左側隱藏起來,只要這兩個方向上的偏移量不小于4px就可以。
box-shadow: 5px 5px 4px rgba(0,0,0, .5);
但是這樣的話,在某種程度上會導致外露的投影太過濃重,看起來不美觀。
另外就算勉強可以接受,我們想要的是單側投影,而不是相鄰的兩側。
最終的解決方案是box-shadow的第四個長度參數,它是擴張半徑:
這個參數會根據你指定的值去擴大或(當指定負值時)縮小投影的尺寸。
舉例來說,一個-5px的擴張半徑會把投影的寬度和高度縮小10px - 每邊各5px。因此如下時,完全沒有投影:
box-shadow: 0px 0px 4px -4px rgba(0,0,0, .5);
所以,此時給投影一個正的垂直偏移量就會產生單側投影:
box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5);
如果把單側投影的方式運用兩次就會得到雙側投影:
box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5),
0px -5px 4px -4px rgba(0,0,0, .5);
最后是實驗的全部代碼
影經常出現在設計師的設計稿中,web想要實現投影效果必須借助圖片,圖片的大小尺寸、自適應問題的存在,使得整個投影很“尷尬”,shadow屬性可以很好的還原投影效果,利用投影可以大大提高web呈現效果,區塊投影、文字投影各有各的妙用!!!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。