TAテーマ001 CSSグラデーション機能

TAテーマ001 CSSグラデーション機能

テーマ001情報
TAテーマ001 CSSグラデーション機能

 

ヘッドラインなどの様にサイズが固定的なもののグラデーションは背景画を挿入することで実現できます。

しかし、サイト全体の背景にグラデーション配色を行いたい場合は意外と難しいです。

ブラウザのサイズが変化するため基準の背景画の繰り返しだけでは綺麗なグラデションにならないからです。

このような現場からの声に応えて、TAテーマ001 Version2.07にCSSで実現する(背景画像を使用しない)グラデーション配色機能を追加しました。

 

左上図はCSSグラデーション機能を使用して実現したサイトの背景色の例です。右上図は背景色の設定画面です。

基準画像の繰り返しを使用していないので、ブラウザのサイズを変更してもグラデーションの開始位置と終了位置はそれに追従します。

CSSグラデーションでは開始色、中間色(未使用も選択可能)、終了色の3色を設定してグラデーション配色を実現しています。

linear-gradient()という有名な関数を使用していますが、旧バージョンのブラウザが採用していた関数も併記していますので(可能な限り)古いタイプのブラウザにも対応できます。(旧関数にも対応していないブラウザには対応できません)

背景画の挿入が可能なヘッドラインもCSSグラデーションを採用していますので3色配色で十分なデザインにお使いください。

 

お役に立てれば幸いです。

«
»
  • LINEで送る


ta_thm001_downloadta_designing