Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[WEB DESIGN] CSS drop shadow – CSSだけで任意divにドロップシャドウを

  • Pocket
  • このエントリーをはてなブックマークに追加

任意のdivに、画像を使う事なくCSSだけでドロップシャドウを付けるというTips。最初はへぇーそれスゴいじゃんって思ったんだけど、ソースを見てみると意外と単純な仕組みで描画させてる事が分かって、なんで今まで気付かなかったんだろうなーと。主体となるdivの周りを、少しずつ白に近づくグレーのdivで入れ子にするという仕組み。言ってみりゃただのグラデーションですが、いちいち画像を作る手間が省ける分イイかもしんない。その内何かに使ってみようかな。ただし数個のdivでネストする事になるので、若干ソースが見づらくなるという弊害もありますね。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください