bad-company

text-shadowジェネレーター

文字に影を落とすのによく使われるtext-shadowを確認するためのジェネレーターです。
各種プロパティなどページ下部に詳しい説明を書いてあります。

text-shadow

/* preview */
color: #333;

/* text-shadow */
text-shadow: 3px 3px 1px rgba(0,0,0,0.3);
text-shadowの設定

text-shadowのプロパティについて

基本的な設定

Text Shadow

text-shadow: 左右の位置 上下の位置 色;

text-shadow: 2px 2px #f00;

まず基本的な設定としては、左から何px / 上から何px / を指定してください。
左右および上下に関してはマイナスの数値を指定することもできます。

ぼかしの設定

Text Shadow

text-shadow: 左右の位置 上下の位置 ぼかし 色;

text-shadow: 2px 2px 6px #f00;

ぼかし(blur)も設定することができます。
なおぼかしについてはマイナスの数値は指定することはできません。

影を複数設定

Text Shadow

text-shadow: 左右の位置 上下の位置 ぼかし 色, 左右の位置 上下の位置 ぼかし 色;

text-shadow: 2px 2px 6px #f00, 0px -1px 6px #0f0;

カンマで区切ることで複数の影を設定することができます。

まとめ

text-shadow: 左右の位置 上下の位置 ぼかし 色, ...;

左右の位置や上下の位置、どれくらい影をぼかすかを設定するかなどができます。

AD

unstreet store
unstreet