|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
css3實(shí)現(xiàn)的彩色漸變描邊文字效果
作者:admin 時(shí)間:2021-8-6 10:55:27 瀏覽:前面曾介紹過(guò)不少有關(guān)純CSS實(shí)現(xiàn)文字樣式的文章，如CSS實(shí)現(xiàn)文字顏色漸變效果。本文繼續(xù)介紹一個(gè)有點(diǎn)酷的彩色漸變描邊文字效果，仍然是用純CSS來(lái)實(shí)現(xiàn)。
css實(shí)現(xiàn)的彩色漸變描邊文字
CSS文字樣式屬性其實(shí)沒(méi)有很多，但要用這些屬性去設(shè)計(jì)漂亮的字體樣式，需要細(xì)心琢磨，靈活運(yùn)用這些CSS屬性。
雖然同樣是文章描邊效果，但跟前面那些文章介紹的案例相比，代碼卻有所不同，這代表設(shè)計(jì)思路的不同。
我們先來(lái)看看完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Gradient Stroke</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--color-background: #000119;
--stroke-width: calc(1em / 16);
--font-size: 20vmin;
--font-weight: 700;
--letter-spacing: calc(1em / 8);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #000119;
background-color: var(--color-background);
display: grid;
font-family: Poppins, sans-serif;
margin: 0;
min-height: 100vh;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-items: center;
place-items: center;
padding: 5vmin;
}
h1 {
-webkit-background-clip: text;
background-clip: text;
background-image: -webkit-gradient(linear, left top, right top, from(#09f1b8), color-stop(#00a2ff), color-stop(#ff00d2), to(#fed90f));
background-image: -o-linear-gradient(left, #09f1b8, #00a2ff, #ff00d2, #fed90f);
background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
color: #000119;
color: var(--color-background);
font-size: 20vmin;
font-size: var(--font-size);
font-weight: 700;
font-weight: var(--font-weight);
letter-spacing: calc(1em / 8);
letter-spacing: var(--letter-spacing);
padding: calc(--stroke-width / 2);
-webkit-text-stroke-color: transparent;
-webkit-text-stroke-width: calc(1em / 16);
-webkit-text-stroke-width: var(--stroke-width);
}
</style>
</head>
<body>
<h1>Stroke</h1>
</body>
</html>
其實(shí)關(guān)鍵代碼只有一段，就是 h1 。這里面用了很多CSS3屬性，如background-clip，linear-gradient等，用的屬性比較多，也比較細(xì)，把這些屬性放在一起，共同構(gòu)造出想要的文字效果。
我們看到CSS代碼開(kāi)頭用了 :root ，這里簡(jiǎn)單說(shuō)一說(shuō)。
:root 這個(gè) CSS 偽類(lèi)匹配文檔樹(shù)的根元素。
對(duì)于 HTML 來(lái)說(shuō)，:root 表示 <html> 元素，除了優(yōu)先級(jí)更高之外，與 html 選擇器相同。
在聲明全局 CSS 變量時(shí) :root 會(huì)很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}設(shè)置 HTML 文檔的背景色：
:root
{
background:#ff0000;
}
我們還注意到，:root 的 --font-size 屬性值，用的是 20vmin 。還有 body 的 min-height 屬性值，用的是 100vh 。這些單位是不是看起來(lái)比較陌生？我們可以看看這篇文章了解一下CSS單位PX、EM、REM、%、VW 和 VH 有什么區(qū)別。
css的var()函數(shù)
h1 樣式里，看到一個(gè)比較新穎的寫(xiě)法，font-size: var(--font-size); ，這是什么意思？我們就得了解一下css的var()函數(shù)了。
隨著sass，less預(yù)編譯的流行，css也隨即推出了變量定義var函數(shù)。var()函數(shù)，就如同sass和less等預(yù)編譯軟件一樣，可以定義變量并且進(jìn)行對(duì)應(yīng)的使用。
使用方法
通過(guò)-- + 字段名：值（這個(gè)值可以是任何我們?cè)赾ss輸入的值）進(jìn)行定義類(lèi)似的js的定義，調(diào)用時(shí)候通過(guò)var()函數(shù)進(jìn)行對(duì)應(yīng)的調(diào)用，如下面代碼一樣var(--字段名)進(jìn)行調(diào)用。
body {
--size: 20px;
font-size: var(--size); // 20px
padding:var(--size); // 20px
}如上面代碼一樣通過(guò)定義--size為20px，然后font-size和padding同時(shí)通過(guò)var()函數(shù)進(jìn)行復(fù)用，同時(shí)將font-size和padding設(shè)置為20px。當(dāng)然如果不一定是20px，也是可以通過(guò)計(jì)算進(jìn)行對(duì)應(yīng)的如calc(var(--size) * 2)，這樣的話(huà)就相當(dāng)于變成40px。但是這樣寫(xiě)也是會(huì)有一點(diǎn)不好的就是，類(lèi)似js的塊級(jí)元素，在body{}里定義的的--size是無(wú)法在其他樣式類(lèi)名中進(jìn)行調(diào)用的。
.test{
--size: 20px;
font-size: var(--size); // 20px
padding:calc(var(--size) * 2) // 40rpx
}
.test2{
font-size: var(--size); // 無(wú)法識(shí)別
}我們?cè)谑褂胿ar的時(shí)候會(huì)發(fā)現(xiàn)，在樣式中定義的字段只能在某個(gè)樣式中使用。
通過(guò)在:root定義的字段，就相當(dāng)于css中的全局變量，可以在css中任意的樣式中進(jìn)行使用。
:root{
--size:20px;
}
.test{
font-size: var(--size); // 20px
}
.test2{
font-size: var(--size); // 20px
}
- 站長(zhǎng)推薦
