角まるコーナーと半透明シャドウを表示するJavaScript (ShadedBorder)

2007年3月29日(木) 09:00

ShadedBorder
角まるコーナーを作成する場合、通常あらかじめ用意した画像を利用してコーナー部分を作成するが、ShadedBorderのJavaScriptライブラリを利用すれば、画像を用意することなくアンチエイリアス(anti-aliasing)コーナーを作成することが簡単にできる。

アンチエイリアス(anti-aliasing)部分は透明度の異なる<div をJavaScriptで生成することで実現している。また、同様の表現方法を利用してドロップシャドウを表示することまで可能にしている。そのほかにもグロー(Glow)効果にも対応している。

アンチエイリアス角まるコーナー

リンク部分の背景にはグローを適用している

ドロップシャドウ

背景を浸透化するドロップシャドウ

ドロップシャドウを画像など利用して再現する場合、リキッドレイアウトへの対応やPNGの半透明イメージを利用した際のブラウザ対応など考慮すべき部分が多い。JavaScriptライブラリで簡単に表現できるようになった事で、ためらう事無くデザインできる。

実際のところ、1画面中に多くの角まるコーナーや、ドロップシャドウを生成するとブラウザの表示に”もたつき”が発生する。実行環境に左右されるので十分注意して利用する必要はある。

関連する記事