messalibertyのサイトにも使われている角丸は『curvyCorners』というjavascriptライブラリを利用して表現しています。
curvycorners
すごくキレイな角丸を表現できるのですが、少し重いのが難点です。
近いうちに更新したいと思いますが、社内にてリクエストもあったのでこの機会にメモとして『curvyCorners』の設置の仕方を紹介します。
1. まずは配布サイトからcurvycorners.jsファイルをダウンロードし、以下のようにheaderにて読み込みます。
<script type="text/javascript" src="curvycorners.js"></script>2. 次に角丸を適用したいblock要素をclass属性を付けて配置します。
上部に角丸を適用
<div class="myboxtop">
上部のみ角丸が適用されます。<br />
上部のみ角丸が適用されます。<br />
上部のみ角丸が適用されます。<br />
</div>下部に角丸を適用
<div class="myboxbottom">
下部のみ角丸が適用されます。<br />
下部のみ角丸が適用されます。<br />
下部のみ角丸が適用されます。<br />
</div>上下に角丸を適用
<div class="myboxall">
上下に角丸が適用されます。<br />
上下に角丸が適用されます。<br />
上下に角丸が適用されます。<br />
</div>以上のようにclassを設置し、次はjsファイル内のスクリプトを編集します。
3. 以下の項目にて角丸の設定をします。
上部のみ10pxの角丸を設定
settingsTop = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 0 },
br: { radius: 0 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}下部のみ10pxの角丸を設定
settingsBottom = {
tl: { radius: 0 },
tr: { radius: 0 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}上下に10pxの角丸を設定
settingsAll = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true,
validTags: ["div"]
}tl(top left): 左上の角丸
tr(top right): 右上の角丸
bl(bottom left): 左下の角丸
br(bottom right): 右下の角丸
antiAlias: アンチエイリアス適用の有無(true or false)
autoPad: margin設定の有無(true or false)
validTags→curvyCornersの適用されるタグの選定（カンマ区切りで複数設定可）
4. それぞれの設定をclassに適用します。
myBoxObject = new curvyCorners(settingsTop, "myboxtop");
myBoxObject.applyCornersToAll();
myBoxObject = new curvyCorners(settingsBottom, "myboxbottom");
myBoxObject.applyCornersToAll();
myBoxObject = new curvyCorners(settingsAll, "myboxall");
myBoxObject.applyCornersToAll();
以上で、それぞれのclassを設定するだけで面白いほど簡単に角丸が適用されます。
あとは軽くなれば良いのですが…。
English
Japanese
記事
コメント
