CakePHPの標準CSSをベースにしてカラー関数で色を調整
デフォルトcss
Sass&Compassのカラー関数を使って色を調整してみます。
基準とする色はPHPフレームワークCakePHPのデフォルトCSSのh1のbackgroudとh2のcolorをベースにして、カラー関数で調整してみます。
CakePHP標準の色をSassで変数に設定してコンパイルします。
$base: #003d4c; $base2: #e32; $new-color: $base; $new-color2: $base2;
CakePHP標準の色でcssがコンパイルされました。以下それぞれのカラー関数で色を変えてみます。
lighten
変数の設定
$base: #003d4c; $base2: #e32; $new-color: lighten($base, 30%); $new-color2: lighten($base2, 30%);
色見本
コンパイルされたCSS
background: #00b8e5 color: #f9b6b0
adjust-color
変数の設定
$base: #003d4c; $base2: #e32; $new-color: adjust-color($base, $lightness:-20%); $new-color2: adjust-color($base2, $lightness:-20%);
色見本
コンパイルされたCSS
background: black color: #9e180c
scale-color
変数の設定
$base: #003d4c; $base2: #e32; $new-color: scale-color($base, $lightness:-10%); $new-color2: scale-color($base2, $lightness:-10%);
色見本
コンパイルされたCSS
background: #003744 color: #e32311
tint
変数の設定
$base: #003d4c; $base2: #e32; $new-color: tint($base, 50%); $new-color2: tint($base2, 50%);
色見本
コンパイルされたCSS
background: #7f9ea5 color: #f69990
shade
変数の設定
$base: #003d4c; $base2: #e32; $new-color: shade($base2, 40%); $new-color2: shade($base2, 40%);
色見本
コンパイルされたCSS
background: #00242d color: #8e1e14
complement
変数の設定
$base: #003d4c; $base2: #e32; $new-color: complement($base); $new-color2: complement($base2);
色見本
コンパイルされたCSS
background: #4c0f00 color: #22ddee
desaturate
変数の設定
$base: #003d4c; $base2: #e32; $new-color: desaturate($base, 65%); $new-color2: desaturate($base2, 65%);
色見本
コンパイルされたCSS
background: #192e33 color: #a1736f
adjust-hue
変数の設定
$base: #003d4c; $base2: #e32; $new-color: adjust-hue($base, 70deg); $new-color2: adjust-hue($base, 70deg);
色見本
コンパイルされたCSS
background: #1c004c color: #bbee22
grayscale
変数の設定
$base: #003d4c; $base2: #e32; $new-color: grayscale($base); $new-color2: grayscale($base2);
色見本
コンパイルされたCSS
background: #262626 color: #888888
mix
変数の設定
$base: #003d4c; $base2: #e32; $new-color: mix($base,$base2, 65%); $new-color2: mix($base2,$base, 65%);
色見本
コンパイルされたCSS
background: #53393d color: #9a3630