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

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

2006年10月01日-はてなブックマーク

スポンサード リンク
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" の要素が上記画像のような形になります。

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



これは便利ですね。

関連エントリ

関連の記事検索:CSS, JavaScript, 角丸, デザイン, Webデザイン, ライブラリ
スポンサード リンク

By.KJ : 2006年10月01日 12:08 livedoor Readerで購読 Twitterに投稿

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