CSS3 の HSL を使って汎用的な Web デザイン
前回に引き続き HSL についてです.
CSS3 の HSL を使って, 簡単に色調整ができる Web ページを作ってみました.
処理コストは度外視しています.
Sample
下記は今回制作したサンプルへのリンクです.
1つ目のサンプルはサイドバーにあるスライダで色を変えることができます.
2つ目のサンプルは更新するたびに背景色が変わります.
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 の力!!
簡単に色を変えられるWebページを作ってみました.
『CSS3 の HSL を使って汎用的な Web デザイン』
http://t.co/ozGkrNZj
#css3