Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【和柄CSS】分銅繋ぎ+α

 どうも!LSSです!!

 

CSSの背景模様、今回は「分銅繋ぎ」に挑戦してみました。

 

 

分銅繋ぎ

 

 

 

コード

<style>
.fundou{
width:300px;
height:200px;
background:
radial-gradient(farthest-side circle at 100% 100%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px
,radial-gradient(farthest-side circle at 0% 0%,transparent 45%,#000000 45% 50%,transparent 50%) 0px 0px/40px 40px
,radial-gradient(farthest-side circle at 100% 0%,transparent 45%,#000000 45% 50%,transparent 50%) 20px 20px/40px 40px
,radial-gradient(farthest-side circle at 0% 100%,transparent 45%,#000000 45% 50%,transparent 50%) 20px 20px/40px 40px
,#ffffff;
}
</style>
<div class="fundou"> </div>

 

 

コード解説

4つのradial-gradientを重ねる事で実現しています。

それぞれ単体で見ると、

 

 

右下を中心とした円

 

 

左上を中心とした円

 

 

右上を中心とした円、を縦横20pxづつずらしたもの

 

 

左下を中心とした円、を縦横20pxづつずらしたもの

 

…という、縦横40pxの画像を重ね合わせ、縦横繰り返し配置する事で実現しています。

 

なお、分銅繋ぎには「交互に分銅の色が変わる」というものもあるようです…が、そちらは実現しようとすると、かなり難しそう^^;

 

今回、分銅繋ぎに挑戦するきっかけは、

uribou(id:uribouwataru)

収集している着物生地でも、亀甲模様がたくさんあるので、このような模様が作れると嬉しくなりますね。
この他にも青海波や分銅模様など、いろいろなものが作れたらすごいですね。

昨日の記事にいただいたuribou様のコメントからいただきました。

ありがとうございます^^

 

 

余録・千鳥格子に失敗したの巻

 

 

千鳥格子 失敗例コード

<style>
.chidorimiss{
width:300px;
height:200px;
background:
conic-gradient(transparent 0deg 90deg,#000000 90deg 180deg,transparent 180deg 270deg,#ffffff 270deg 360deg) 0px 0px/40px 40px
,repeating-linear-gradient(135deg,#ffffff 0% 25%,#000000 25% 50%) 0px 0px/20px 20px
,#ffffff;
}
</style>
<div class="chidorimiss"> </div>

 

同じく、昨日の記事にいただいたコメントで、

さじ(id:conasaji)

おお、和ですね。畳もいけそうですね。千鳥柄とか?鳥の足跡とか?桜柄とか?ジェネレーターもそろそろできそう(笑)

といただいたのに対し、

LSS(id:little_strange)

さじ様、コメントありがとうございます!
千鳥柄、ググってきました。
で、構造を理解すると同時に実現の方法も思いつきました^^
linear-gradientの上に、格子柄のような4分割conic-gradientを「白・透明・黒・透明」で配置すれば、千鳥柄になりそうです!

という余裕こいた返信をしていましたが、その思いつきを試してみたものが上記失敗例になりますw

 

ちなみに千鳥格子というのは、

ja.wikipedia.org

↑こういう模様なんですが…なにか違いますよね?^^;;;

どこが違うんだろう?とよくよく見ると…
「黒と白の斜めストライプが、段ごとに黒白逆転している!」
んでした。

 

むむむ…??

となると…このストライプ、linear-gradientで描いていますが、linear-gradientは「段違いの交互繰り返し」に融通が利かない、という事に再び頭を悩ませる事に^^;;;

 

さじ様、手ごたえのあるお題をありがとうございます^^

今しばらく考えてみます。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^