どうも!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様のコメントからいただきました。
ありがとうございます^^
余録・千鳥格子に失敗したの巻
千鳥格子 失敗例コード
<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>
同じく、昨日の記事にいただいたコメントで、
おお、和ですね。畳もいけそうですね。千鳥柄とか?鳥の足跡とか?桜柄とか?ジェネレーターもそろそろできそう(笑)
といただいたのに対し、
さじ様、コメントありがとうございます!
千鳥柄、ググってきました。
で、構造を理解すると同時に実現の方法も思いつきました^^
linear-gradientの上に、格子柄のような4分割conic-gradientを「白・透明・黒・透明」で配置すれば、千鳥柄になりそうです!
という余裕こいた返信をしていましたが、その思いつきを試してみたものが上記失敗例になりますw
ちなみに千鳥格子というのは、
↑こういう模様なんですが…なにか違いますよね?^^;;;
どこが違うんだろう?とよくよく見ると…
「黒と白の斜めストライプが、段ごとに黒白逆転している!」
んでした。
むむむ…??
となると…このストライプ、linear-gradientで描いていますが、linear-gradientは「段違いの交互繰り返し」に融通が利かない、という事に再び頭を悩ませる事に^^;;;
さじ様、手ごたえのあるお題をありがとうございます^^
今しばらく考えてみます。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^
収集している着物生地でも、亀甲模様がたくさんあるので、このような模様が作れると嬉しくなりますね。
この他にも青海波や分銅模様など、いろいろなものが作れたらすごいですね。