ボックスの丸み・影・グラデーションなどCSS3をクロスブラウザで使うまとめ[その1]

今回は最近シンプルなサイトでよく使われるテキスト・ボックスの影や丸ボタンを画像を使わずにCSSだけで作る方法をまとめてみました。

丸み

ボタンに丸みをつけるときに使用する一番使用頻度が高いスタイルかと思います。

[html]
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
[/html]

IE9、Firefox、Google Chome、Safari、Operaで確認済み。もちろんスマホでも使えます。
プロパティは4つまで指定できます。
border-radius: [4隅全て];
border-radius: [左上・右下] [右上・左下];
border-radius: [左上] [右上・左下] [右下];
border-radius: [左上] [右上] [右下] [左下];

IE8以下では対応しておらず、どうしても対応させたい場合はJavascriptもしくはhtcを使用します。

border-radius.htcを使用する

→border-radius.htcのダウンロードはこちら
[html]
behavior: url(border-radius.htc);
[/html]
と指定すればOK!

Javascriptを使用

jQuery.corner
私が使用したことがあるのはこれくらい。動作的には問題なし。

ただし、どちらの方法も画像に丸みをつけたりすると不具合が出るなど注意が必要です。

 

ボックスの影

ボックスに影をつけると、立体感が生まれます。いわゆるドロップシャドウというものですね

[html]
box-shadow: 10px 10px 10px 10px #000000 inset;
-moz-box-shadow: 5px 5px 5px #000000;
-webkit-box-shadow: 5px 5px 5px #000000;
-ms-filter: “progid:DXImageTransform.Microsoft.Glow(color=#000000,direction=5,sstrength=5)”;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=5,strength=5);
[/html]

指定は影のオフセット、長さ、広がり、色と細かく指定可能。
box-shadow: [X座標] [Y座標] [ぼかしの長さ] [影の広がり] [色] [insetで内側に影];
ここでもIE8以下は使用できなくなります。

次回はグラデーション・テキストの影について記述していきます。

コメントを残す

メールアドレスが公開されることはありません。