CSSだけで文字装飾

CSSだけで描画できることが増え、グラフィックソフトを使わなくてもある程度装飾的なことが出来るようになりました。
前回はボックス要素で試してみましたが、今回はテキストを装飾してみました。

CSSグラデーションで描く背景を-webkit-background-clip: text;でテキストに適用しています。

装飾のためにタグを入れ子にしたり空タグを使うのが好きではないので、基本的にspanタグ1つを使います。
ただし、spanの疑似要素:before、:afterは利用しています。

※モダンブラウザのみ検証しています。

コード

HTML

<p><span class="decorated sample-1">LOLLIPOP</span></p>
<p><span class="decorated sample-2">ROCK YOU</span></p>
<p style="background-color: #222;"><span class="decorated sample-3">NEON</span></p>
<p><span class="decorated sample-4">Shadow</span></p>

<script>
// 疑似要素のcontentを親要素（span）と同じ文字列にするスクリプト
// .decorated というclass名の要素を対象に
// data-text属性を追加しspanのテキストと同じ文字列を値に設定
deco = document.querySelectorAll('.decorated');
deco.forEach(function(element) {
	element.setAttribute('data-text', element.textContent);
});
</script>

JavaScriptを使いたくなければ

<p><span class="decorated sample-1" data-text="LOLLIPOP">LOLLIPOP</span></p>

というように、data-text属性に同じテキストを設定すればOK。

基本CSS

/* Googleフォント */
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Audiowide|Bevan|Coiny|Poiret+One|Squada+One');

body {
	font-size: 100px;
}

p {
	margin: 30px 0;
}

/* base */
.decorated {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin: 0;
}

.decorated:before {
	content: attr(data-text);
	position: absolute;
	z-index: 2;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.decorated:after {
	content: attr(data-text);
	position: absolute;
	z-index: 3;
	-webkit-text-fill-color: transparent;
}

サンプル1

/* sample : LOLLIPOP */
.sample-1 {
	color: #FEBA61;
	font-family: 'Coiny', cursive;
}

.sample-1:before {
	top: 0;
	left: 0;
	background:
		radial-gradient(white 25%, transparent 0),
		radial-gradient(circle farthest-side, #FD9BE2, #FEBA61);
	background-size: 20px 20px, 100% auto;
	-webkit-background-clip: text;
}

.sample-1:after {
	top: -6px;
	left: -6px;
	-webkit-text-stroke: 5px #F32B93;
}

サンプル2

/* sample : ROCK YOU */
.sample-2 {
	font-family: 'Squada One';
	font-size: 1.2em;
	letter-spacing: .05em;
	background: linear-gradient(to right, #AA201B 50%, #841A16 0);
	background-size: 6px 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(1px 1px 0 #222)
		drop-shadow(1px 1px 0 #222)
		drop-shadow(2px 2px 0 #222)
		drop-shadow(2px 2px 0 #222)
}

.sample-2:before {
	-webkit-text-stroke: 4px #AA201B;
	filter: drop-shadow(1px 1px 0 #222);
}

.sample-2:after {
	display: none;
}

サンプル3

/* sample : NEON */
.sample-3 {
	font-family: 'Audiowide';
	font-weight: bold;
	filter:
		drop-shadow(10px 10px 5px rgba(255, 255, 255, .1))
		drop-shadow(10px 10px 10px rgba(255, 255, 255, .05));
}

.sample-3:before {
	left: 0;
	top: 0;
	background: linear-gradient(to right, #bfe5ff 0%,#87ffdb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: blur(10px);
	opacity: .6;
}

.sample-3:after {
	left: 0;
	top: 0;
	background: linear-gradient(to right, #bfe5ff 0%,#87ffdb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .2);
}

サンプル4

/* sample : Shadow */
.sample-4 {
	left: 8px;
	top: 8px;
	background: linear-gradient(-45deg, #CDC6FF 25%, #fff 25.1%, #fff 50%, #CDC6FF 50.1%, #CDC6FF 75%, #fff 75.1%, #fff 0);
	background-size: 4px 4px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: 'Abril Fatface';
}

.sample-4:before {
	left: -8px;
	top: -8px;
	-webkit-text-fill-color: #CDC6FF;
	-webkit-text-stroke: 1px #B4AFE2;
}

CodePen

今回のコードはCodePenにまとめています。

See the Pen Pure CSS Text Decoration by noqua (@noqua) on CodePen.

---

以上です。

backgroundとtext-shadowを併用すると、当たり前ですがtext-shadowがbackgroundより上に描画されてしまうので、疑似要素とz-index を使って調整が必要だなと感じました。
画像なしで、しかもタグ1つでこれだけ表現できるのはすごいですね。
-webkit-background-clip: text;に非対応のブラウザを考慮する場合はsupportでスタイルを分け、ベタ塗り+シャドウくらいで代替えすれば最低限の対応は出来るのではないでしょうか。

参考になりましたら幸いです。