Little Strange Software

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

【CSS】conic-gradientでCSSお絵描き

f:id:little_strange:20211113232735p:plain

 

 どうも!LSSです!!

 

conic-gradient を使って絵を描いてみました。

絵のほとんどは「conic-gradient」で完結しますが、最後の仕上げには「linear-gradient」と「radial-gradient」も参加してもらいます^^

 

先に完成したものをお見せすると、こんな感じのものが出来上がりました!

 

今回の記事内容は、この完成絵に至るまでの制作過程です。

 

 

はじめに、天と地があった

 

コード

<style>
#gz{
width:300px;
height:485px;
background-image:conic-gradient(#4444aa 89deg,#558855 90deg 270deg,#4444aa 271deg);
}
</style>
<div id="gz"></div>

 

id="gz" を付けたdiv要素に対して、CSSから色々指定を足していく感じでお絵描きを始めます。

 

idが「gz」なものに対する指定なので、セレクタは「#gz」。
そこに、「width:300px; height:485px;」と大きさを指定しました。

その次の
background-image:conic-gradient(#4444aa 89deg,#558855 90deg 270deg,#4444aa 271deg);
の部分で、conic-gradientによって背景を塗り分けていきます。

#4444aa は こんな色。
#558855 は こんな色。

角度の指定は、真上を0degとして時計回りに角度を取り、一周360deg(=360度)となる単位で指定します。

↑の例だと「89度(ほぼ真右)までは#4444aa、90度~270度までは#558855、271度よりあとはまた#4444aa」という塗り方をしているので、こういう見た目になります。

 

 

そして山が生まれた

 

コード

<style>
#gz1{
width:300px;
height:485px;
background-image:conic-gradient(#4444aa 0deg 60deg,#000000 61deg 89deg,#558855 90deg 270deg,#000000 271deg 280deg,#4444aa 281deg);
}
</style>
<div id="gz1"></div>

 

※idは一つのページに重複して存在できないので、「gz」を「gz1」に改名しています。以下、同様に改名を続けていきます。

 

#4444aaの夜空の部分に割り込む形で、#000000(まっくろ)な山の稜線を描きました。

右側の山が「#000000 61deg 89deg」で、61度から89度までを黒く塗っています。
左側の山は「#000000 271deg 280deg」で、271度から280度までを黒く塗っています。

右が28度分、左が9度分なので、山の稜線のなだらかさに違いが出ていますね。

 

#000000 は こんな色。

 

 

俺の後ろに道はできる

 

コード

<style>
#gz2{
width:300px;
height:485px;
background-image:conic-gradient(#4444aa 0deg 60deg,#000000 61deg 89deg,#558855 90deg 160deg,#aaaa88 161deg 200deg,#558855 201deg 270deg,#000000 271deg 280deg,#4444aa 281deg);
}
</style>
<div id="gz2"></div>

 

今度は、地面の部分に道を描いてみました。

#aaaa88 161deg 200deg

がその部分で、真下である180度を左右約20度づつ開いた感じで、161度~200度としています。

#aaaa88 は こんな色。

 

 

構図を意識してみる

 

コード

<style>
#gz3{
width:300px;
height:485px;
background-image:conic-gradient(at 62% 62%,#4444aa 0deg 60deg,#000000 61deg 89deg,#558855 90deg 160deg,#aaaa88 161deg 200deg,#558855 201deg 270deg,#000000 271deg 280deg,#4444aa 281deg);
}
</style>
<div id="gz3"></div>

 

conic-gradientの中、冒頭部分に、
at 62% 62%
を追加しました。

 

これは、conic-gradientの中心部分の位置を指定するもので、さっきまでの指定しない状態だと「at 50% 50%」という事になります。

at 62% 62%」と指定すると、「div要素の左上の角から見て、右に幅の62%、下に高さの62%の位置」が、conic-gradientの中心となります。

 

ここまで、conic-gradient一本で描きあげました^^

ここから先、linear-gradientやradial-gradientにも登場していただきます。

 

 

東の空しらむ頃

 

コード

<style>
#gz4{
width:300px;
height:485px;
background-image:conic-gradient(at 62% 62%,#4444aa00 0deg 60deg,#000000 61deg 89deg,#558855 90deg 160deg,#aaaa88 161deg 200deg,#558855 201deg 270deg,#000000 271deg 280deg,#4444aa00 281deg),linear-gradient(#4444aa 20%,#ddddff 62%);
}
</style>
<div id="gz4"></div>

 

ここで初めて「グラデーションをグラデーションとして使う」事をしていますw
(conic-gradientの中では色の境目を極小(1deg分)とする事でほぼきっぱり色がわかれていました)

 

まず、夜空の色だった「#4444aa」に「00」を付け足しました。
色コードをこうして8桁で指定した場合、後ろの2文字は「不透過度」となり、「00」だとその前の色が何色であっても完全な透明になります。(「transparent」にしても同じ結果となります)

参考→【CSS】色指定 様々な方法(色名・RGB・HSLなど) - Little Strange Software

 

そうして、空の部分を完全に透明にした上で、conic-gradientの後ろに(←重要)linear-gradientで夜空を描きました。

 

linear-gradient(#4444aa 20%,#ddddff 62%)

角度指定を省略しているので、「上から下に向かうグラデーション」となります。

そして「上から高さの20%の位置までは#4444aaの色、上から62%の位置以降は#ddddffの色」で、20%~62%の間は「#4444aaから#ddddffに徐々に変化するグラデーション」として描かれる事になります。

#ddddff は こんな色。

 

conic-gradient(中略) , linear-gradient(中略) という並びが重要で、background-imageにカンマ区切りで複数の画像を並べた場合、
「先に書いたものが後に書いたものの上に重ねた状態で表示される」
事になります。

今回の例では「背後にlinear-gradientの夜空グラデーションがあり、その上に乗ったconic-gradientの山の稜線の間の透過部分のみ、夜空グラデーションがのぞいている」という結果になるわけです。

 

 

月が綺麗ですね。

 

コード

<style>
#gz5{
width:300px;
height:485px;
background-image:radial-gradient(circle at 85% 15%,#ffffffff 2%,#ffffff00 4%),conic-gradient(at 62% 62%,#4444aa00 0deg 60deg,#000000 61deg 89deg,#558855 90deg 160deg,#aaaa88 161deg 200deg,#558855 201deg 270deg,#000000 271deg 280deg,#4444aa00 281deg),linear-gradient(#4444aa 20%,#ddddff 62%);
}
</style>
<div id="gz5"></div>

 

最後に、夜空に月を浮かべます。

 

radial-gradient(circle at 85% 15%,#ffffffff 2%,#ffffff00 4%)

「白」のカラーコードである「#ffffff」にさらに不透過度「ff」を付けた「完全不透過の白」を2%のサイズで。
そこから「完全透明」である「#ffffff00」を4%のサイズで指定しています。
「中心から2%までは完全な白、2%~4%の間は徐々に透明になっていくグラデーション」で月を描きました。

順番はlinearよりもconicよりも手前に書いたので、もっとも手前に位置して表示される事になります。

 

これにて完成!!です^^

 

 

あとがき

linear-gradient や radial-gradient に比べて知名度が低い(?) conic-gradient ですが、これまでに無い感覚で遊べますね^^

 

こんな絵を描くためのものではないハズですがw

 

conic-gradient の検索結果 - Little Strange Software

 

なお、「300px 485px」とか「62%」といった比率のあたりは、
「Try Kotlin」でフィボナッチ数列を算出してみる(再帰呼び出しをやってみたかっただけ) - Little Strange Software
の「黄金比」を意識してみました。

 

 

 

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

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