MizillaとSafariのCSSサポートを組み合わせればCSSだけでboxのドロップシャドウができる

CSS

と思ったんだけど、組み合わさってないんだからできないわけで。アイディアだけ。


Mozillaではborder-colorに複数色を設定すれば、例えばグラデーションのかかったborderを作ることができます。(てっきりCSS3公式なのかと思ったら、CSS3背景、ボーダーモジュール(邦訳)を読むとどうも違うような気がする。)
他方、CSS3のRGBAColorを使えば半透明色を指定できます。
両者を組み合わせれば、徐々に薄くなるborderが作れるってわけです。
border-colors(仮)はMozillaのみ、RGBAには(たぶん)WebKitだけが対応している状況なので、両者を組み合わせるのは少なくとも現時点では残念ながら不可。(今調べたら-moz-rgbaなんてのがあるみたいだけど動作しない。どうやらFirefox3で導入されるみたい。)
というわけで、いつか動くかもしれないサンプルコード。

#box {
  border: 11px solid rgb(255,0,0);
  border-color:
    rgba(0,0,0, 0)
    rgba(0,0,0, 0.1)
    rgba(0,0,0, 0.2)
    rgba(0,0,0, 0.3)
    rgba(0,0,0, 0.4)
    rgba(0,0,0, 0.5)
    rgba(0,0,0, 0.6)
    rgba(0,0,0, 0.7)
    rgba(0,0,0, 0.8)
    rgba(0,0,0, 0.9)
    rgba(0,0,0, 1)
    rgba(255,0,0, 1.0);
}

1pxの赤い枠の外側についた黒い影が、徐々に薄くなる。はず。もしかしたら改行しちゃ駄目かも。
ちなみにFirefoxは現時点でも-moz-border-bottom-colorsを使った上で背景色を決め打ちすれば疑似ドロップシャドウ(実際はただのグラデーション)ができます。


このCSSドロップシャドウとborder-radiusを組み合わせれば、CSSのみでWidgetっぽい何かができる。はず。


…とここまで書いてから、CSS3にはbox-shadowなんてのがあるらしいということを発見。オフセットもぼかし半径もサポートするプロパティ。今のところWebKitのnightlyを含めどのブラウザでも実装されてないようですが(http://www.geocities.com/seanmhall2003/css3/borders.htmlにサンプル)、これさえサポートされれば万事OKだったりする。
なんだ、この記事いらないじゃん。