どうも!LSSです!!
CSSのgradient系の関数をbackgroundプロパティに適用する事で、容易に「綺麗なグラデーション」を描く事ができます。
この場合の「綺麗」は悪く言えば機械的、単純という見方もできます。
backgroundプロパティは
- カンマ区切りで複数の画像を重ねる事ができる
- gradientで使用する色は「不透過度」を設定する事で半透明の色も使用できる
事から、「汚し」となるようなノイズっぽいgradientを重ねる事で、グラデーションを複雑なものに見せる事ができるのでは?と思い、実験的に作ってみました。
汚しグラデーション
バックにあるのはシンプルなグラデーションですが、その上に不規則っぽい形状のconic-gradientを「極薄」に透過した色で重ねています。
コード
<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);
">
「汚し」が入ったようなグラデーションを作ってみました。<br /><br />バックにあるのはシンプルなグラデーションですが、その上に不規則っぽい形状のconic-gradientを「極薄」に透過した色で重ねています。<br /><br /><br />
</div>
コード中、赤太字部分は中に入る文章(<br/>は改行タグ)です。
オレンジ色部分が「汚し」に当たる個所で、ベースとなる「白→水色→灰色」グラデーションは「linear-gradient(to bottom right,white,lightblue,gray);」です。
不透過度
repeating-conic-gradient(from 200deg at 60% 60%,#ffffff20 0deg 59.9deg,#eeee8820 60deg 120deg) 0 0/30px 10px ,
汚しグラデーション中、二か所の「20」部分が、不透過度を指定している箇所です。
00~ffの範囲内の16進数2桁で指定し、これが小さいほど透明になります。(20はかなーり透明に近い状態です。)
参考:【CSS】色指定 様々な方法(色名・RGB・HSLなど)
なるべく不規則っぽい形にするために、conic-gradientを
で生成したものから調整を加えました。
あとがき
どの程度の不透過度にするか、は好みがわかれそうですが、「実験」としてはおおむね思惑通りのものに仕上げる事ができました^^
「グラデーションが綺麗すぎて、面白味・暖かみに欠ける…」という場合には有用な効果かも、と思いますが…どうでしょうね?w
っと、今さらですが、汚しを入れない場合の、同じグラデーションは、
こんな感じです。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^