text-shadowを使ったテキストのデザインサンプル

Posted on November 27th, 2015
Category : Tips

CSSのtext-shadowを使ってテキストをデザインしてみたサンプル集です。単純に適用させたものから、レタープレス、エンボス、3D、ヴィンテージ風、ロングシャドウ、ネオンなど全16種類あり、全てtext-shadowのみを使用して表現しています。

ここでの表示は全て画像を使用しており、実際の表示は以下デモページにまとめているのでこちらをご覧ください。

DEMO

Example #1

CSS

element {
	color: #333;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

Example #2

CSS

element {
	color: #333;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}

Example #3

CSS

element {
	color: #888;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, .7),
	             1px 1px 1px rgba(255, 255, 255, .7);
}

Example #4

CSS

element {
	color: #888;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1),
	             -1px -1px 1px rgba(255, 255, 255, .7);
}

Example #5

CSS

element {
	color: #eee;
	text-shadow: -1px -1px 0 rgba(51, 51, 51, 1),
	             1px -1px 0 rgba(51, 51, 51, 1),
	             -1px 1px 0 rgba(51, 51, 51, 1),
	             1px 1px 0 rgba(51, 51, 51, 1);
}

Example #6

CSS

element {
	color: #fff;
	text-shadow: 0 1px 0 #bbb,
	             0 2px 0 #b0b0b0,
	             0 3px 0 #aaa,
	             0 4px 0 #a0a0a0,
	             0 5px 0 #888,
	             0 6px 1px rgba(0, 0, 0, .1),
	             0 0 5px rgba(0, 0, 0, .1),
	             0 1px 3px rgba(0, 0, 0, .3),
	             0 3px 5px rgba(0, 0, 0, .2),
	             0 5px 10px rgba(0, 0, 0, .25),
	             0 10px 10px rgba(0, 0, 0, .2),
	             0 20px 20px rgba(0, 0, 0, .15);
}

Example #7

CSS

element {
	color: #fff;
	text-shadow: 0 1px 0 #fff,
	             0 2px 0 #888,
	             0 3px 0 #fff,
	             0 4px 0 #888,
	             0 5px 0 #fff,
	             0 6px 1px rgba(0, 0, 0, .1),
	             0 0 5px rgba(0, 0, 0, .1),
	             0 1px 3px rgba(0, 0, 0, .3),
	             0 3px 5px rgba(0, 0, 0, .2),
	             0 5px 10px rgba(0, 0, 0, .25),
	             0 10px 10px rgba(0, 0, 0, .2),
	             0 20px 20px rgba(0, 0, 0, .15);
}

Example #8

CSS

element {
	color: #fff;
	text-shadow: 5px 5px 0px rgba(255, 255, 255, .5),
	             10px 10px 0px rgba(255, 255, 255, .2);
}

Example #9

CSS

element {
	color: #333;
	text-shadow: 0 20px 10px rgba(0, 0, 0, .5);
}

Example #10

CSS

element {
	color: rgba(0, 0, 0, .6);
	text-shadow: 0 5px 5px rgba(0, 0, 0, .2),
	             0 -5px 20px rgba(255, 255, 255, .2);
}

Example #11

CSS

element {
	color: #fff;
	text-shadow: 4px 4px 0px #444,
	             6px 6px 0px rgba(255, 255, 255, .7);
}

Example #12

CSS

element {
	color: #fff;
	text-shadow: 1px 1px 0 rgba(85, 85, 85, 1),
	             2px 2px 0 rgba(85, 85, 85, .95),
	             3px 3px 0 rgba(85, 85, 85, .9),
	             4px 4px 0 rgba(85, 85, 85, .85),
	             5px 5px 0 rgba(85, 85, 85, .8),
	             6px 6px 0 rgba(85, 85, 85, .75),
	             7px 7px 0 rgba(85, 85, 85, .7),
	             8px 8px 0 rgba(85, 85, 85, .65),
	             9px 9px 0 rgba(85, 85, 85, .6),
	             10px 10px 0 rgba(85, 85, 85, .55),
	             11px 11px 0 rgba(85, 85, 85, .5),
	             12px 12px 0 rgba(85, 85, 85, .45),
	             13px 13px 0 rgba(85, 85, 85, .4),
	             14px 14px 0 rgba(85, 85, 85, .35),
	             15px 15px 0 rgba(85, 85, 85, .3),
	             16px 16px 0 rgba(85, 85, 85, .2),
	             17px 17px 0 rgba(85, 85, 85, .15),
	             18px 18px 0 rgba(85, 85, 85, .1);
}

Example #13

CSS

element {
	color: #333;
	text-shadow: 0 1px 0 #888,
	             -1px 0 0 #ccc,
	             -1px 2px 0 #888,
	             -2px 1px 0 #ccc,
	             -2px 3px 0 #888,
	             -3px 2px 0 #ccc,
	             -3px 4px 0 #888,
	             -4px 3px 0 #ccc,
	             -4px 5px 0 #888,
	             -5px 4px 0 #ccc,
	             -5px 6px 0 #888,
	             -6px 5px 0 #ccc,
	             -6px 7px 0 #888;
}

Example #14

CSS

element {
	color: #aaa;
	text-shadow: 0 5px 10px rgba(0, 0, 0, .6),
	             0 -2px 0 rgba(255, 255, 255, 1);
}

Example #15

CSS

element {
	color: #fff;
	text-shadow: 0 0 10px rgba(255, 255, 255, .7);
}

Example #16

CSS

element {
	color: #fff;
	text-shadow: 0 0 15px rgba(255, 255, 255, .5),
	             0 0 30px rgba(255, 255, 255, .5),
	             0 0 40px rgba(52, 152, 219, 1),
	             0 0 50px rgba(52, 152, 219, 1),
	             0 0 60px rgba(52, 152, 219, 1),
	             0 0 70px rgba(52, 152, 219, 1);
}

おまけ

上で紹介したネオン風のものをanimationを組み合わせて下記のように記述することで、光を発してるような表現をしている部分へ更に動きをつけることができます。

※デモページ最下部でマゼンタカラーを使っているもので実際の動きを確認できます。

CSS

element {
	color: #fff;
	-webkit-animation: neon 2s ease-in-out infinite alternate;
	animation: neon 2s ease-in-out infinite alternate;
}
@-webkit-keyframes neon {
	from {
		text-shadow: 0 0 15px rgba(255, 255, 255, .5),
		             0 0 30px rgba(255, 255, 255, .5),
		             0 0 40px rgba(255,0,255, 1),
		             0 0 50px rgba(255,0,255, 1),
		             0 0 60px rgba(255,0,255, 1),
		             0 0 70px rgba(255,0,255, 1);
	}
	to {
		text-shadow: 0 0 7px rgba(255, 255, 255, .5),
		             0 0 15px rgba(255, 255, 255, .5),
		             0 0 20px rgba(255,0,255, 1),
		             0 0 25px rgba(255,0,255, 1),
		             0 0 30px rgba(255,0,255, 1),
		             0 0 35px rgba(255,0,255, 1);
	}
}
@keyframes neon {
	from {
		text-shadow: 0 0 15px rgba(255, 255, 255, .5),
		             0 0 30px rgba(255, 255, 255, .5),
		             0 0 40px rgba(255,0,255, 1),
		             0 0 50px rgba(255,0,255, 1),
		             0 0 60px rgba(255,0,255, 1),
		             0 0 70px rgba(255,0,255, 1);
	}
	to {
		text-shadow: 0 0 7px rgba(255, 255, 255, .5),
		             0 0 15px rgba(255, 255, 255, .5),
		             0 0 20px rgba(255,0,255, 1),
		             0 0 25px rgba(255,0,255, 1),
		             0 0 30px rgba(255,0,255, 1),
		             0 0 35px rgba(255,0,255, 1);
	}
}