box-shadowはもう古い？CSS新時代の「影の落とし方」

長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい

[minamo_bunko]

Tips

[lemondm7]

box-shadowで行けるとこは行って、svg系のアニメーションもsvgで持たせられるところはもたせてるけど、時々効果に使っている。filter系もっと使っていい風潮になるといいなー。(ターゲット層次第だけども)

[idr_zz]

drop-shadow、IEが下火になってくれれば存分に使える… box-shadowはもう古い？CSS新時代の「影の落とし方」｜ferret [フェレット]

[tyru]

べんり

[tanupig]

“filter: drop-shadow()”丸や三角形 png filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));

[x-shinohara]

“filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));”

[piano-kanrinin]

“filter: drop-shadow”

[komz]

box-shadowはもう古い？CSS新時代の「影の落とし方」｜ferret [フェレット]