広告

posted by fanblog

半透明の背景をcssのみで実現する

このエントリーをはてなブックマークに追加
半透明の背景要素
前に、cssのafterとfilterで立体的なボタンを作ってみたを書いている時に気付いたんですけど、ここで使っている手法って色々使えそうだよな~と。

立体的なボタンを表示させる手法として、半透明のブロックを:beforeを使って表示させ、それを前面に設置する事で明度に差を出して、立体っぽく見せかける方法を考えた訳です。
この半透明のブロックを、背面に設置すれば、半透明の背景として使えるんじゃね? って事で実際にやってみたら、上手い事いったっぽいので紹介します。

追記:ただし、コメントいただいたんですが、ブラウザによっては途中で半透明の背景が無くなってしまう、みたいな事がスマホだとあるみたいです。パソコンのブラウザであれば、新しいバージョンならどれも普通に表示されるので、基本的には大丈夫かな、と言う感じです。

半透明の要素を背景に、の前に前置き


ファンブログ専用のテンプレートを一応作ってみて、一応公開して、一応使ってくれる方もいる訳です。もっとどんどん作って、どんどん勝手に使ってもらえる様になりたいな、と思う訳ですが、最初に作ったシンプルなテンプレートがあります。テンプレート1[白]。
これのカスタマイズ方法を、ホームページの方で少し紹介しているんですが、それの1つの方法を、ちょっと変更しました。その際に、最初に書いていた手法とやらを使った訳です。

それってのは、ずばり「半透明」です。
立体的なボタンでは、手前に半透明のボックスを表示させ、元の要素に被せる様にして使った訳ですが、これを奥側に表示させ、背景として使う訳です。

ちなみに、前に紹介していた半透明の背景を使ったテンプレート1のサンプルはこちら。

サンプルページ4 テンプレ1:1記事

これの場合、要素全体をfilter等を用いて半透明にしていたんですけど、この方法だと表示されている文字も半透明になってしまうんです。なので、この方法だとあまり透明度を強く出来ない訳です。スケスケに出来ない訳です。
普通、背景を半透明に、って言ったら文字は半透明にはしません。そんなのアホです。いや、言い過ぎましたけど。

背景要素を作って、そいつを半透明にする


ってな訳で、これを解決!
新たなサンプルページがこちら。

サンプルページ4(改) テンプレ1:1記事

どうでしょうか。こっちの方が全然良いかと。
新しいサンプルでは、ヘッダーとフッターの透明度が高めです。この様に透明度を場所によって変更する事も出来る訳です。サイドバーとコンテンツ部分も若干違います。あんま分かりませんけどw

半透明背景要素を作る方法


例えば、idがcontentという何らかのhtml要素の背景を透明にしたいとします。
その場合、以下の様なコードを追加する事で背景が半透明になります。
#content{
potision:relative;
}
#content:before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
filter: Alpha(opacity=70);
opacity:0.7;
background-color:#fff;
z-index:-1;
}

positionを要素に設定して、表示場所の基準に出来る様にして、追加する背景要素は類似要素:beforeで表示させます。
縦と横は100%にして元の要素の大きさを用いて、filterとopacityで背景の透明度を設定します。
z-indexってのは、表示の順序的な感じで、数字が大きいと手前に表示されます。なので、-1にすれば基本的にはどの要素よりも下に表示される様になるはずなので、文字の裏に背景の様に表示される様になる訳です。

ホバー時に半透明の背景の色は変えられない


ちょっとだけ注意点があります。それは、独立したリンク要素の背景として、この半透明の要素を用いる時です。
って言うのは、例えば「ページのトップへ」みたいな、ページの右下にいつも表示されている様なやつがあるじゃないですか。あれに、この半透明の背景を使うとします。
そうすると、例えば、
<p id="page-top">
<a href="#container">PAGE TOP</a>
</p>

みたいな感じのhtmlコードになると思います。そして、ホバー時に背景色を変えたい、と考えるとします。
そうすると、
#page-top a:before{
content:"";
position:absolute;
~~
}
#page-top a:hover:before{
~~
}

みたいな感じに書きたいと思うんですけど、残念ながらこれは出来ないようです。
理由とかは良く分かりませんが、z-indexを指定しても上手く作用せず、beforeやafter、どちらに変更しても、どう頑張っても背景要素が前面に表示されてしまい、背面に持ってくる事が出来ないんです。

なので、
#page-top:before{
content:"";
position:absolute;
~~
}
#page-top a:hover{
~~
}

と言う様にして、ホバー時のエフェクトはaタグに直接記述する様な形しか出来ないみたいです。
そうすると半透明の背景の色を変える、って事は出来ないので、ホバー時は半透明じゃない背景にして、色を調整する、とかそうなってくるのかな、と。まあ、要素全体を半透明にしちゃうってのでも良いですけども。。

最後に


半透明な背景ってのは、他の方法だと半透明の画像を背景に指定して実装したりしているのが普通な様です。それも面倒かな、っていう俺みたいな人はこういう方法になるのかな、と思います。一応自分のパソコンに入っているIE9、firefox11、google Chrome18、では期待どおりの表示がされているのを確認しています。

これで誰か気に入ってテンプレート使ってくれたりしないですかねw
テンプレートのカスタマイズ方法については、簡単にしかホームページで書いていないので、分からなければコメント下されば対応しますのでよろしくお願いします。
まあ、この透明要素とかも使ってまた新しいテンプレート作らなきゃいけないっすね。いけない事はないですけどw
でも、その前に配色の勉強して、テンプレート2[青]の色違いをもう1つ作ろうと思ってたんですけどね。。全然やってないや。。w

そんな感じで、半透明の背景要素の作り方でした~。

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。