【MODX】初期設定の値から背景のグラデーションカラーを生成する

このTIPSは、前にアップした【MODX】初期画面リソースを作って基本設定を一括管理するの応用です。

CrossSystemのデフォルトレイアウトでは、ページの上部にあるソーシャルリンクのバーとフッターエリアではCSS3を使って背景にグラデーションがかかるようにしています。IEの表示用にCSS3 PIEを使っていますが、今回は割愛します。興味がある人は『IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方』/All Aboutあたりを参考にしてください。利用方法が詳しく載っています。


↑この赤枠の部分ですね。

最初にこのグラデーションを設定したとき、CSSは↓以下のようにしていました。

#upperline {

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ccc), to([[settingvalue? &tvname=`bg_color_line`]]));
background: -webkit-linear-gradient(#ccc, [[settingvalue? &tvname=`bg_color_line`]]);
background: -moz-linear-gradient(#ccc, [[settingvalue? &tvname=`bg_color_line`]]);
background: -ms-linear-gradient(#ccc, [[settingvalue? &tvname=`bg_color_line`]]);
background: -o-linear-gradient(#ccc, [[settingvalue? &tvname=`bg_color_line`]]);
background: linear-gradient(#ccc, [[settingvalue? &tvname=`bg_color_line`]]);
-pie-background: linear-gradient(#ccc, [[settingvalue? &tvname=`bg_color_line`]]);

}

#cccから初期設定で設定したbg_color_lineの値までのグラデーションを表示するようにしたわけです。

ただ、これだとグレー系のグラデーションならいいんですが、カラーのグラデーションでは表示がきたなくなってしまいます。
そりゃそうですよね。初期設定でどんな色を設定しても、#cccというグレー色へのグラデーションが表示されるんですから。

じゃぁ、PHPで初期設定のbg_color_lineの設定値よりちょっと明るい値を生成してしまえばいいんじゃ? というアイデアが今回のキモです。

思いついたのはいいんですが、PHPで16進数のカラー値の計算とかできるのかな? と思って探してみたら、ありました。

PHP Manual hexdec — 16 進数を 10 進数に変換する
PHP Manual dechex — 10 進数を 16 進数に変換する

どうやらPHPでは直接16進数を計算することはできないようで、一旦10進数に変換してから計算して、結果をまた16進数に変換する方法で対応できそう。

ではまば、CSSをちょっと弄ります。

#upperline {

background: -webkit-gradient(linear, 0 0, 0 bottom, from([[bg_color_line_top]]), to([[settingvalue? &tvname=`bg_color_line`]]));
background: -webkit-linear-gradient([[bg_color_line_top]], [[settingvalue? &tvname=`bg_color_line`]]);
background: -moz-linear-gradient([[bg_color_line_top]], [[settingvalue? &tvname=`bg_color_line`]]);
background: -ms-linear-gradient([[bg_color_line_top]], [[settingvalue? &tvname=`bg_color_line`]]);
background: -o-linear-gradient([[bg_color_line_top]], [[settingvalue? &tvname=`bg_color_line`]]);
background: linear-gradient([[bg_color_line_top]], [[settingvalue? &tvname=`bg_color_line`]]);
-pie-background: linear-gradient([[bg_color_line_top]], [[settingvalue? &tvname=`bg_color_line`]]);

}

決め打ちしていた#cccの代わりに、[[bg_color_line_top]] というスニペットコールを入れただけです。

次に、[[bg_color_line_top]]を作ります。

<?php
$bg_color_line = $modx->getTemplateVarOutput(bg_color_line,3);
$html_color = $bg_color_line[bg_color_line];

$html_color = preg_replace("/^#/", '', $html_color);
$rgb_color = array();
for($i = 0; $i < 6; $i+=2) {
$hex = substr($html_color, $i, 2);
$rgb_color[] = hexdec($hex);
}

$newrgb_color = array();
for($i = 0; $i < 3; $i+=1) {
$newrgb_color[$i] = $rgb_color[$i]+50;
if ($newrgb_color[$i] > 255) {
$newrgb_color[$i] = 255;
}
$newhtml_color[$i] = dechex($newrgb_color[$i]);
}

最初の2行で、初期設定リソース(ID=3)から元となる背景色の設定値を読み込みます。
次に、読み込んだ値をRGBの3色の指定に分けて、配列に格納します。
格納する際に、値を$rgb_color[] = hexdec($hex);で10進数に変換しておきます。
2つ目のfor文で、格納した値それぞれに50を足しています。
その際、結果が255より大きくなる場合は255に設定しなおすようにしています。生成した値が16進数でFF(10進数で255)を越えないようにする為です。
同じfor文のループの中で、生成した10進数の値を16進数に変換して出来上がりです。

設定したbg_color_lineの値よりちょっと明るい色の値を生成して、CSSでふたつの値のグラデーションを表示してやれば、どんな色を設定しても綺麗なグラデーション表示になるはず!! と考えて、こんなやり方をしてみました。
結果には満足しています。

内容としては、新しい色の生成という部分を覗いては目新しいことはしていません。あくまで前にアップした【MODX】初期画面リソースを作って基本設定を一括管理するの応用でしかありませんが、ちょっとしたアイデアを加えるとこんなこともできるよねっていうのを言いたくてTIPSとして載せてみました。