CommentOut

【CSS】box-shadowよりもfilter: drop-shadowがオススメ 【CSS】box-shadowよりもfilter: drop-shadowがオススメ

【CSS】box-shadowよりもfilter: drop-shadowがオススメ

公開日:  最終更新日:

CSSでは影を付ける時、長い間box-sizingが用いられてきました。

しかし、最近、filterをほとんどのブラウザがサポートするようになったため、影にもfilter: drop-shadowという選択肢が登場しました。
こいつ超優秀です。

box-shadowでは四角い影しか付けられない

まず、下記サンプルを見てください。

See the Pen Untitled by Uilou (@uilou754) on CodePen.

もうわかると思いますが、同じように影を付けるCSSでも、以下のような違いがあります。

  • box-shadowでは、要素の形に対して影が描画されます。
  • filter: drop-shadowでは、要素内の色がある部分に対して影が描画されます。

このため、filter: drop-shadowの方がより複雑な形状の影を付けることが可能です。

filter: drop-shadowでは複雑な影が付けられる

filter: drop-shadowでは色のある部分に影を付けるため、透明色のあるpngなどを使用すると、より複雑な影を付けることが可能になります。

filter: drop-shadowを使った場合、Safariで影が途切れたり、おかしくなる

便利なfilter: drop-shadowですが、Safariでは表示がおかしくなることがあります。(Internet Explorerは見限っているので動作確認すらしていない)
現象としては、影が途中で切れる、砂嵐のようになるなど

Safariでおかしくなる原因は、filterだけではハードウェアアクセラレーションが動かないらしく、filter系の処理がおかしくなるそうです。
Safariでは一手間加えて明示的に動かしてやらないといけないようです。

対応方法としては以下のように、transformを入れることでハードウェアアクセラレーションが重い腰を上げてくれるようです。

.shadow {
    filter: drop-shadow(5px 5px 3px gray);
    transform: translateZ(0px); /* ハードウェアアクセラレーションに仕事させるためだけの記述 */
}

宣伝
WordPressサイトのテンプレート編集やトラブル対応、バグ修正、簡単なJavascriptの作成(カルーセルやバリデーション等)など、小規模なスポット対応を受け付けております。
もしお困りごとがありましたら、お問い合わせフォームよりご相談ください。

この記事を書いた人

uilou

uilou

プログラマー

基本的に、自分自身の備忘録のつもりでブログを書いています。 自分と同じ所で詰まった人の助けになれば良いかなと思います。 システムのリファクタリングを得意としており、バックエンド、フロントエンド、アプリケーション、SQLなど幅広い知識と経験があります。 広いだけでなく、知識をもっと深堀りしていきたいですね。