フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

background-imageはanimationやtransitionで動かせない

はじめに

 box-shadowプロパティの3番目と4番目の値の意味を理解したつもりになったのでメモしておきます。
 box-shadowはinsetキーワードとcolor値の他に2つから4つのlength値を指定できます。3つ目と4つ目の値は任意です。ここでは仕様(CSS Backgrounds and Borders Module Level 3, §7. Miscellaneous Effects)にならってそれぞれをblur radius, spread distanceと呼ぶことにします。
 いたずらに長くなる気がしたので、insetキーワードを指定しなかった場合だけを扱います。

基本サンプル

 blur radiusとspread distanceは任意なので、まずこれらを指定しないbox-shadowを書き、あとで見比べに来ることにします。
 以下のようなHTML, CSSを書きました。

<div class="box-shadow box-shadow__basic"></div>
.box-shadow {
  width: 100px;
  height: 100px;
  background-color: transparent;
  border: 1px solid #000;
}

.box-shadow__basic {
  box-shadow: 50px 50px #00f;
}

Screenshot from 2018-10-02 12-20-45.png
CodePen / Box Shadow Basic
 一応確認しておくと、.box-shadowに当てているスタイルは左上の黒縁で白い正方形のものです。box-shadow: 50px 50px #00f;で右に50px, 下に50pxの影を指定しています。

blur radiusだけ指定してみる

<div class="box-shadow box-shadow__blur-radius-only"></div>

 .box-shadowのスタイルは前と同じなので省略します。

.box-shadow__blur-radius-only {
  box-shadow: 50px 50px 25px #00f;
}

Screenshot from 2018-10-02 12-30-16.png
CodePen / Box Shadow Blur Radius Only
 blur radiusに25pxを指定しました。先ほどの影の輪郭を中心とした幅25pxがグラデーションになった感じでしょうか。外側に25px / 2 = 12.5px?だけぼやけたとは言っても、影の大きさ自体はそんなに大きくなった感じがしないです。

spread distanceだけ指定してみる

<div class="box-shadow box-shadow__spread-distance-only"></div>
.box-shadow__spread-distance-only {
  box-shadow: 50px 50px 0px 25px #00f;
}

Screenshot from 2018-10-02 12-36-35.png
CodePen / Box Shadow Spread Distance Only
 spread distanceを指定するにはblur radiusを指定しないといけないので、0pxを指定しておきました。spread distanceに25pxを指定した結果はというと、影の大きさが25px拡大したように見えます。

両方とも指定する

<div class="box-shadow box-shadow__both"></div>
.box-shadow__both {
  box-shadow: 50px 50px 25px 25px #00f;
}

Screenshot from 2018-10-02 12-41-49.png
CodePen / Box Shadow Both
 前の2項を見ているので、この結果には納得です。

まとめ

 ちゃんと調べてみるまで、blur radiusとspread distanceはどっちも影を広げるためのもの、ぐらいにしか理解していませんでした。おそらく、4番目のような両方とも指定した場合ばかり見ていたために、どこがblur radiusの結果で、どこがspread distanceの結果なのか理解できていなかったのでしょう。
 blur radiusとspread distanceをそれぞれ単独で効かせてみて、それらの効果がわかったし、値の名前にも納得することができました。

[紹介元] CSSタグが付けられた新着投稿 – Qiita background-imageはanimationやtransitionで動かせない

コメント

記事に戻る

コメントを残す