hail2u.net

FIR and FIR

Posted at 2004-11-21T05:02:00+09:00 in Web Design

FIR and FIRでロゴを変えてみたりする。FIR and FIRとは、Fahrner Image ReplacementとFast Image Rollovers(単に頭文字をFahrner Image Replacementと合わせただけで、本当はFast Rollovers Without Preloadというテクニックです)を繋げた造語です。ちょっとすっきりした。h2要素のスタイルが浮いてる感じとか言わない。そもそもh1要素にサイトのタイトルっておかしくねぇ？とかも言ってはいけません。

Fahrner Image Replacementは以前に紹介しましたが、ロゴなどデザインを重視したいが画像をベタ書きにするとアクセシブルじゃなくてイヤンな人向けのテクニックです(実はアクセシブルじゃないだろとか言うツッコミはそこかしこでされていますが)。空のspan要素を利用するのはなんとなく嫌(というか、HTMLを編集しなくてはならないので本末転倒)なので、text-indentプロパティを利用したものを今回も採用しました。

Fast Image Rolloversは、画像のロールオーバー効果をCSSで実現する際に、オンマウスである時とオンマウスでない時の画像を繋げた画像を背景に指定し、通常時と:hover擬似クラスで背景画像の表示位置をずらすことによって、ロールオーバー効果を実現するというものです。これによりブラウザが画像をいちいちチェックしに行かないで済むので、ウェイトのかからない滑らかなロールオーバー効果が実現できます。

どちらのFIRも応用がいろいろ出来、覚えていて損はないテクニックですね！ご自身のblogをもっとカッコよくしたいという方はこれらを応用してCSSを作り直してみたら如何でしょうか？

なんだこのへちょいメール・マガジンっぽいまとめ方は。

単に久々にBitstreamのFuturaをいじり倒していたら使いたくなっただけとかいう。Futuraは、好きなフォントのベスト5に入るな。