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

  • Views 0

 この記事を読むのに必要な時間は約 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 ページを効果的に見せようと思い始めた3年ほど前に思うように行かず断念した経験があります。結局、半透過の画像をつくって、それに文字を載せるといった面倒な事をしました。
この問題を解決するため、CSS3 ではアルファ チャネルを定義可能にする新メソッドが用意された。これにより、特定の宣言だけに不透明度を設定できる。

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

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

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

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

.header-section, .footer-section {
background: #7b123f;
background: rgba(123,18,63,0.8);
}

2013年のCD

通販LP

関連記事

  • CSS3 Tips : そのうち役に立つばい text-rendering で WordPress 日本語ブログを美しく見せる おまじないにCSS3 Tips : そのうち役に立つばい text-rendering で WordPress 日本語ブログを美しく見せる おまじないに カーニングと合字(リガチャ)のデータを持っている和文フォントをうまい具合に調整してくれる optimizeLegibility […]
  • こら良かばい Related Posts – WordPress 関連記事表示をおしゃれに簡単カスタマイズこら良かばい Related Posts – WordPress 関連記事表示をおしゃれに簡単カスタマイズ 関連した記事を表示するプラグインは、それぞれの思いで開発されたのでしょう。表現されるスタイルに個性が感じられます。イメージ画像とタイトルだけでは、把握しにくいケースも有り記事の要約が表示できるのが良い。日本語だと見苦しい並びにならないように、スタイルシートをカスタマイズできるのが良い。画像サイズを大、中、小と選べる。二列カラムで並べられることが気に入ったトップ・ポイントです。 […]
  • 【WordPress】パンくずリストをプラグインでつける。【WordPress】パンくずリストをプラグインでつける。 WordPress サイトで、パンくずリストを導入する場合はプラグインが色々と出ています。勿論プラグインが消費するメモリーが心配だったら、php に直接コードを書く方法もあります。 今回はパンくずリストを有効とする単独のプラグインではなくて、「 Yoast WordPress SEO […]
  • エルガー・ルートで愛のあいさつをエルガー・ルートで愛のあいさつを その曲を作曲した男は、このチップよりも少ない金額で曲の権利を売ってしまったそうだ。愛する人に贈った曲だったというのにだよ。彼はそれを、今では随分後悔しているようだよ。 […]
  • 《WordPress》Webフォントとサイト・パフォーマンス《WordPress》Webフォントとサイト・パフォーマンス 作成したページの表示が遅い。そう感じたら、1ページの表示にあれこれ盛り込んでいないか見なおそう。 Webフォントは確かに使用すると重くなります。せめて、フロントページでは適用させない。本文記事も長い文章にしないように、ワンポイント的な効果を狙うのがいいでしょう。 おしゃれには一見感じますが長い文章をWebフォントで読むのは、読みにくいものでもあります。 […]

コメントを残す