CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌

前の記事 ≪：PHP-Imagickのサンプル集
次の記事 ≫：YUIベースのスライドショーライブラリ

CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』

2006年10月01日-

スポンサードリンク

[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法

Transcorners ? Cornerus Pride is there *scared*

Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn.

CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。
mootoolsをフレームワークとして使用しています。

次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。
大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。

このような複雑な形を、次のようにたったの2行で実現できるから驚きです（あらかじめ、mootoolsのopt.jsとTranscorners.jsを読み込む必要アリ）。

$('content').makeRounded('top right', {radius: 10, transition: fx.linear, borderColor: "#555"});
$('content').makeRounded('bottom left', {radius: 100});
// ↑このコードで id="content" の要素が上記画像のような形になります。

その他、サンプルいくつか。こんな感じのボックス要素が簡単に作れます。

これは便利ですね。

関連エントリ

関連の記事検索：JavaScript, CSS, 角丸

スポンサードリンク

By.KJ : 2006年10月01日 12:08

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)

最新のブログ記事(新着順)