どうも！LSSです！！
今回は、円形グラデーションと、CSSの色指定を組み合わせた小ネタです。
サンプルとコード
サンプル
いいいいい
コード
<div style="background-color: red; background-image: radial-gradient(circle at 70% 30%,#ffffffd0,transparent); width: 200px; height: 150px; text-align: center;">ああああ<br />いいいいい</div>
赤文字部分のコード、
background-image: radial-gradient(circle at 70% 30%,#ffffffd0,transparent);
をCSSに含む事によって、サンプルのように「軽く光を当てた感じ」が出せます^^
今回のネタの趣旨
もし、円形グラデーションを
background-image: radial-gradient(circle at 70% 30%,white,transparent);
と指定した場合、
いいいいい
↑こんな感じになります。
赤い背景色の方は別途、「background-color: red;」の方で指定しているので、このbackground-colorが何色であっても、光が当たったような演出をかける事ができます。
が、「これでは光が強すぎる！」と思った場合。
「光を弱めるため」に、光の中心色であるwhiteを「半透明の白」にしてやると、光が弱まった感じの演出に調節する事ができます。
RGBでの色指定を半透明にする方法
完全な白「white」は、RGB形式で書くと、
#ffffff
で指定する事ができます。
これは「16進数6桁」で「赤・緑・青」の強さを2桁づつ、くっつけて指定している事になりますが、さらにもう2桁くっつけて、
#ffffffd0
のように書くと、最後の２桁は「透明度の強さ」を意味するようになります。
（00が完全透明、ffで透過ナシと同じになります。）
#ffffffd0としておくと、「ちょっと後ろが透けて見える白」という事になりますね^^
円形グラデーションに話を戻すと
radial-gradient(circle at 70% 30%,#ffffffd0,transparent);
という指定で、
- 円形（circle）で円の中心は「左から幅の70%・上から高さの30%」に当たる位置
- 「ちょっと後ろが透けて見える白」から「完全透明」に変化するグラデーション
を指定した事になります。
これが、background-colorで指定した背景色の上に重ねられ、
「光を当てたような演出」ができるんですね。
そんな効果を、落ち物パズルの背景とコマにかけてみると
↑こんな感じになります^^
…実はパズルの方のCSSをいじるところから、「whiteだと強すぎるな…」というところから、今回のネタに至りましたｗ
円形グラデーションについては、
にも書いていますので、あわせて読んでいただけると嬉しいです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
