2017
12.17

CSSで白抜き文字を作ろう

CSS

web制作を始めると、CSSで文字をデコレーションしたい時は必ず訪れます。

今までにもLPやサイトをデザインするとき、必ずといっていい程使って来た白抜き文字!全部イラストレーターやPhotoshopが一瞬でしてくれました。

なんと・・・CSSでも作れたのですね!!ありがとうCSS!

知識は力なりです。これさえコピペで使えることを知っていれば、IllustratorもPhotoshopも導入しなくていいのです。

CSSだけで白抜き文字を作りたいときは、以下のソースを追加します。

まずは、HTMLで白抜きにした文字にクラス名を付けてあげます。

そのクラス名に以下の様に色とピクセル幅を指定してあげます。

サンプルソース

HTML

CSS
.happyholiday {
text-shadow : 2px 2px 1px #FFF,
-2px 2px 1px #FFF,
2px -2px 1px #FFF,
-2px -2px 1px #FFF,
2px 0px 1px #FFF,
0px 2px 1px #FFF,
-2px 0px 1px #FFF,
0px -2px 1px #FFF;
}

 

サンプルデモ

【PR】

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。