CSSで木目調背景と畳調背景

7221 ワード
CSS CSS テキストリンク

直接的に役に立つことはあまり無さそうですが、CSSのデザインのアイデアの一つとして記述します。

結果から

将棋盤のイメージを作りました。
ソースはCodePenで公開しています。
https://codepen.io/nakyos/pen/RKJKEL
※以下は、Windows10、Chromeで表示した際のスクリーンショットです。

盤

素材：榧
木目：板目
※柾目のほうが高級ですが、デザインとして面白い板目を選択しました。

css
#board {
  background:
    linear-gradient(
      90deg,
      rgba(208, 147, 82, 0.6),
      rgba(192, 134, 70, 0.6) 60%,
      rgba(208, 147, 82, 0.6)
    ),
    repeating-radial-gradient(
      ellipse at 60% 500%,
      #c08646,
      #c08646 0.2%,
      #d09352 0.6%,
      #d09352 1%
    );
}

repeating-radial-gradientで、板目の楕円形を表現しています。
ただ、それだけだとクッキリし過ぎていたので、linear-gradientを重ねて程良くボヤけさせてみました。

駒台

素材：桂
木目：柾目

css
.stand {
  background:
    repeating-radial-gradient(
      circle at -1000% 0%,
      rgba(116, 77, 48, 0.7),
      #573216 7.5%,
      rgba(116, 77, 48, 0.9) 10%
    ),
    repeating-radial-gradient(
      circle at -1000% 0%,
      #573216,
      #573216 0.1%,
      #744d30 0.4%,
      #744d30 0.5%
    );
}

2つ目のrepeating-radial-gradientで、板目の直線に近い円形を表現しています。
ただ、それだけだとあまりにも規則的で人工的な印象になったので、1つ目のrepeating-radial-gradientを重ねて全体に濃淡の差を付けてみました。

畳

素材：い草

css
body {
  background:
    linear-gradient(
      0deg,
      rgba(139, 126, 74, 0.8),
      rgba(168, 157, 95, 0.6) 10%,
      rgba(168, 157, 95, 0.2) 90%,
      rgba(139, 126, 74, 0.8)
    ),
    linear-gradient(
      90deg,
      #f9daa4,
      #f9daa4 25%,
      #cea660 25%,
      #cea660 50%,
      #ddba78 50%,
      #ddba78 75%,
      #c69f5a 75%,
      #c69f5a
    );
  background-size: 4px 20px;
}

細かい縦と横のlinear-gradientを重ねて表現しています。
グラデーションの上下で少しだけ濃さを変え、上から光が差している状況をイメージしました。

Web開発総合クラスの準備(1 6){google-font}