CSS3 を活用したボタン等の作り方 - WebOS Goodies

先週の 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 について 元記事ではすぐに本題に進んでいるのですが、ここでは

[chimantare]

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

[S64]

これはすごい。画像削減ブームくるな

[gayou]

ここまでやるとすごい。CSS3ボタン

[sac3937]

自分もやってみる！単純なのはしたことあるけどここまでできるんだ…。

[efcl]

CSS3でボタン作成

[piro_or]

恥ずかしながらbox-shadowのinset指定を知りませんでした

[mooz]

CSS3 大好き.

[hokousya]

CSS3のborder-radius,text-shadow,box-shadowを使って見栄えの良いボタンやボックスを作る方法です。