box-shadowとtext-shadowのテンプレ

CSS3対応が過渡期の間の影付きテキスト及び影付きボックスの指定方法のメモ。

  • text-shadowもtext-boxも指定する値は左から順に、水平位置、垂直位置、影のサイズ、影の色
  • 大体のケースでそのまま使えるコピペ用CSS
.text-shadow {
  -moz-text-shadow: 5px 5px 7px #AAA;
  -webkit-text-shadow: 5px 5px 7px #AAA;
  text-shadow: 5px 5px 7px #AAA;
}
.box-shadow {
  -moz-box-shadow: 5px 5px 7px #AAA;
  -webkit-box-shadow: 5px 5px 7px #AAA;
  box-shadow: 5px 5px 7px #AAA;
}

角丸はjQueryUIで

角丸を実現する border-radius もよく使うんだけど、これに関しては上下左右の指定用クラスとか1個ずつ自分で作るよりも jQueryUI の ui-corner-* クラスを使った方が便利なので僕はいつもそれです。