JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」
2007年03月27日-
スポンサード リンク
ruzee.com - Steffen Rusitschka ShadedBorder - JavaScript Round Corners with Drop Shadow
Rouding corners with JavaScript has a long history. Everything started on 16th of March 2005 with Nifty Corners and loads of other libs followed.
JavaScriptでボックス要素の角丸を自由自在に操るライブラリ「RUZEE.Borders」。
同様のライブラリに Nifty Corners がありますが、これを更に進化させ、使いやすく、高速に、かつより多くのブラウザに対応したものだそうです。
ブラウザ対応は、Firefox, Internet Explorer 6.0以降, Safari, Opera 9.0以降 。
次のような角丸タブも自由自在。
使い方は非常に簡単。
次がサンプルコード。
<script type="text/javascript" src="shadedborder.js">
<style type="text/css">
/* CSSコード */
</style>
<div id="round_me" class="sb">
<p>角丸ブロック</p>
</div>
<script type="text/javascript">
var border = RUZEE.ShadedBorder.create({ corner:8, shadow:16, border:2 });
border.render('round_me');
</script>
シンプルHTMLで、JavaScriptコードもたったの2行という簡単さ。
特にJavaScriptの知識がなくとも、コピペで簡単に使えます。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ