概要 Glass City by jaxxonCSS3のbox-shadowのプロパティを見ていて、実用性はあまりなさそうだけど、こういうこともできるんだなぁという発見をしました。あまりにも小ネタ過ぎて忘れそうなので記事にしておきます(笑)。Photoshopでベベルのオブジェクトを作ることがありますよ
Glass City by jaxxon


CSS3のbox-shadowのプロパティを見ていて、実用性はあまりなさそうだけど、こういうこともできるんだなぁという発見をしました。

あまりにも小ネタ過ぎて忘れそうなので記事にしておきます(笑)。


Photoshopでベベルのオブジェクトを作ることがありますよね。
ボタンを作る際に以前は多用されていた気がします。(最近はかなり減りましたかね…)
20120329-ベベル-02


Photoshopのこのオブジェクトは幅と高さがともに200px、角の丸みは20pxのベクトルシェイプ(ベクトルマスク)で作成されています。
これはPhotoshopのシェイプレイヤー(ベクトルマスク)の機能とレイヤー効果の機能で作成されています。


レイヤー効果は以下の様に「ベベル(内側)」が設定されています。
20120329-ベベル-03



これをCSSだけで再現します。

<div>を作成し、次のCSSを割り当てます。

width: 200px;
height: 200px;
background: #cccc66;
border-radius: 20px;
box-shadow: 3px 3px 10px 0px rgba(255,255,255,0.75) inset,-3px -3px 10px 0px rgba(0,0,0,0.75) inset;

width・heightで200pxを設定し、backgroundでdivを塗りつぶすカラーを設定します。
border-radiusで角丸のサイズを20pxに設定します。


そして最後のbox-shadowのプロパティがベベルのような仕上がりにするための勘所です。

3px 3px 10px 0px rgba(255,255,255,0.75) inset

上記のbox-shadowのプロパティは左辺と上辺の光の部分を作成しています。
まず「inset」でdiv要素の内側に描画することを宣言し、「3px 3px 10px 0px」で描画のエリアを設定します。
「rgba」の値で255,255,255のカラー指定「白」で描画エリアを塗ることを設定し、「0.75」(=75%)の不透明度を設定します。


-3px -3px 10px 0px rgba(0,0,0,0.75) inset

上記のbox-shadowのプロパティは 右辺と底辺の影の部分を作成しています。
先ほどと同じように「inset」でdiv要素の内側に描画することを宣言し、「-3px -3px 10px 0px」で描画のエリアを設定します。位置指定でマイナスを指定すると、右辺・底辺からの位置になるわけです。
「rgba」の値で0,0,0のカラー指定「黒」で描画エリアを塗ることを設定し、「0.75」(=75%)の不透明度を設定します。


box-shadowのプロパティは「,」によって複数設定できるをことをご存じですか。
この2つのプロパティを「,」で区切って書くだけです。


CSSを適用したdivは以下の様になりました(左側)。
(灰色の枠の中の画像はGoogle Chrome 17で見たもののスクリーンショット)
20120329-ベベル-04



簡単でしたね。


内側に影を付ける「inset」を使うことでこうしたおもしろい効果を出すことができます。
もし画像を使わずCSSだけでボタンを作る際は試してみて下さいね。


※なお、Google Chrome 17・Firefox 11・Internet Explorer 9で確認しました。


それでは。

●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索