どうも！LSSです！！
なんとなくCSSをいじっていたら、「かなりシンプルな記述で面白い効果」を見つけました！
シンプルなサンプル
box-shadowにinsetをつけて、ぼかしを大きめにとるだけでこんな効果に！
お手軽に やわらかく立体感のあるボックスが作れますね^^
コード
<div style="border-radius: 15px; box-shadow: -4px -4px 15px 0px blue inset; padding: 1em;">中に入れる文章</div>
box-shadowって
↑こんな風に、ボックスに影をつけるものですが、
insetをつけると、このように「ボックスの内側」に影がつく事になります。
コード
<div style="width: 150px; height: 100px; border: 1px solid black; box-shadow: 15px 10px 0px 0px blue;"> </div>
<p> </p>
<p>↑こんな風に、ボックスに影をつけるものですが、</p>
<p> </p>
<div style="width: 150px; height: 100px; border: 1px solid black; box-shadow: 15px 10px 0px 0px blue inset;"> </div>
<p> </p>
<p>insetをつけると、このように「ボックスの内側」に影がつく事になります。</p>
この「内側に影をつける、box-shadow＋inset」は以前から使った事があり、例えばこの記事を囲む枠にも細ーく黒の影ぼかしがついています。
border-radiusとpaddingを使わないとこんな感じ
コード
<div style="box-shadow: -4px -4px 15px 0px blue inset;">中に入れる文章<br /><br /></div>
ちょっと角が不自然な感じなのを、border-radius（角丸）で丸めて、中の文字が詰まった感じになってしまうのを、padding（内側の余白）で改善したのが、
この冒頭のようなカタチになります^^
見出し装飾や、ちょっとしたポイントに良さそうですね
こんな効果を出そうと思ったら、linear-gradient や radial-gradient に頼ってしまって、長いコードになりそうなところでしたが、とてもシンプルな記述で面白い効果が出せるので思わず記事にしましたｗ
（今日、CSSをいじり始めた時には全く違うものを考えていましたがｗｗｗ）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
