こんにちは、yasaiです！
5月も終わりますね。GWとGW明けの業務が目白押しだった5月が終わって、祝日のない6月がやってきますね(泣)
今日はCSSのお話です。「おしゃれシャドーつけてみよう」です。
擬似要素のz-indexでうまいこと表示に失敗した話です。
今回コーディングに当たってこんな感じのデザインいただいたのです。
メインタイトルがサイト幅いっぱいで、そこから2カラムパターンですね。ふむふむ。
それでもってメインタイトルはドロップシャドウがついてて、2カラム部分にかかってるわけですね。スマホのときも同じ感じで。はい、了解です。
んー、このシャドウってタイトル全体より短くてセンターな感じです？あ、はい、了解です。(単純にドロップシャドウじゃないのね、おしゃれしゃどー)
こういうことですねー。
やり方は色々ありそうだけど。今回はメインタイトルの後ろに幅のちょっと短い%の擬似要素を置いてそいつにドロップシャドウしましょう。これでいくことにしました。ざっくりいきます。
おしゃれ影をつけよう！
HTML
|
1 2 3 4 5 6 7 8 |
<div id="wrapper"> <h1 class="title">TITLE</h1> <div class="left-column"> <h2>SUB TITLE</h2> <div class="contents">contents</div> </div> <div class="right-column">SIDE</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.title{ width: 100%; max-width: 960px; padding: 16px 0; margin: 0 auto; text-align: center; line-height: 1; background-color: #fff; <span style="color: #ff6600;">position: relative;</span> } .title:after{ <span style="color: #ff6600;">content: ''; width: 94%; height: 1px; -webkit-box-shadow: 0px 1px 7px #000000; -moz-box-shadow: 0px 1px 7px #000000; box-shadow: 0px 1px 7px #000000; position: absolute; bottom: 0; left: 3%; z-index: -1; border-radius: 2px;</span> } |
こんな感じですかね？影つきました！ちゃんとブラウザ幅に合わせて縮小もできてるし、良かったよかった！
やったことは、TITLEの94％の幅でbox-shadowを設定したafter擬似要素をTITLEの後ろに置いたということですね。影の部分がうまく出るようにbottomで調節して、シャドウの上の部分が出ないように、TITLEに背景色を設定したということです。
と、まぁできたと思って、他のとこのコーディングしてたんですけど･･･
影がコンテンツの下にあるよ!!
ざっと組んで見直して、まぁ気がつくわけですよね。(2カラム部分に背景とかを後からつけたので、発見が遅れた･･･)擬似要素が他のコンテンツの後ろにいますねーこれじゃダメです？だめ？ですよねー修正します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.title{ background-color: #fff; line-height: 1; margin: 0 auto; max-width: 940px; padding: 16px 0; <span style="color: #ff0000;">position: relative;</span> <span style="color: #ff0000;"> z-index: 2;</span> text-align: center; } .title:before { background-color: #fff; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .title:after { border-radius: 2px; bottom: 0; box-shadow: 0 1px 7px #000000; content: ""; height: 1px; left: 3%; position: absolute; width: 94%; z-index: -2; } |
修正したのは親となるTITLEのz-indexを設定したこと。
これでHTML全体のルートに対しての.titleのz軸の位置関係を明示して、それに対する擬似要素の位置関係を設定したということですかね。考えてみたらそりゃそうか、という気もしますね。
z-indexが2でbefore擬似要素が追加になっているのは他の要素との兼ね合いか、after擬似要素を他のコンテンツの上にのせる関係で、after擬似要素がTITLEの上にのってしまったためその上にTITLEと同じ大きさで背景色がTITLEと同じbefore擬似要素を間に差し込んだため。
ここまでくると、もっと簡単な方法があったかな、という気もしますね。何かもっといい方法あるよという方は、コメントお願いします。CSSだけで色々な表現ができるようになって楽しいですね。もっと勉強しなくちゃなと痛感です。
今回参考にさせていただいたサイト様です。ありがとうございました。
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか）
