Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

結果から

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

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

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を重ねて表現しています。
グラデーションの上下で少しだけ濃さを変え、上から光が差している状況をイメージしました。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away