いつも読んで頂きありがとうございます。
LSSさんのコードで汚しグラデーション【実験】がありますが面白い組み合わせが出来
るので紹介します。
色を変えるくらいしかないと思ったら
汚しグラデーションはアレンジするとしたら色を変えるくらしかないと思っていたら
LSSさんがコメントでこんなことを言っています。
コメントで汚しにあたる部分の色・模様・透過度でも変わると書いていますが、ここで
「模様？」と思いました。何の模様をどうやって入れる？
背景模様作成ツール
LSSさんのツールでrepeating-conic-gradientによる背景模様作成ツールというのががあ
ります。このツールで模様が繰り返すいろんな種類の背景が作れます。
例えばこんな模様
汚しグラデーションと組み合わせる
背景模様作成ツールで作った模様と汚しグラデーションを組み合わせてみます。
こんな感じになります
組み合わせ方
repeating-conic-gradient背景作成ツールで模様を作成するとCSSコードが自動で生成さ
れます。下のようなコードが生成されます。
<style>
.rpcnc{
height:400px;
background-image:repeating-conic-gradient(from 0deg at 50% 50%,#ffffff 0deg 89.9deg,#000000 90deg 180deg);
background-size:50px 50px;
}
</style>
<div class="rpcnc"></div>
このコードの赤太字のコードを汚しグラデーションの青太字コードと入れ替えます。
<div style="padding: 10px; background: repeating-conic-gradient(from 200deg at 60% 60%,#ffffff20 0deg 59.9deg,#eeee8820 60deg 120deg) 0 0/30px 10px ,linear-gradient(to bottom right,white,lightblue,gray);"></div>
入れ替えたコード
<div style="padding: 10px; background: repeating-conic-gradient(from 0deg at 50% 50%,#ffffff 0deg 89.9deg,#000000 90deg 180deg) 0 0/30px 10px ,linear-gradient(to bottom right,white,lightblue,gray);"></div>
しかし、このままだとこうなります。
そこで赤太字のコードのカラーコードを汚しグラデーションと同じにします。
模様のサイズを同じにするため30px 10pxを50px 50pxにします。
<div style="padding: 10px; background: repeating-conic-gradient(from 0deg at 50% 50%,#ffffff20 0deg 89.9deg,#eeee8820 90deg 180deg) 0 0/50px 50px ,linear-gradient(to bottom right,white,lightblue,gray);"></div>
<div style="padding: 10px; background: repeating-conic-gradient(from 0deg at 50% 50%,#ffffff50 0deg 89.9deg,#eeee8820 90deg 180deg) 0 0/50px 50px ,linear-gradient(to bottom right,white,lightblue,gray);"> </div>
色の設定
今回は汚しグラデーションのカラーコードを使用しましたがrepeating-conic-gradient背
景作成ツールで生成されたコードのカラーコードをそのまま使っても面白いです。その
まま使う場合はコードの後ろに00～99の数字を入れて下さい。LSSさんも記事内で書い
ていますが数字を小さくすると薄くなります。
また、to bottom right,white,lightblue,grayの色を変えるのも良いです。
最後に
ちょっとごちゃごちゃ書いたので分かりずらい部分もありますが、repeating-conic-
gradient背景作成ツールで模様を作って汚しグラデーションと組み合わせることで無限
にデザインが作れます。汚しの色やグラデーションの色を変えたりして遊びながら作る
のも面白いと思います。
のんべえ様、コメントありがとうございます！
汚しにあたる部分の色・模様・透過度でも変わってきそうですね。
その表現を自分が編み出せるかは…謎ですがｗ