地味にめんどくさいよっていう理由と作り方と妥協。
基礎
頑張って説明しなくても、賢いところを見ればどういうものかが分かる。
box-shadow - CSS: カスケーディングスタイルシート | MDN
box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、...
developer.mozilla.org
影のサイズを決めて、位置を決めて、色と透明度を決める。
半透明のものを重ねてるだけなので、グレーっぽい影にしたいってときは灰色を重ねるよりは黒を薄くして重ねた方が自然。
一方向だけに影をつけるって話
これも他所の記事を見たら解決する。
box-shadowを一方向のみに出す
box-shadowを一方向のみに出したいことがよくあるので、指定方法をメモしておきます。 サンプルコード 各方向に出すパターンを作って試してみます
cly7796.net
下にだけ出したい場合、影のサイズを本体以内に収めて真っ直ぐずらす。そんな感じでやれば、上下左右一方向だけに影が出せる。これでいいならこれでいい。
問題というかケチをつけるというか
仕様だから当然だけど、四辺、四角をぼかしてる訳だから両端が薄くなる。
均一に影を落としたい場合は都合が悪い。
均一なドロップシャドウ
領域をぶち抜くサイズの要素に影を付けて、overflowではみ出た部分を切り取る。対象がブラウザ幅サイズならちょっと手を入れたら作れるのでそこまでの手間じゃない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header{
width: calc(100% + 20px);
height: 100px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: -10px;
}
</style>
</head>
<body>
<header></header>
<main style="height: 3000px;"></main>
</body>
</html>はみ出た部分はpaddingとかで埋める。
親要素をぶち抜く前提なので、ブラウザ幅だと楽。親要素内に収まるサイズで一方向となると、影用のラッピングが必要になるのでめんどくさい。
内側（inset）の一方向への影
外側の一方向は拘らなければ要素単体でなんとかなるんだけど、内側にって条件だとクオリティ以前のところで無理な話。
実現するには影用の要素を作ってはめ込まなきゃいけない。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 100px;
}
.inset{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
background: #eee;
}
.inset::before{
content: "";
width: calc(100% + 20px);
height: 10px;
display: block;
position: absolute;
left: -10px;
top: -10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="inset"></div>
</body>
</html>疑似要素でもできる。
コメント