どうも!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
の「黄金比」を意識してみました。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^