文字の半分で違う色を指定するCSSテクニック

文字の半分で違う色を指定するCSSテクニック

文字の半分で違う色を指定するCSSテクニック
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 月額2980円で顧問を雇いませんか?
  • このエントリーをはてなブックマークに追加

文字の半分から左と右で、違う色を指定するCSSテクニックについてご紹介いたします。

スポンサードリンク

文字の半分で違う色を指定するCSSテクニック

HTMLはシンプルに以下のようにします。

<h1 contenteditable data-heading="Half colors">Half colors</h1>

data-headingにh1要素と同じ内容の文字を入れます。

CSSは以下のように指定します。

h1 {
font-size: 10vw;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
position: absolute;
color: #000;
white-space: nowrap;
}
h1:before {
content: attr(data-heading);
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 50%;
color: #ff0000;
}

上記を指定することで、左半分は赤色、右半分は黒色になります。

左半分は赤色、右半分は黒色

あとがき

要素の文字とdata-headingの文字を重ねて、data-headingを半分だけ表示することで、色が変わったように見えています。意外と使いどころもあるのではないでしょうか。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。