角まるコーナーと半透明シャドウを表示するJavaScript (ShadedBorder)
2007年3月29日(木) 09:00
角まるコーナーを作成する場合、通常あらかじめ用意した画像を利用してコーナー部分を作成するが、ShadedBorderのJavaScriptライブラリを利用すれば、画像を用意することなくアンチエイリアス(anti-aliasing)コーナーを作成することが簡単にできる。
アンチエイリアス(anti-aliasing)部分は透明度の異なる<div をJavaScriptで生成することで実現している。また、同様の表現方法を利用してドロップシャドウを表示することまで可能にしている。そのほかにもグロー(Glow)効果にも対応している。
アンチエイリアス角まるコーナー

リンク部分の背景にはグローを適用している
ドロップシャドウ

背景を浸透化するドロップシャドウ
ドロップシャドウを画像など利用して再現する場合、リキッドレイアウトへの対応やPNGの半透明イメージを利用した際のブラウザ対応など考慮すべき部分が多い。JavaScriptライブラリで簡単に表現できるようになった事で、ためらう事無くデザインできる。
実際のところ、1画面中に多くの角まるコーナーや、ドロップシャドウを生成するとブラウザの表示に”もたつき”が発生する。実行環境に左右されるので十分注意して利用する必要はある。
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

