ゆるっと広告業界

デザイナーのじたばた。

柄ものCSS。

こんばんは、さじです。

 

柄物のパターンって結構使いますよね。

水玉の変形で柄作れるんじゃない?と思った自分。

完全に遊びに走っています。

 

ハート柄。

スイーツフェア

<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: pink; font-size: 40px; font-weight: bold; text-align: center; color: gray; background-image: radial-gradient(circle 20px at 20% 20%,white 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,white 25%,transparent 0%),radial-gradient(circle 20px at 25% 25%,white 25%,transparent 0%),radial-gradient(circle 20px at 35% 25%,white 25%,transparent 0%),radial-gradient(circle 20px at 30% 30%,white 25%,transparent 0%);">スイーツフェア</div>

 

色違いだとまた、違った印象ですね。

いちごスイーツ

<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: #ff2142; font-size: 40px; font-weight: bold; text-align: center; color: white; background-image: radial-gradient(circle 20px at 20% 20%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 25% 25%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 35% 25%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 30% 30%,#ff8295 25%,transparent 0%);">いちごスイーツ</div>

 

位置を変えると動物っぽくなりました。

動物園とか、ペットとか?

どうぶつえん

<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: #c4ff99; font-size: 40px; font-weight: bold; text-align: center; color: #8a6545; background-image: radial-gradient(circle 20px at 20% 20%,yellow 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,yellow 25%,transparent 0%),radial-gradient(circle 40px at 30% 35%,yellow 25%,transparent 0%);">どうぶつえん</div>

 

ねずみの国とか。

ねずみのくに。

<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: #000000; font-size: 40px; font-weight: bold; text-align: center; color: white; background-image: radial-gradient(circle 20px at 20% 20%,red 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,red 25%,transparent 0%),radial-gradient(circle 20px at 30% 35%,red 25%,transparent 0%);">ねずみのくに。</div>

 

自分で作っておいてなんですが

なんかひと昔前の包装紙みたいですね(笑)。

 

さじ

 

7/25追記

iPhone8(自機)の画面幅に合わせてwidthを400px→300pxに変更しました。width:autoで自動幅設定が可能ですがcircleでpx指定を行っているため柄が崩れる可能性が高いです。今後の検討課題です。

 7/25追記(2)

 LSSさん(id:little_strange)が簡単に模様が作れるツールを作ってくださいました!↓↓↓

 

 

7/26追記(解決したら消します)

テスト中です。 

iPhone表示できたコードです。↓%表記しています。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 10px at 50% 26%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 26% 42%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 74% 40%,#ffffffff 50%,transparent 0%),radial-gradient(circle 6px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 36% 70%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 66% 70%,#ffffffff 50%,transparent 0%);"> </div>

 

iPhone表示できなかったコードです。↓px表記しています。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 5px at 25px 13px,#ffffffff 5px,transparent 5px),radial-gradient(circle 5px at 13px 21px,#ffffffff 5px,transparent 5px),radial-gradient(circle 5px at 37px 20px,#ffffffff 5px,transparent 5px),radial-gradient(circle 3px at 25px 25px,#ffffffff 3px,transparent 3px),radial-gradient(circle 5px at 18px 35px,#ffffffff 5px,transparent 5px),radial-gradient(circle 5px at 33px 35px,#ffffffff 5px,transparent 5px);"> </div>

 

 

7/26追記(2)検証中です。

新たなテストです。

#ffffffのあとが50%だとiPhone表示されます。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%);"> </div>

 

#ffffffのあとが100%。↓iPhone表示されず。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%);"> </div>

 

#ffffffのあとが90%。↓iPhone表示されますが丸に黒っぽい線がつきます。

 
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 100%);"> </div>
 

#ffffffのあとが50%だとiPhone表示されます。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%);"> </div>

 

#ffffffのあとが100%。↓iPhone表示されず。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%);"> </div>

 

 

 

7/26追記(3)引き続き検証中です。

#ffffffff 100%,transparent 0% 表示されずです。

 

<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 0%);"> </div>

 

#ffffffff 90%,transparent 0% 表示されます!

 

 <div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 0%);"> </div>

 

#ffffffff 99%,transparent 0% 黒線なし!表示されてます!

そして、意図した大きさになりました!