Sample

下記は今回制作したサンプルへのリンクです.

• Flexible Color Style
• Flexible Color Style – Timer ver

１つ目のサンプルはサイドバーにあるスライダで色を変えることができます.

２つ目のサンプルは更新するたびに背景色が変わります.

Donwload

Structure

下記のコードは今回サンプルで使用しているスタイルの一部です.

/**
 *     body
 */
body {
    background-color: hsl(120, 50%, 50%);
}

/**
 *     header
 */
#header {
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 15%, rgba(0, 0, 0, 0.0) 15%, rgba(0, 0, 0, 0.0) 100%);
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 15%, rgba(0, 0, 0, 0.0) 15%, rgba(0, 0, 0, 0.0) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 15%, rgba(0, 0, 0, 0.0) 15%, rgba(0, 0, 0, 0.0) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 15%, rgba(0, 0, 0, 0.0) 15%, rgba(0, 0, 0, 0.0) 100%);
    background: linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 15%, rgba(0, 0, 0, 0.0) 15%, rgba(0, 0, 0, 0.0) 100%);
    border-bottom: 1px solid #ddd;
    box-shadow: 0px 2px 8px px black;
}

今回作成したサンプルのキモは, 色指定を body 要素にしかしていない点です.

正確にはそれぞれの要素に色指定しているのですが, テーマカラーとなる色を body に, それ以外の要素には 白いフィルターを重ねる形で色を変化させています.

なので, body 要素の色を変えるだけでサイト全体の色が変わったように見せることができます.

そして, body 要素への色指定を hsl で行うことで視認性を維持したままテーマカラーを変更することができます.

これぞ hsl の力!!