Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】汚しグラデーション【実験】

 どうも!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を

little-strange.hatenablog.com

で生成したものから調整を加えました。

 

 

あとがき

どの程度の不透過度にするか、は好みがわかれそうですが、「実験」としてはおおむね思惑通りのものに仕上げる事ができました^^

「グラデーションが綺麗すぎて、面白味・暖かみに欠ける…」という場合には有用な効果かも、と思いますが…どうでしょうね?w

 

っと、今さらですが、汚しを入れない場合の、同じグラデーションは、







こんな感じです。

 

 

 

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

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