こんにちは、yasaiです!
5月も終わりますね。GWとGW明けの業務が目白押しだった5月が終わって、祝日のない6月がやってきますね(泣)
今日はCSSのお話です。「おしゃれシャドーつけてみよう」です。
擬似要素のz-indexでうまいこと表示に失敗した話です。
今回コーディングに当たってこんな感じのデザインいただいたのです。
メインタイトルがサイト幅いっぱいで、そこから2カラムパターンですね。ふむふむ。
それでもってメインタイトルはドロップシャドウがついてて、2カラム部分にかかってるわけですね。スマホのときも同じ感じで。はい、了解です。
んー、このシャドウってタイトル全体より短くてセンターな感じです?あ、はい、了解です。(単純にドロップシャドウじゃないのね、おしゃれしゃどー)
こういうことですねー。
やり方は色々ありそうだけど。今回はメインタイトルの後ろに幅のちょっと短い%の擬似要素を置いてそいつにドロップシャドウしましょう。これでいくことにしました。ざっくりいきます。
おしゃれ影をつけよう!
HTML
<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
.title{
width: 100%;
max-width: 960px;
padding: 16px 0;
margin: 0 auto;
text-align: center;
line-height: 1;
background-color: #fff;
position: relative;
}
.title:after{
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;
}
こんな感じですかね?影つきました!ちゃんとブラウザ幅に合わせて縮小もできてるし、良かったよかった!
やったことは、TITLEの94%の幅でbox-shadowを設定したafter擬似要素をTITLEの後ろに置いたということですね。影の部分がうまく出るようにbottomで調節して、シャドウの上の部分が出ないように、TITLEに背景色を設定したということです。
と、まぁできたと思って、他のとこのコーディングしてたんですけど・・・
影がコンテンツの下にあるよ!!
ざっと組んで見直して、まぁ気がつくわけですよね。(2カラム部分に背景とかを後からつけたので、発見が遅れた・・・)擬似要素が他のコンテンツの後ろにいますねーこれじゃダメです?だめ?ですよねー修正します。
CSS
.title{
background-color: #fff;
line-height: 1;
margin: 0 auto;
max-width: 940px;
padding: 16px 0;
position: relative;
z-index: 2;
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とか何とかとか)