角の丸い要素を作る方法 ~ curvyCorners
はじめに
以前は角を丸くするだけでも色々と工夫が必要でしたが、現在は CSS の corner-radius をセットすれば OK です。
画像を使わないで DIV 要素の角を丸く表示するためのライブラリは curvyCorners からダウンロード可能です。
サンプルは次の通り:
このように角が丸くなります。
背景画像を設定することにより、次のように画像の角を丸く表示することも可能です。
コードの書き方
上記のコードは書きの通りです。window の load イベントでパラメータを 設定するために、Event.observe を利用しています。ご存知の通り(?)、 これは prototype.js の機能です。
下のコードでは curvyCorners のコンストラクタに設定 settings と 設定を適用するクラス名 "rounded" を渡しています。
<style type="text/css"> .rounded { text-align: left; background: #ffcc66; padding: 10px; } .rounded_img { background-image: url(testimg1.jpg); background-repeat: no-repeat; } </style> <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/rounded_corners.inc.js"></script> <script type="text/javascript"> Event.observe(window,'load',window_onload,false); function window_onload(evt){ settings = { tl: { radius: 10 }, tr: { radius: 10 }, bl: { radius: 10 }, br: { radius: 10 }, antiAlias: true, autoPad: true, validTags: ["p"] }; var rounded_boxes = new curvyCorners(settings, "rounded"); rounded_boxes.applyCornersToAll(); var rounded_imgs = new curvyCorners(settings, "rounded_img"); rounded_imgs.applyCornersToAll(); } </script>