古いIEが次々と息絶えていった2016年、WEBサイトのコーディングで非常に出番の多い定番効果の「角丸・ドロップシャドウ・グラデーション・背景の透明化」、この辺りがCSS3を使ってキレイにマークアップできるようになってきました。

4つの角丸をいちいち画像にして複雑なスタイルシートを記述・・・立体感を出すためにドロップシャドウをつけたくて影だけの画像素材を作ってスタイルシートでリピート・・・そんな不毛な時代はようやく終わったのです!

あと、透明な背景とかもIEでは苦しみましたね。
半調な透明度のあるベタの背景も、IEが透明度のopacityにきっちり対応していなかった時代は大変でした。
「ただの単色で、ほんのちょっと透けてるだけでいいのに!」・・・これが通用しない。
半透明なpng画像を作り、背景画像に指定。おまけにフェードアニメを作ろうとしたらIEで画像の半調な部分が漆黒にチカチカしたりして。自分はなぜ残業してるのか?、自分はいったい誰なのか?・・・よく自問自答したものです。

opacityはもうベンダープレフィックスも必要なくなってるし、いったい僕らはいったい何に苦しめられていたんだろう?っていう時代はすでに到来しているのです。素晴らしい。

あ、あとちょっと外れますが何かと便利な「透明色」キーワードの「transparent」も、綴りを(自分が)よく忘れるので一緒に載せときます。

続きを読む