2015/07/15
css
備忘録です。
参考サイト
box-shadow 使う時、影を出す方向を一方向に抑える
box-shadow を使って下方向だけ影を出す指定をしても、左右にもちょっと出てしまいます。
.box-shadow { box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 6px 3px rgba(0,0,0,0.6); }
左右の影を消すために、4番目の指定(広がり値)をぼかしの値と同じだけ負の値で指定(縮小)してあげると消えます。
この時、下方向の影の長さを負の値で指定した分だけ足さないと上と同じ影の長さにはなりません。
.box-under-shadow { box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); -moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.6); }
下の内側に付ける場合
hoverで下線を表示したい場合に使っています。
.box-under-shadow { box-shadow: 0px 9px rgba(0,0,0,0.6) inset; -webkit-box-shadow: 0px 9px rgba(0,0,0,0.6) inset; -moz-box-shadow: 0px 9px rgba(0,0,0,0.6) inset; }
2023/06/30
神社
御朱印
2023/06/15
Mac
Linux
2023/04/16
時宗
御朱印
2023/04/14
臨済宗
御朱印
2023/04/05
寺院
御朱印