CSS Box Shadow ジェネレーター - ビジュアルシャドウデザイナー

A 可能ですが、opacityかcolorだけをアニメーションさせる場合に限ります。オフセットやブラーを動かすと、ブラウザが毎フレームレイアウトを再計算します。モバイルでは特に重くなる原因に。疑似要素を使うか、opacityのトランジションに絞ってください。このジェネレーターのライブプレビューで事前に動作確認するのがおすすめです。

A できます。カンマで区切って複数の影を重ねられます。「影を追加」ボタンをクリックしてレイヤーを増やしてください。例えば2つの影でオフセットを変えると、カードが浮いたような効果が出ます。ジェネレーターのライブプレビューですべてのレイヤーが即座に確認できます。

A これらは互換性がありません。box-shadowは要素のボーダーボックスに沿った四角い影を作ります。角もそのまま四角です。一方、filter: drop-shadowはコンテンツの実際の形状を追跡します。透明なPNG画像に不規則な縁がある場合、drop-shadowはその形にぴったり沿った影を生成します。カードやボタン、UI部品にはbox-shadow。ロゴや切り抜き画像にはdrop-shadow。実際にこのジェネレーターで円形要素にbox-shadowを適用し、CSSでdrop-shadowに切り替えてみてください。違いは一目瞭然です。

A ブラーの半径が小さすぎるのが原因です。2px未満だとRetinaディスプレイで特にガタついて見えます。ブラウザは物理ピクセル単位で影を描画するため、ぼかしが足りないと階段状のジャギーが出ます。最低でも3〜4pxのブラーを指定すれば滑らかになります。このジェネレーターのライブプレビューで拡大して確認してからコードを使ってください。

A Chrome、Firefox、SafariなどのモダンブラウザはW3C標準に従っているため、ボックスシャドウは一貫してレンダリングされます。ただし、古いInternet Explorerではこのプロパティが認識されず、影自体が表示されません。確実に期待通りのぼかし具合を確認するために、Chromeバージョン110以降でテストを行うのが賢明です。もし古いブラウザにも対応させる必要があるなら、CSSで境界線を使ったフォールバックを設定しておきましょう。

A 四方すべてに均等なグローが生まれます。方向性のない、まるでハローのような影です。これはソフトなネオン効果やフォーカスリングの定番テクニック。ブラーを大きめ（25px以上）に設定し、色はrgba(0,0,0,0.15)のような低オパシティを選べば、上品なアンビエントシャドウになります。スプレッド値を上げると影が均等に外側へ広がり、太いボーダーに見えてきます。同じ設定のままinsetを切り替えると別物になり、内側にビネットができます。

A いいえ、完全に不要です。2015年以降のブラウザは、-webkit-や-moz-なしの標準構文をすべてサポートしています。2010年代初頭の古いチュートリアルでは接頭辞付きの例が見られますが、今はただのデッドコードです。Chrome 50以降、Firefox 40以降、Safari 9以降、Edgeは全てネイティブ対応しています。生成されたコードはそのまま動作します。唯一注意したいのは、レガシーなモバイルアプリ内のWebViewを対象にする場合。その際は配信前にさっと確認してください。

A 残りません。タブを閉じたり再読み込みすると、スライダーの値はすべてリセットされます。CookieもlocalStorageも使っていないからです。共有PCで作業する人にはむしろ安心ですね。コピーを忘れずに。よく使う影は、小さな.cssファイルに「カード-ホバー-深め」のような名前で保存しておくと、数週間後の自分が助かります。

A 検索クローラーはCSSを完全に無視します。HTML構造とテキストの中身だけを見ています。ボタンに複数のシャドウを重ねてもSEOランクは下がりません。ただ、過剰なぼかし効果はスマホの動作を重くします。ぼかしは50ピクセル以内に抑えましょう。

A シャドウコードは非常に軽量です。ファイル容量の心配はありません。ただし、数百個のUI要素がある場合は、共通のユーティリティクラスを作成しましょう。スタイルシートがすっきりします。