Home > コーディング > CSS角丸のサンプルが気に入らない

CSS角丸のサンプルが気に入らない

phpspot開発日誌さんの「CSSの小技集、20個」の記事の「角丸」のサンプルはあまり良くないと思います。

問題のサンプルは「Rounded corners in CSS」に載っています。

まずkm-ue.gifkm-sita.gifのような2枚の画像を用意します。
そしてCSSで下記のソースの<h2>にkm-ue.gifclass="roundcont"にkm-sita.gifを背景画像として指定したら同じものが作れると思います。
km-sita.gifはbackground-positionを100%かbottomに指定します。
もちろん横幅は固定だし、見出しを入れる必要はありますが。

<div class="roundcont">
   <h2>KADOMARU</h2>
   <p>Lorem ipsum dolor sit amet, consectetur
   adipisicing elit, sed do eiusmod tempor
   incididunt ut labore et dolore magna aliqua.
   Ut enim ad minim veniam, quis nostrud
   exercitation ullamco laboris nisi ut aliquip
   ex ea commodo consequat. (略)</p>
</div>


他のサンプルは問題ない(と思う)ものが多かったけど、CSSの角丸は人気(?)なだけに特に気になりました。はてブの登録数が500を超える人気の記事ですから、2003年の古い手法が流れるのはちょっと……。あれだったらテーブル使ってるのとあんまり変わらないような。

Home > コーディング > CSS角丸のサンプルが気に入らない

Search
Feeds

Page Top