アルファチャンネルで画像置換

この記事は「after 疑似要素で CSS ロールオーバー」の続きです。

このサイトの定番ネタです。「え、いまさら?」という声が聞こえてきそうな気がする画像置換ですが、今回は3年ほど前に大流行した「テキストをCSSの背景画像で置き換えて、text-indentですっ飛ばすアレ」にCSS3の要素を加えてじゃっっかん今風?にしたものです。

ちなみにこの手法は、大流行から1年ほどで「テキストをtext-indentで飛ばすのはアクセシビリティ的によくないし、CSSの背景画像じゃなくて画像と代替テキストという自然な(本来の)マークアップをすべき」みたいな思想が広まって一時期廃れたかに思われましたが、近年の表示速度最適化ブームに乗って、CSS Spriteを実現する手段として復活を遂げている、という経緯があったような気がします。いや、詳しくは忘れちゃいましたが;P

あいかわらず今回もCSS Nite LP3の課題の画像を利用させていただいています。

“アルファチャンネルで画像置換” の続きを読む

after 疑似要素で CSS ロールオーバー

以前、画像のCSSロールオーバーについてアクセシブルな方法はないかと考えてみたことがありました。あれから約2年、新しいサイトのHTML組んでたら、たまたま違う方法を見つけたので覚え書きしておきます。

ブラウザの対応は、おそらくafter疑似要素(contentプロパティ)に対応するブラウザなら表示されると思います。つまり、IE7以前はそもそもロールオーバーにならないってことです。まぁそこはこの際いいんです[1]

今回も画像はCSS Nite LP3の課題のものを利用させていただいています。

“after 疑似要素で CSS ロールオーバー” の続きを読む

  1. JavaScriptでなんとかするとかすれば [back]