先週の Icon Creator Widget に続いて、本日も Opera の開発者向けサイトからのネタをひとつ。公開されたのは先月末なのですが、 CSS3 の text-shadow, box-shadow, border-radius などを活用して美しいボタンやボックスを作成する方法の解説記事が掲載されていました。今後の Web 制作でとても役立つテクニックだと思うので、その内容を簡単にご紹介します。

なお、この記事は CSS3 を使用しているため、ブラウザによっては正しく表示されません。たぶん Firefox, Google Chrome, Opera の最新版であれば大丈夫かと思います（Safari は box-shadow に未対応）。

text-shadow, box-shadow, border-radius について

元記事ではすぐに本題に進んでいるのですが、ここでは border-radius, text-shadow, box-shadow の各 CSS3 属性について簡単に説明しておこうと思います。なお、 CSS3 は策定中の規格ですので、ブラウザによっては属性名に "-webkit-", "-moz-" などのプレフィクスを付けないと効果が出ない場合があります。以下のサンプルコードでは煩雑になるため省略しますが、実際に記述する際にはこれらのプレフィックスを付けた行も入れておくと良いでしょう。

border-radius

まずは border-radius です。名前のとおり、いわゆる丸角のボックスを実現する属性です。基本的な書式は以下のとおり（-webkit-border-radius については後述）。

border-radius: 左上 右上 右下 左下;

それぞれの値には通常のサイズ（px, em など）と % が指定でき、それぞれの角の半径を指定します。左下を省略したときは右上と同じ、右下を省略したときは左上と同じ、右上を省略したときはすべての角が同じ半径になります。例えば以下のように指定すると・・・

span {
  border-radius: 0.5em 1em;
  border: solid 2px black;
  padding: 0.5em;
}

こうなります

さらに、実は "/" を挟んでもうひと組の数値が指定でき、横と縦の半径を別々に指定できます。

border-radius: 左上横 右上横 右下横 左下横 / 左上縦 右上縦 右下縦 左下縦;

こちらも例を示すと・・・

span {
  border-radius: 0.5em 1em / 0.5em 2em;
  border: solid 2px black;
  padding: 0.5em;
}

こうなります

なお、 -webkit-border-radius は仕様が古く、四隅すべてに同じ値を指定することしかできません。したがって、上記のように別々の値を指定する場合は、それぞれ個別の属性を使わなければなりません。例えば 2 番目の例を古い Webkit （現行の Safari を含む）と、ついでに Firefox にも対応させるには、以下のように記述します。

span {
  border: solid 2px black;
  border-radius: 0.5em 1em / 0.5em 2em;
  -moz-border-radius: 0.5em 1em / 0.5em 2em;
  -webkit-border-top-left-radius: 0.5em;
  -webkit-border-top-right-radius: 1em 2em;
  -webkit-border-bottom-right-radius: 0.5em;
  -webkit-border-bottom-left-radius: 1em 2em;
  padding: 0.5em;
}

ちょっと面倒ですね・・・ orz

text-shadow

text-shadow は、文字列の影を表示する属性です。この属性はどのブラウザでもプレフィクスなしの属性名でサポートされているようです。 CSS3.info のサンプルも付けていなかったので、プレフィクスは不要と考えて良いかと思います。基本的な書式は以下です。

text-shadow: 横方向のずれ 縦方向のずれ ぼかしの強さ 影色;

縦横方向のずれ、ぼかしの強さは通常のサイズ (em, px...) で指定します。影色は CSS カラーです。例えば以下の指定だと・・・

div {
  text-shadow: 2px 2px 6px red;
}

こうなります。

さらに、上記の 4 つのパラメータは何組でも続けて指定できるので・・・

div {
  text-shadow: 0 0 4px white, 1px -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
  color:white;
  background-color:black;
  padding:40px 1em 8px;
}

こんなこともできちゃいますｗ

影の描画順は、最後に指定したものが最初になります（つまり、先に指定したものが上に表示される）。指定できる影の数はブラウザ依存なので、あまり多く指定すると正しく表示されない可能性があります。ご注意ください。

box-shadow

box-shadow はテキストではなくボックスの影を表示する属性です。

box-shadow: [inset] 横方向のずれ 縦方向のずれ ぼかしの強さ 拡縮 影色;

最初の inset は省略可能で、指定した場合の効果は後述します。続く 3 つのパラメータと影色は text-shadow と同じです。拡縮はちょっとわかりづらいですが、これに値を指定すると、その分だけ上下左右に影のサイズを拡大（負の場合は縮小）します。例を示すと・・・

div {
  box-shadow: 0 0 2px 5px #ccc;
  background-color: #ffc;
  width: 100px;
  height: 100px;
}

少しわかりづらいですが、影のボックスが上下左右に 5 ピクセル拡大された後、エッジにぼかしがかかっているのがわかると思います。拡縮のパラメータは省略可能で、そのときは 0 が指定されたものとして扱われます。

inset を指定すると、影をボックスの内側に描画するようになります。

div {
  box-shadow: inset 0 5px 10px #ccc;
  background-color: #ffc;
  width: 100px;
  height: 100px;
}

さらに、 text-shadow と同じようにコンマ区切りで複数の影を指定することも可能です。

ボタンを作る

それでは、 Opera 開発者サイトで紹介されていた例をご紹介していきます。最初はボタンです。

まずは button タグに border-radius （＋若干の調整）を施します。

button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: none;
  padding: 5px 30px;
  background: lightgreen;
}

Test

次に、 box-shadow を使って立体感を出します。ひとつめの影で内部の陰影を、 2 つめで下の影を描画しているのがポイントですね。

button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
  -webkit-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
  -moz-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
  border: none;
  padding: 5px 30px;
  background: lightgreen;
}

Test

だいぶボタンらしくなってきましたね。最後にラベルのテキストに text-shadow を適用して完成です（微妙に無効なボタンっぽい感じですが ^^;）。

button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
  -webkit-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
  -moz-box-shadow: inset 0 5px 10px yellow, 0 1px 1px green;
  text-shadow: 0 1px 1px lightyellow;
  border: none;
  padding: 5px 30px;
  color: darkgreen;
  background: lightgreen;
}

Test

ここからはバリエーションです。 box-shadow に影を 3 つ指定して、より立体感を強調しています。ひとつめの影が上部のハイライト、 2 つめが内部の陰影、 3 つめが下部の影です。

button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
  -webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
  -moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
  text-shadow: 0 1px 1px black;
  border: 1px solid maroon;
  padding: 5px 30px;
  color: white;
  background-color: red;
}

Test

次はボタンの周囲に淡い影を描画して、ボタンが輝いているように見せています。ボタン内部のシャープなグラデーションも box-shadow で実現されています。

button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
  -webkit-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
  -moz-box-shadow: inset 0 1px 3px #fff, inset 0 -15px #cbe6f2, 0 0 3px #8ec1da;
  text-shadow: 0 1px #fff;
  border: 1px solid #8ec1da;
  padding: 5px 30px;
  color: #3985a8;
  background-color: #ddeef6;
}

Test

こちらは先ほどの赤いボタンと似ていますが、 box-shadow のぼかしを強くしてやわらかい感じを出しています。

button {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
  -webkit-box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
  -moz-box-shadow: inset 1px 6px 12px lightgreen, inset -1px -10px 5px darkgreen, 1px 2px 1px black;
  text-shadow: 1px 1px 1px black;
  border: 1px solid darkgreen;
  padding: 5px 30px;
  color: white;
  background-color: green;
}

Test

ボックスを作る

今度は UI を囲うボックスを作ってみます。こちらのほうが border-radius や box-shadow の本来の使い方ですね。

まずは基本。 2 つの影を指定してボックス内部のハイライトと影を表現しています。

div {
  box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
  -webkit-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
  -moz-box-shadow: 0 1px 5px #0061aa, inset 0 10px 20px #b6f9ff;
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 0;
  background: #6fb2e5;
}

次は上とあまり違いがわかりませんね・・・。たぶん影色を半透明にしているのがポイントなのかな？

div {
   box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);
   -webkit-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);
   -moz-box-shadow: 8px 10px 10px rgba(0,0,0,0.5), inset 8px 10px 10px rgba(255,255,255,0.75);
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 0;
   background: #ccc;
}

こちらはすごい。半透明の影を駆使して、ガラスのような質感を表現しています。ひとつめの影が外側の影、 2 つめが上部の鋭いハイライト、 3 つめが上部の幅広のハイライト、 4 つめが 3 つめのハイライトのぼかし部分、 5 つめが下部の陰を表現しています。

div {
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   width: 100px;
   height: 100px;
   margin: 10px;
   padding: 0;
   border: 1px solid rgba(0,0,0,0.5);
   background: rgba(0,0,0,0.25);
}

とりあえず以上ですが、いかがでしたでしょうか。私は CSS でここまで表現できるとは思っていなかったので、かなりの驚きでした。パーツごとに分割された画像や不必要なマークアップを駆使した苦労はなんだったんでしょうね（笑）。元ネタのページでは、さらに応用的な UI のサンプルも紹介されているので、そちらもぜひチェックしてみてください。