CSS | テキストを上半分、下半分でスライスする方法
CSSでテキストを上半分、下半分で切り分けてスライスする方法を紹介しています。
テキストを上半分、下半分でスライスする
テキストを上半分、下半分でスライスする方法について、疑似要素を使った方法や他の手段を考えていましたが、一周して結局CSSコードの簡潔さから普通にテキストを2つ並べる方法で落ち着きました。
※色を変えるだけでしたらlinear-gradient()で2色グラデーションを作った方が簡単です。
最終的にCSSアニメーションでスゥ～ってスライスしたいですね。
See the Pen CSS | z-index by yochans (@yochans) on CodePen.
HTMLには上半分用と下半分用のテキストを用意、それぞれにテキストの半分以上は非表示にする親要素をdivタグで作成しています。class名は「.slice」。
<div class="slice"><p>TEXT SLICE</p></div>
<div class="slice"><p>TEXT SLICE</p></div>CSSでは親要素のdivには「height: 0.75em」を指定してテキストの丁度半分のサイズに「overflow:hidden」ではみ出る部分を非表示にしています。
0.75emとは：1emは指定されているpxサイズの1文字分、余白込みにすると1.5em、そして中央はその半分。
修正：いまいち納得がいかなかったのでpxで調節する事にしました。
下半分になる2つ目のpタグは「position: absolute」で位置調整が必要ですので、親要素のdiv「.slice」に「position: relative」を指定しています。
下半分になるpタグは下半分が見えるように位置を上に親要素の高さ分(サンプルでは54px)ずらします。
.slice {
position: relative;
height: 54px;
overflow:hidden;
}
.slice p {
margin: 0;
font-size: 80px;
font-weight: bold;
color: #ff6347;
}
/* 下半分のみに適用 */
.slice:nth-child(2) p {
position: absolute;
top: -54px;
left: -10px;
color: #4169e1;
}