今更ながら、text-shadowを色々試してみる。

もう正直出尽くしてると思いますが、一応メモというか勉強用に試してみた。

インセット

背景より少し暗い色の影を付けてるとそれっぽくなりますね。
ただ、フォントによっては、イマイチな感じになりそうです。

.sample {
    text-shadow:0 -2px 2px #777;
}

INSET

ラインアート

二重の影を置いて、若干立体的にも見える感じのエフェクトです。
box-shadowでも同じようにできるのかも。

.sample {
    text-shadow:3px 3px 0px #fff, 4px 4px 0px #777;
}

LINE ART

リアルな影

リアルな影っぽい文字を書くときのエフェクト。
使う事あるかどうかわかりませんけど。

.sample {
    color:transparent;
    text-shadow:0 0 10px #333;
}

SHADOW

アウトライン

上下左右の四方向に影を配置して、縁取る!
ただ、文字色と背景色を同じにしてしまうのは良くないですね。

.sample {
    color:#fff;
    text-shadow:1px 0 #333,
    0 1px #333,
    -1px 0 #333,
    0 -1px #333;
}

OUTLINE

ネオン

.sample {
    text-shadow:0 0 10px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #99ff00,
    0 0 50px #99ff00,
    0 0 60px #99ff00,
    0 0 100px #99ff00;
}

NEON

comments powered by Disqus
« Newer Older »