【CSS】CSSオンリーでレンガ模様

　どうも！LSSです！！

もうかなり前の記事になりますが、

little-strange.hatenablog.com

「CSSでレンガ模様の繰り返し背景を作る」事に挑戦しようとして、繰り返し無しならできるものの繰り返しを考慮すると…SVGを併用しないとできなかった、という事がありました。

…実はその後もずっと（何か月も？ｗ）考えていたのですが…ふと閃いた事があり、（強引さはありますが）CSSだけで繰り返しレンガ模様を描く事に成功しました！

CSSでレンガ模様

ついに（？）「CSSでレンガ模様」を描く事に成功しました！^^
以前に試みた時には「繰り返しを考慮するとCSSだけでは無理そう…」と、SVGとの合わせ技でやったものでしたが、今回はCSSonly！
…まぁちょっと無理やりに解決しているところもあり、よーく見ると突き抜けてたり窪んでたりはありますが^^;

コード

<style>
.renga{
padding:0.6em;
font:120% bold;
color:white;
background:
radial-gradient(farthest-side circle at 100% 74%,#c7593d 24%,#c7593d00 25%) 0px 0px/44px 44px
,radial-gradient(closest-side circle at 50% 23%,#c7593d 99%,#c7593d00 100%) 0px 0px/44px 44px
,linear-gradient(90deg,#c7593d00 20px,#cccccc 21px 22px) 0px 0px/22px 22px
,linear-gradient(#c7593d 20px,#cccccc 21px 22px) 0px 0px/22px 22px;
}
</style>
<div class="renga">ついに（？）「CSSでレンガ模様」を描く事に成功しました！^^<br />以前に試みた時には「繰り返しを考慮するとCSSだけでは無理そう…」と、SVGとの合わせ技でやったものでしたが、今回はCSSonly！<br />…まぁちょっと無理やりに解決しているところもあり、よーく見ると突き抜けてたり窪んでたりはありますが^^;</div>

コード中、「レンガ模様」のための部分は赤太字部分、青太字部分は「余白・フォントサイズと太さ・文字色」を指定している箇所となります。

強引な解決方法

以下のような方法を取りました。

まず、linear-gradientで、横線の入った背景を作ります。

 

<style>
.r1{
height:100px;
background:
linear-gradient(#c7593d 20px,#cccccc 21px 22px) 0px 0px/22px 22px;
}
</style>
<div class="r1"> </div>

次に、透過色を用いて縦線を重ね、格子模様にします。

 

<style>
.r1{
height:100px;
background:
linear-gradient(90deg,#c7593d00 20px,#cccccc 21px 22px) 0px 0px/22px 22px
,linear-gradient(#c7593d 20px,#cccccc 21px 22px) 0px 0px/22px 22px;
}
</style>
<div class="r1"> </div>

この「格子模様」の縦線を、１マスごとに交互に赤色で塗りつぶせば、レンガ模様になる、という考え方です。

この「塗りつぶす」のに「radial-gradient」を使います。

考え方としては【CSS小ネタ】水玉模様（radial-gradientは複数書けます）の要領で、塗りつぶした箇所が分かりやすいように色を変えると…

 

<style>
.r1{
height:100px;
background:
radial-gradient(farthest-side circle at 100% 74%,#ff0000 24%,#ff000000 25%) 0px 0px/44px 44px
,radial-gradient(closest-side circle at 50% 23%,#ff0000 99%,#ff000000 100%) 0px 0px/44px 44px
,linear-gradient(90deg,#c7593d00 20px,#cccccc 21px 22px) 0px 0px/22px 22px
,linear-gradient(#c7593d 20px,#cccccc 21px 22px) 0px 0px/22px 22px;
}
</style>
<div class="r1"> </div>

こういう塗りつぶし方をしています。

あとは、このわざとらしい色「#ff0000」をレンガに使ったのと同じ「#c7593d」に置き換えると、ながらく解決できずにいた「CSSでレンガ模様」をとうとう実現する事ができました^^

…ただ、この塗りつぶしに使ったradial-gradientのサイズ調整に苦心した結果、「よーく見ると突き抜けてたり窪んでたり」になっちゃってるんですけどね^^;;;;;

あとがき

ところで、今回しれっと「background」という複合プロパティを使用しています。

今まで「background-image」「background-size」「background-position」などを使っていましたが、複合プロパティである「background」ならまとめて書く事ができます。

…実は完全にただの思い込みだったのですが「backgroundでカンマ区切りは使えないのでは？」と誤解していたんですね^^;

やってみると、すんなり出来てしまいました。

と、いう事は昨日の記事「強引にlinear-gradientでラインアートしてみたところ…」も…行数は約1/3で済んだのでは？という事になったりします^^;。…まぁいいかｗ

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

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