ヘッダー部分を固定し、薄く影を付けるCSS
縦にスクロールしてもヘッダーを固定した場合、「ここはヘッダーだよ」という事がビジュアル的にわかると、ユーザビリティ的に良いですよね。
ヘッダーの背景に薄く色を付けるなどの方法もありますが、今回はヘッダーの下に薄く影を付けて表現したいと思います。
CSSは、ヘッダー部分に下記のbox-shadow部分を付け足すだけ。
1 2 3 4 5 6 7 8 9 10 11 12 |
.site-header{ display: flex; position: fixed; width:100%; height: 60px; left:0; top:0; margin:0; background-color: #FFF; z-index:1001; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); /*これを付け足し*/ } |
完成はこんな感じになります。
若干のシャドウが付いているのが分かるかと思います。
サイトも見やすくなりますので、是非お試しください。
公開日:2019年10月22日
最終更新日:2019年10月22日