css文字效果(文字剪貼蒙版,text-shodow的應用,文字排版等…)

記錄幾種常見的文字效果css

示例查看:http://pangyongsheng.github.io/cssFont/

1、文字剪貼蒙版

在PS中,對文字圖層柵格化,而後可將其餘圖層建立爲文字的剪貼蒙版,而在css中要實現相似的文字效果,咱們須要先設置背景裁剪(background-clip)爲文字(text),而後將字體顏色(color)或者文字填充(text-fill-color)設置爲透明(transparent)便可實現將背景轉化爲當前元素的剪貼蒙版的相同效果;git

 

爲了更好的效果首先咱們定義一個簡單的的公共樣式,以下:github

.div{
    font-weight: bold;
    font-size80px;
    margin50px;
    border10px dashed #666;
}

一、背景圖片剪貼蒙版

設置背景圖片,設置背景裁剪和文字顏色web

.bg-clip{
    background-imageurl(../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-imagelinear-gradient(
              45deg, 
              #ccc 0%, #ccc 30%, 
              #00B4F1 0%, #00B4F1 70%, 
              #ccc 0%, #ccc 100%);
    background-size50% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color:transparent;
    background-position0% 50%;
    animation: aitf 8s linear infinite;
}
@keyframes aitf {
    0% { background-position0% 50%; }
    100% { background-position100% 50%; }
}
<div class="div bg-clip3">剪貼蒙版動畫效果</div>

2、text-shadow的應用

text-shadow有四個屬性值字體

屬性
h-shadow 水平陰影的位置。容許負值
v-shadow 必需。垂直陰影的位置。容許負值是
blur 可選。模糊的距離
color 可選。陰影的顏色

text-shadow屬性能夠向文本添加一個或多個陰影,咱們可由此做出許多不一樣的有趣效果,如下僅爲幾個參考示例:動畫

一、文字的投影效果

最基本的投影效果ui

.shadow1 {
    color: red;
    text-shadow5px 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-shadow1px 0px 0px #00B4F1,2px 0px 0px #00B4F1,3px 1px 0px #00B4F1,0px 1px 0px #000;
}

五、文字的發光效果

添加兩層無偏移的白色投影

.shadow5 {
    color: blue;
    background-color:#949191;
    text-shadow0px 0px 3px white, 0px 0px 5px white;
}

3、文字的排版

一、文字的環形排版
這裏應用了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{
    width300px;
    height300px;
    margin100px;
}
.circlar svg{
    display: block;
    overflow: visible;
}

二、自右向左的豎排文字

經過設置writing-mode的值內容塊固有的書寫方向

屬性
vertical-rl 垂直的自右到左
vertical-lr 垂直的自左到右
sideways-rl 水平的自右到左
sideways-lr 水平的自左到右

示例:

.tbl{
    margin100px;
    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元素添加換行;

相關文章
相關標籤/搜索