CSSでテキストを光沢やメタル調に装飾するサンプル集

2019-09-062020-10-01CSS テキストデザイン サンプル集,CSS

CSSを使ってHTMLに表示するテキストをメタルっぽく装飾するサンプル集になります。

また、チェック柄以外にもテキストをシャドウ、立体、ストローク、ネオン、ストライプからグラデーション、メタル風、鏡面反射などにするCSSサンプルも紹介しています。

CSSでテキストを彩る装飾サンプル集

CSSを使ってテキスト文字に影、立体、光沢などを付けて装飾するサンプル集です。 シャドウ系、立体系、 ...

 https://1-notes.com/css-text-design/

CSSでメタル調に装飾 タイプA

共通HTML

<p class="sample">ONE NOTES</p>

ゴールドメタル タイプA（黄金色）

金色のメタル風なCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal Gold by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #B67B03 0.1em, #DAAF08 0.2em, #FEE9A0 0.3em, #DAAF08 0.4em, #B67B03 0.5em); 
	-webkit-background-clip: text;
}

シルバーメタル タイプA （銀色）

シルバーメタル調のCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal Silver by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #757575 0.1em, #9E9E9E 0.2em, #E8E8E8 0.3em, #9E9E9E 0.4em, #757575 0.5em); 
	-webkit-background-clip: text;
}

ブルーメタル タイプA （青色）

青系のメタルCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal Blue by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #0277BD 0.1em, #4FC3F7 0.2em, #E1F5FE 0.3em, #4FC3F7 0.4em, #0277BD 0.5em); 
	-webkit-background-clip: text;
}

レッドメタル タイプA（赤色）

赤系のメタルCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal Red by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #C62828 0.1em, #EF5350 0.2em, #FFEBEE 0.3em, #EF5350 0.4em, #C62828 0.5em); 
	-webkit-background-clip: text;
}

グリーンメタル タイプA（緑色）

緑系のメタルCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Green Metal by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #388E3C 0.1em, #8BC34A 0.2em, #F1F8E9 0.3em, #8BC34A 0.4em, #388E3C 0.5em); 
	-webkit-background-clip: text;
}

ダークメタル タイプA（黒色）

ダークメタル調のCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Dark Metal by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #212121 0.1em, #424242 0.2em, #FAFAFA 0.3em, #424242 0.4em, #212121 0.5em); 
	-webkit-background-clip: text;
}

CSSでメタル調に装飾 タイプB

こちらはlinear-gradient()を使って、パーセントでグラデーションを指定しています。

共通HTML

<p class="sample">ONE NOTES</p>

ゴールドメタル タイプB（黄金色）

金色のメタル風なCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal B Gold by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient(0deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); 
	-webkit-background-clip: text;
}

シルバーメタル タイプB（銀色）

シルバーメタル調のCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal Silver by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient(0deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%); 
	-webkit-background-clip: text;
}

ブルーメタル タイプB（青色）

青系のメタルCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal Blue by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: linear-gradient(0deg, #0277BD 0%, #4FC3F7 50%, #E1F5FE 70%, #4FC3F7 80%, #0277BD 80% 100%); 
	-webkit-background-clip: text;
}

レッドメタル タイプB（赤色）

赤系のメタルCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal B Red by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background: repeating-linear-gradient(0deg, #C62828 0.1em, #EF5350 0.2em, #FFEBEE 0.3em, #EF5350 0.4em, #C62828 0.5em); 
	-webkit-background-clip: text;
}

グリーンメタル タイプB（緑色）

緑系のメタルCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Metal B Green by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent; 
	background: linear-gradient(0deg, #388E3C 0%, #388E3C 55%, #b0d683 70%, #388E3C 85%, #388E3C 90% 100%); 
	-webkit-background-clip: text;
}

ダークメタル タイプB（黒色）

ダークメタル調のCSSグラデーションを指定したサンプルコードです。

See the Pen CSS Text Design Dark Matal B by yochans (@yochans) on CodePen.

.sample {
	font-size:5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent; 
	background: linear-gradient(0deg, #212121 0%, #424242 60%, #FAFAFA 70%, #424242 80%, #212121 90% 100%); 
	-webkit-background-clip: text;
}