上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 エンボス効果。ラインの部分だけへこんで見える効果。
 いわゆる「でこぼこ」に見えるんだけど、飛び出しているだけの無粋な効果ではない、ちょっとかっこいいあれです。
 高品質のウェブサイトや、「ソフトのメニュー画面」などでも使われています。
 あれ、実は簡単なので、少し説明してみましょう。


CSSのデフォルト

 実は、スタイルシートでははじめからエンボス効果が作れるように、予め用意された「命令文」が存在します。

border : 2px groove #999 ;
border : 2px ridge #999 ;

 こういうヤツです。いつも使うのは「solid」や「dotted」ばかりだと思いますが、それを「groove」や「ridge」に命令文を変えれば、へこんで見えるラインが作れます。

ridgeタイプ

grooveタイプ

 簡単でしょう。
 上のHTMLとスタイルシートは、以下のように書いています。

<div style="padding:5px;border:2px ridge #999;">ridgeタイプ</div>
<div style="padding:5px;border:2px groove #999;">grooveタイプ</div>



重要な条件

 でも、実際スタイルをいじれる人であれば、このスタイルを当ててみたことがあると思います。上手くいかなかったのではないでしょうか?
 試しに、全く同じタグとスタイルを、先ほどとは少し異なる条件で再現してみます。

ridgeタイプ

grooveタイプ

 どうでしょう。先ほど示したタグを、全く同じように書いています。ブラウザによってはある程度まともに見えるものもあるかもしれませんが…まあ、かっこよくはないと思います。
 もう説明するまでもないかもしれませんが、この「ridge」と「groove」を使うときは、背景の明度がある程度落ちている状態(つまり、暗い背景色)或いは背景に色が付いている状態でないと、かっこよく表示されないんです。

 もう一つの条件は、ボーダーカラーに背景色と同じ色指定をするということです。
 さらに、ボーダーの太さを2px以上にするということ。

 これら3つの条件がそろえば、「ridge」と「groove」は美しく表示されます。


単に目の錯覚

 しかしこれは、ブラウザによっては表示される状態が微妙に異なる場合があります。それが嫌だという完璧主義の方は、錯覚の仕組みさえ覚えておけば、ボーダースタイル「solid」で細かく一本一本色指定をすることで、異なるブラウザ間でもほぼ同じ表示を実現することが出来ます。

 ぱっと見は「ridge」のほうは、線が浮き出て見えますよね。「groove」は逆に引っ込んで見えます。
 これ、「右下から光が当たっているんだ!絶対だ!」と思って、じーっとぐ~~っと見てください。
…私は出来ませんでしたが、見える方には「ridge」の方が引っ込んで、「groove」の方が浮き出て見えてくるのではないでしょうか?

 これ、単にボーダーの明度の強弱をつけた2本の直線を使って「影」を表現しているんです。

 以下が、図説です。
エンボスの見える仕組み

 上或いは右角に「影」→「ハイライト」の順番でラインを配置すれば、簡単に目の錯覚でさも「エンボス加工」がされているように見えます。

 背景色が真っ白、或いは真っ黒だと、真っ白の場合はハイライトと背景が同化、真っ黒だと影と背景が同化して、目の錯覚が起きにくくなるというからくりです。


 当サイトでもエンボス効果を利用したテンプレートが多数あるので、確かめてみてくださいね。


■テンプレートの一覧はこちらから。
テンプレート一覧

■初級編・次の記事へ進む
背景編
このエントリーをはてなブックマークに追加
Thu.07.01.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。