今日は画像の上に文字を載せて文字色を切り替えるレイアウトの組み方を紹介します。
まずはデモをご覧ください。
ブラウザ幅を伸縮すると画像も伸縮しますが、テキストも画像に合わせて色を変えています。
それでは実際のコードを見ていきましょう。
まずHTML
<div class="wrap">
<p class="white-color">
<span class="white-text">
Welcome to Green Forest!!<br>
This is change color test.
</span>
</p>
<div class="img-box"><img src="forest.jpg"></div>
<p class="black-color">
<span class="black-text">
Welcome to Green Forest!!<br>
This is change color test.
</span>
</p>
</div>テキストを2種類作成します。
これをCSSで画像から飛び出した黒文字のテキストと、
画像の上に載っている白文字のテキストで分けていきます。
次にCSS
body{
margin: 0;
}
.wrap{
margin: 0 auto;
max-width: 1000px;
position: relative;
overflow: hidden;
}
.img-box{
margin-left: 20%;
}
.img-box img{
width: 100%;
vertical-align: bottom;
}
.black-color,
.white-color{
margin: 0;
font-weight: bold;
font-size: 2.3em;
position: absolute;
top: 10%;
height: calc(100% - 10%);
overflow: hidden;
}
.white-color{
width: 100%;
margin-left: 20%;
}
.black-color{
width: 20%;
}
.white-color span,
.black-color span{
display: block;
position: absolute;
}
.white-color span{
width: 100%;
color: #fff;
left: -20%;
}
.black-color span{
width: 500%;
}
計算が多いのですが、順に説明していきます。
結論から言いますと、二つのテキストを重ねて画像の境界線を基準として
overflowで表示を分けているだけです。
.wrap{
margin: 0 auto;
max-width: 1000px;
position: relative;
overflow: hidden;
}
.img-box{
margin-left: 20%;
}
.img-box img{
width: 100%;
vertical-align: bottom;
}
.black-color,
.white-color{
margin: 0;
font-weight: bold;
font-size: 2.3em;
position: absolute;
top: 10%;
height: calc(100% - 10%);
overflow: hidden;
}
.white-color{
width: 100%;
margin-left: 20%;
}
.black-color{
width: 20%;
}
まずは親要素のwrapを基準にしてテキスト2種類をabsoluteで画像の上に重ねてあげます。
画像に対してmargin-leftで余白をあけて、黒い文字を表示するスペースを作ってあげます。
画像の上に表示する白い文字も同じ分だけmargin-leftで余白を空けています。
そして黒い文字に関しては、画像と白文字で空けたスペースの部分、つまり、margin-leftの値をwidthにします。
これで画像の上の文字が白、はみ出している文字が黒とわけることができます。
.white-color span,
.black-color span{
display: block;
position: absolute;
}
.white-color span{
width: 100%;
color: #fff;
left: -20%;
}
そして最後に、文字の子要素のspanの設定をしていきましょう。
上述までの説明では、白文字と黒文字が別々の位置にいるので同じ位置に重ねてあげる必要があります。
まず白文字の子要素は幅を100%にして、position:leftを使って親で空けたスペースを引いてあげます。
これで、黒文字の開始位置と同じ位置につくことができます。
親のoverflowをhiddenにすると、子要素のposition:leftで引いた分が非表示になるので、
画像からはみでた文字は表示されなくなります。
.white-color span,
.black-color span{
display: block;
position: absolute;
}
.black-color span{
width: 500%;
}
次に、黒文字の子要素ですが、こちらはwidthを500%にします。
親要素が20%になっているので、子要素を500%してあげると親要素での100%の幅になります。
これで白文字のwidthと同じ幅になります。
こちらの親にもoverflow:hiddenをかけてあげると画像に重なる文字部分は見えなくなります。
まとめ
JavaScriptを使わないでCSSのみで表現できることはたくさんあります。
CSSのみで表現できるとサイトが軽くなり、ユーザーにとっても優しいので是非挑戦してみてください。
