Tbpgr Blog

Employee Experience Engineer tbpgr（てぃーびー） のブログ

デザイン | グラデーション（Gradation、Gradient）

デザイン

概要

グラデーション（Gradation、Gradient）

詳細

明るさや色彩を徐々に変化させること。

・質感を高める
・対象のイメージを強める
などの効果がある。

サンプル

CSS3のlinear-gradientで指定します。
赤、青、黄緑の明度のグラデーションと色彩のグラデーションを作成。
※サンプルはサボってwebkit系のみ対応のコードです

html
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  span {
    border-style: solid;
  }
  th {
     background-color:hsl(90,50%,50%);
  }
  tr {
    height: 100px;
  }
  td.red_gra_l {
    background:-webkit-linear-gradient(
        top,
        hsl(0, 80%, 100%)   0%,
        hsl(0, 80%,  50%) 100%
        );
  }
  td.chartreuse_gra_l {
    background:-webkit-linear-gradient(
        top,
        hsl(90, 80%, 100%)   0%,
        hsl(90, 80%,  50%) 100%
        );
  }
  td.blue_gra_l {
    background:-webkit-linear-gradient(
        top,
        hsl(240, 80%, 100%)   0%,
        hsl(240, 80%,  50%) 100%
        );
  }

  td.red_gra_h {
    background:-webkit-linear-gradient(
        top,
        hsl(0, 80%, 75%)   0%,
        hsl(90, 80%,  75%) 100%
        );
  }
  td.chartreuse_gra_h {
    background:-webkit-linear-gradient(
        top,
        hsl(90, 80%, 75%)   0%,
        hsl(240, 80%,  75%) 100%
        );
  }
  td.blue_gra_h {
    background:-webkit-linear-gradient(
        top,
        hsl(240, 80%, 75%)   0%,
        hsl(0, 80%,  75%) 100%
        );
  }
  </style>
</head>
<body style="background-color:hsl(270,50%,100%);">
  <div style="background-color:hsl(270,50%,75%);"><h1>Title</h1></div>
  <div style="background-color:hsl(270,75%,75%);"><h2>Summary</h2></div>
  <table width="500px">
    <tr><th colspan="2">title</th></tr>
    <tr><td class="red_gra_l">赤 明度グラデ</td><td class="red_gra_h">赤-黄緑色 色彩グラデ</td></tr>
    <tr><td class="chartreuse_gra_l">黄緑色 明度グラデ</td><td class="chartreuse_gra_h">黄緑色-青 色彩グラデ</td></tr>
    <tr><td class="blue_gra_l">青 明度グラデ</td><td class="blue_gra_h">青-赤 色彩グラデ</td></tr>
  </table>
  <hr>
</body>
</html>
画像