[CSS]text-shadowでここまでできる、かっこいいエフェクト集

テキストに影をつけるtext-shadowを使用して、かっこいいエフェクトを適用するスタイルシートを紹介します。

サイトのキャプチャ

Using CSS Text-Shadow to Create Cool Text Effects

ヴィンテージ・レトロのテキストエフェクト

デモのキャプチャ

デモ:Vintage / Retro text effect

CSS

text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;

ネオンのテキストエフェクト

デモのキャプチャ

デモ:Neon text effect

CSS

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

レタープレスのテキストエフェクト

デモのキャプチャ

デモ:Inset text effect

CSS

text-shadow: 0px 2px 3px #666;

古い3Dのテキストエフェクト

デモのキャプチャ

デモ:Anaglyphic text effect

CSS

text-shadow: 8px 8px 0 rgba(255,0,180,0.5);

炎のテキストエフェクト

デモのキャプチャ

デモ:Fire text effect

CSS

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;

ボードゲームのテキストエフェクト

デモのキャプチャ

デモ:Board Game text effect

CSS

text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;

top of page

©2017 coliss