CSS3 の HSL を使って汎用的な Web デザイン

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

前回に引き続き HSL についてです.

CSS3 の HSL を使って, 簡単に色調整ができる Web ページを作ってみました.

処理コストは度外視しています.

Sample

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

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

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

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 の力!!

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT