CSS3 tips : RGBA を指定してシースルー効果

[icon name=”icon-time”]この記事を読むのに必要な時間は約 3 分 23 秒です。

CSS3 がすべての Web ブラウザでサポートされるには、まだまだ時間は必要だろうけど、見苦しくならない程度に試みています。今回は当サイトのヘッダーと、フッターをシースルーにしました。
MacOSX の Safari と Google Chrome だけでの確認ですが、本質を変えてしまうほどの影響はないと思いスタイルシートに不透明プロパティを指定しました。

そもそもは現在適用しているテーマでも指定されていることなので、問題はないと思います。

RGBA

Web ページのカラーは、赤や白、青といった原色は red ,white, blue といった英語表記でも不便はありませんが、16進法で指定します。
赤は #ff0000
青は #0000ff
白は #ffffff といった具合ですね。

これらは RGB で置き換えることが出来ます。
赤は 255,0,0
青は 0,0,255
白は 255,255,255 となります。
色は16進フォーマット（#RRGGBB）が、rgb（x, y, z）という数値形式で定義することが今後は普通になっていくでしょう。こちらの方が16進法よりも身近だと感じる技術畑の人には多いかもしれませんね。それに微妙な中間色も把握しやすい。パソコンのディスプレーがテレビのハイビジョンよりも高画質になった今は必要なことでしょう。

アルファチャネルを定義可能にする新メソッド

さて、Web コンテンツをシースルー＝透明化するのに、「opacity: 0.5;」といったプロパティを指定してきました。
そのまま、RGBと一緒に指定することも可能です。

background: rgb(222,43,91); opacity: 0.5;

という具合に。でも、これだと background 指定したエレメントに含まれるものすべてが半透明になります。文字を含んでいる場合は、かえって読みにくいものになります。印象付けようとしたことが逆になってしまう。この失敗は Web ページを効果的に見せようと思い始めた３年ほど前に思うように行かず断念した経験があります。結局、半透過の画像をつくって、それに文字を載せるといった面倒な事をしました。
この問題を解決するため、CSS3 ではアルファチャネルを定義可能にする新メソッドが用意された。これにより、特定の宣言だけに不透明度を設定できる。

background: rgba(222,43,91, 0.5);

これで、background だけを半透明にして、文字はくっきりと表現できるようになる。
その例に習って、ヘッダーとフッターのスタイルシートを変更した次第です。３年越しの課題解消です。