【CSS】文字を画像化せずにグラデーション効果を出す

CSS デザイン

css_text_gradeffect

グラデーション効果を出して少し凝ったロゴやテキストにしたいとき、
いちいち画像化させるのが面倒な方はこの方法がおすすめです。

HTML

<div class="grad"><span></span>CSSだけでグラデーション効果が出せます</div>

CSS

.grad {
	position: relative;
	color: #000;
	font-size: 24px;
	font-weight: bold;
}
.grad span {
	position: absolute;
	display: block;
	width: 100%;
	height: 32px;
	background: url(grad.png) repeat-x;
}

参考:http://webdesignerwall.com/tutorials/css-gradient-text-effect

CSSだけでグラデーション効果が出せます

.grad spanでは透過させた白いグラデーション画像を当てています。
この透過画像を変えることで、いろいろな効果をだすことができます。

CSSだけでさまざまなエフェクトをかけられます
CSSだけでさまざまなエフェクトをかけられます

画像も流用でき、CSS自体も短いので変更も楽に効果が出せるのがいいですね。

CSS デザイン

関連記事