簡単に角丸作成できるJavascript「DD_roundies」

公開日

角丸にしたい際、CSS3の「border-radius」を使えれば簡単に角丸を作れるのですが、ブラウザごとの対応も異なっているので、現状はまだ難しいですよね。

そんな時に便利なのが、DD_roundiesです。DD_roundiesは、画像を使用せずに角丸を表現できるJavascript(JS)ライブラリです。軽量かつ角丸のサイズを簡単に個別指定できるところが魅力です。jQueryなどを利用せずDD_roundies単体で動作します。

簡単に角丸作成できるJavascript「DD_roundies」

Internet Explore6,7,8、FireFox、Chrome、safari、Operaといった主要なブラウザにしっかり対応しているところも嬉しいかぎりです。
…と思ったらIE8の場合、角丸にはなるのですが、背景画像が表示されていないようですね。

使用方法は簡単で、ダウンロードしたファイルを外部ファイルで読み込み、スクリプトでidやクラスごとに角丸のサイズ指定をします。

記述例)boxというクラスの4角すべてをサイズ5pxで角丸にする場合
DD_roundies.addRule('.box' , '5px' ,true);

記述例)boxというクラスの個別に角丸サイズを指定する場合 DD_roundies.addRule('.box' , '0px 5px 10px 20px' ,true);
この例では、左上0px、右上5px、右下10px、左下20pxで指定しています。

DD_roundiesダウンロード



Warning: Invalid argument supplied for foreach() in /home/ads2021/adesignare.com/public_html/wp/wp-content/themes/cure-child/single-blog.php on line 273

最近の記事

  1. Chromebookの壁紙をデフォルト標準に戻す方法【ASUS】

  2. WordPress記事にソースコードを超簡単に埋め込むプラグイン「Highlighting Code Block」

  3. WordPressでナビゲーションメニューに現在地のカレント current class をつける方法

  4. Twitterが英語表記になっている時に日本語表記に言語設定を変更する方法

  5. オリンピック記念チケット PDFダウンロードのやり方(無料)

  6. 「HEIC」を「JPG」にMac プレビューで変換。WordPressで画像をアップできない場合の対処方法

  7. コピーライトの正しい書き方を紹介!実はCopyright部分はいらない。©だけでOK

  8. Macのプレビューで複数ファイルを同じウインドウで表示

カテゴリー