A Little Each Day

note to self

CSS3で影をつけるbox-shadowとtext-shadowの使い方

こんにちは。本日はCSS3で使われるbox-shadowとtext-shadowの使い方です。

CSS3ではこれらを用いて簡単に要素に影をつけることができるようになりました。

バージョン

HTML5
CSS3


box-shadowの基礎基本

box-shadowプロパティの書き方は

box-shadow: 水平, 垂直, ぼかし, 広がり, 影の色;


と書きます。


ただし水平・垂直のみが必須であり、ぼかし・広がり・影の色は任意で大丈夫です。

なので簡単な影をつける場合は

box-shadow: 水平, 垂直, 影の色;


と書く場合が多いです。


ボタンに影をつけてみよう

まずはシンプルなボタンを作りましょう。

<!-- sample.html -->
<div class="btn">
  影つきのボタン
</div>
/* sample.css */
.btn{
  padding: 10px;
  background-color: orange;
  color: white;
  display: inline-block;
}


ここまでで簡単なボタンができました。
何の変哲もないシンプルなボタンです。


box-shadow

では実際に影をつけましょう。

今回はボタンの下に影をつけてみましょう。

上記のcssコードにbox-shadowプロパティを指定するだけです。

.btn{
  padding: 10px;
  background-color: orange;
  color: white;
  display: inline-block;
  /* 以下を追加 */
  box-shadow: 0px 5px #696969;
}


するとこんな感じに影がつきます。

f:id:chi_kun:20160606183449p:plain


ボタンの下なので、水平0・垂直5pxとしました。


text-shadowの基礎基本

text-shadowも要素に影をつけますが、基本的にはbox-shadowと同じ指定の仕方です。

text-shadow: 水平, 垂直, ぼかし, 広がり, 影の色;

テキストに影をつけよう

では実際にレイアウトを組んでいきましょう。

<!-- sample.html -->
<div class="text">
  <p>ここにテキスト</p>
</div>
/* sample.css */
.text{
  font-size: 30px;
  font-weight: bold;
}


すごくシンプルなテキストができました。


text-shadow

テキストでは影にぼかしを入れてみましょう。

.text{
  font-size: 30px;
  font-weight: bold;
  /* 以下を追加 */
  text-shadow: 3px 5px 1px #d3d3d3;
}


するといい感じにテキストに影がついているのがわかると思います。

f:id:chi_kun:20160606191331p:plain


今回はボタン・テキスト共々シンプルな影でしたが、色・大きさ・ぼかしなど簡単に設定することができるので、ぜひ他にも試してみてください。



本日は以上です。