どうも！LSSです！！
ちょっとconic-gradientを使った実験です。
スマホでは分かりにくいかもですが、この記事の画面、右上から光が差し込んでいるような効果を作ってみました。
実用性は…結構邪魔かも？なので、現段階では「実験」扱いです^^;
消す時はここから
↑のボタンを押すと効果が消えます。
コード
まず、光が差し込む方のコード
<style>
#ray{
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
pointer-events: none;
background-image:conic-gradient(at 100% -10%,#ffffff00 195deg,#ffffff90 225deg 235deg,#ffffff00 265deg);}
</style>
<div id="ray"></div>
id="ray" としたdivタグを用意します。
position:fixed で「画面スクロールしても追従」
top:0px; left:0px; width:100%; height:100%; とする事で「画面いっぱいに表示」
これらの指定によって「Webページ全体を常に覆い隠す要素」となります。
pointer-events: none; でその「覆い隠す要素」をクリック不可のものにして、通常の記事内容のクリックの邪魔にならないようにしています。
あとはその要素に、
background-image:conic-gradient(at 100% -10%,#ffffff00 195deg,#ffffff90 225deg 235deg,#ffffff00 265deg);
で半透明の「太陽光線のようなconic-gradient」を描画して完成、です^^
（ちなみに、「#ffffff90 225deg 235deg」の「90」を16進数でより大きい値にすると、光が強くなります。最大「ff」。）
消す方のコード
綺麗、ではありますが、邪魔でもあります^^;
ので、ボタンで消す方法も用意してみました。
<p><input id="raybtn" type="button" value="消灯" /></p>
<p>
<script>
raybtn.addEventListener('click',function(){ray.remove();},false);
</script>
</p>
inputタグでボタンを用意し、script内に「ray.remove();」を実行させるイベントリスナーを付けています。
（id="ray"なdivタグを画面上から追放させる事になります）
あとがき
なんかこういう感じの「陽の光がさしこむ様子」が好きです。
実現できた、のは いいものの、ブログ的には結構邪魔かもですね^^;;;;;
「消灯」ボタンも作ってはみましたが、実用にあたってはもっといい方法を考えたいところ…？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
