ウェブページのカラースキームをフレキシブルに変更するスクリプトをBuild Internet!から紹介します。
Flexible Color Schemes in Layouts with RGBa
デモではページ上部の「Change the color」から各カラーをクリックすると、そのカラースキームがページ全体に反映されるようになっています。
カラースキームを適用するベースは背景と四つのエレメントで、上から順に、明るい、より明るい、暗い、より暗い、となっています。
カラーの指定には通常のRGBやHexではなく、RGBaを使用しているのも大きな特徴です。最後の「a」は透明度を指定します。
スタイルシートには下記のように記述します。
CSS
スクリプトはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Post on:2010年3月3日
