最近のカード型のデザインには外枠に影(box-shadow)をつけるケースも多くなってきています。
box-shadow: offset-x offset-y blur-radius spread-radius color (inset);
<offset-x><offset-y>: これらは必須の値で、影の位置を指定します。<offset-x> は水平方向のオフセット、<offset-y> は垂直方向のオフセットです。<blur-radius>: 任意の値。影のぼかしの量を指定します。0の場合、鋭い影となります。<spread-radius>: 任意の値。影のサイズを拡大/縮小します。正の値で影を広げ、負の値で影を狭めます。<color>: 任意の値。影の色を指定します。指定しない場合、colorプロパティの値が使用されます。inset: オプションのキーワード。これを使用すると、外向きの影ではなく、内側の影を作成します。影をつけることでモダンなデザインになります。

投稿者

Kの手習い

前職はOA機器の販売営業でしたが、退職して、50代で1からプログラマーを目指します。一般的にこの年齢からは厳しいと言われておりますが、この歳ならではの経験を活かして、頑張ります!

コメントを残す