mania-ku

何か作りたいプログラマ未満。

【CSS3】影を付ける

要素に

box-shadow: 
1px 1px 1px rgba(0,0,0,.6),
10px 20px rgba(255,0,0,.6) inset; /* 横(右),縦(下),ぼかし具合,影の幅,色(内側の場合はinset)で複数指定可能。マイナスは横(左)、縦(上)からになる */

※borderの代わりにすることもできる。

文字に

text-shadow:
5px 5px 3px red,
5px 5px 6px blue; /* 横(右),縦(下),ぼかし具合,色で複数指定可能 */
※調整次第では、ネオンやエンボス、袋文字などのテキストの効果を表現できる。

Pocket
LINEで送る