記錄幾種常見的文字效果css
在PS中,對文字圖層柵格化,而後可將其餘圖層建立爲文字的剪貼蒙版,而在css中要實現相似的文字效果,咱們須要先設置背景裁剪(background-clip)爲文字(text),而後將字體顏色(color)或者文字填充(text-fill-color)設置爲透明(transparent)便可實現將背景轉化爲當前元素的剪貼蒙版的相同效果;git
爲了更好的效果首先咱們定義一個簡單的的公共樣式,以下:github
.div{
font-weight: bold;
font-size: 80px;
margin: 50px;
border: 10px dashed #666;
}
設置背景圖片,設置背景裁剪和文字顏色web
.bg-clip{
background-image: url(../img/1.jpg);
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color:transparent;
}
<div class="div bg-clip">圖片背景文字剪貼蒙版</div>
效果如上第一個app
使用線性漸變設置一個七彩條紋的背景,而後設置背景裁剪爲text和文字填充顏色爲透明:ide
.bg-clip2{
background:linear-gradient(
90deg,
red 0%,red 14.3%,
orange 0,orange 28.6%,
yellow 0,yellow 42.9%,
green 0,green 57.2%,
blue 0, blue 71.5%,
indigo 0,indigo 85.8%,
violet 0, violet 100%
);
background-repeat:no-repeat;
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
<div class="div bg-clip2">漸變背景文字剪貼蒙版</div>
同上,首先設置一個漸變背景,但這裏咱們background-size寬度設爲50%,最後在添加一個背景移動的動畫:svg
.bg-clip3{
background-image: linear-gradient(
45deg,
#ccc 0%, #ccc 30%,
#00B4F1 0%, #00B4F1 70%,
#ccc 0%, #ccc 100%);
background-size: 50% 100%;
-webkit-background-clip: text;
background-clip: text;
color:transparent;
background-position: 0% 50%;
animation: aitf 8s linear infinite;
}
@keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
<div class="div bg-clip3">剪貼蒙版動畫效果</div>
text-shadow有四個屬性值字體
屬性 | 值 |
---|---|
h-shadow | 水平陰影的位置。容許負值 |
v-shadow | 必需。垂直陰影的位置。容許負值是 |
blur | 可選。模糊的距離 |
color | 可選。陰影的顏色 |
text-shadow屬性能夠向文本添加一個或多個陰影,咱們可由此做出許多不一樣的有趣效果,如下僅爲幾個參考示例:動畫
最基本的投影效果ui
.shadow1 {
color: red;
text-shadow: 5px 5px 5px #000;
}
對文字添加四個分別向上下左右位移爲1px的紅色投影,便可實現紅色描邊效果
.shadow2 {
color: white;
text-shadow: -1px 0px 1px red, 1px 0px 1px red, 0px -1px 1px red, 0px 1px 1px red;
}
對文字添加向左上偏移1px的黑色(暗)模糊值較小的投影,再分別添加向右和向下的藍色(亮色)模糊值較大的投影,便可實現文字浮雕特效
.shadow3 {
color: white;
text-shadow: -1px -1px 3px black, 0 0 5px blue, 0 0 8px blue;
}
文字設爲白色,添加向左1px的黑色投影,添加向右和向下的藍色投影:
.shadow4 {
color: white;
text-shadow: 1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;
}
添加兩層無偏移的白色投影
.shadow5 {
color: blue;
background-color:#949191;
text-shadow: 0px 0px 3px white, 0px 0px 5px white;
}
一、文字的環形排版
這裏應用了svg路徑實現,建立一個圓形的路徑,在和元素寫入文本,經過xlink:href屬性把它鏈到咱們的圓上,設置圓形填充爲none,svg標籤overflow爲visib,參考以下:
<div class="circlar">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1, 1 0, 1 z" id="circle"></path>
<text>
<textPath xlink:href="#circle">
這是一個圓形文字效果w(゚Д゚)w ~~~!!!
</textPath>
</text>
</svg>
</div>
.circlar path{
fill: none;
}
.circlar{
width: 300px;
height: 300px;
margin: 100px;
}
.circlar svg{
display: block;
overflow: visible;
}
經過設置writing-mode的值內容塊固有的書寫方向
屬性 | 值 |
---|---|
vertical-rl | 垂直的自右到左 |
vertical-lr | 垂直的自左到右 |
sideways-rl | 水平的自右到左 |
sideways-lr | 水平的自左到右 |
示例:
.tbl{
margin: 100px;
writing-mode:vertical-rl;
}
.tbl>span::after{
content: '\A';
white-space: pre;
}
<div class="tbl">
<span>何日歸家洗客袍?</span>
<span>銀字笙調,心字香燒。</span>
<span>流光容易把人拋,紅了櫻桃,綠了芭蕉。</span>
</div>
三、換行
最後安利一種文字換行的方法,在上一的示例中已有使用:在Unicode中有一個轉義字符是等同於換行的:0x000A。在CSS中,能夠寫成"\000A",或"\A",經過僞類加入標籤,便可實現各個標籤的換行,如上示例中爲沒一句詩的span元素添加換行;