【CSS3】文字の色を半分だけ変えるテクニック

画像を使用せずに CSS のテクニックだけで文字の色を半分だけ変える方法を紹介します。

言葉での説明が難しいので、まずはサンプルをご覧になっていただいたほうが早いでしょう。

CSS3 Black & White : https://on-ze.com/demo/css3-black-white/

上記のサンプルではレスポンシヴにも対応。
すべてのデバイスで同じように表示させることに成功しています。

HTML の記述

同じテキストを２回記述するのではなく、カスタムデータ属性を追加しただけの非常にシンプルなコードです。

<p data-inverted="Black and White">Black and White</p>

ここではカスタムデータ属性は『data-inverted』と名付けています。

続いてキモとなるスタイルシートの記述です。

p:before {
content:attr(data-inverted);
overflow:hidden;
position:absolute;
left:0;
top:0;
width:50%;
color:#000;
}

HTML側で追加したカスタムデータ属性をCSSのcontent:attr(data-inverted);でコピーして、ベースのテキストとは違う色を指定します。

理屈がわかれば簡単ですが、目からウロコの斬新な発想ですよね。

ちなみに、このスタイルシートの設定でwidth:50%;の箇所をheight:50%;に変えると、文字の左右ではなく、上下で違う色を指定することが可能です。

縦バージョンのデモは以下。

CSS3 Black & White Vertical : https://on-ze.com/demo/css3-black-white-vertical

ぜひお試しください。