[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい!

文字の半分で異なるカラー、ブラックとホワイトにするCSSのテクニックを紹介します。もちろん、他のカラーでも利用でき、レスポンシブにも完全対応しています。

最近増えてきた2分割のレイアウトにも使えますね。

デモのキャプチャ

Vertical split layout text effect


HTML: 目から鱗のアイデア

最初に思いつく方法として、ブラックとホワイトの「a」を2つ用意するがあるかもしれませんが、テキストとして「aa」となるのはいただけません。HTMLは、下記のように実装されています。

「a」だけでなく、テキスト全体を2つ用意し重ねます。これならspanなどの余計なタグも不要です。
全体を重ねるアイデアは、目から鱗ですね!

CSS: レスポンシブ対応

背景のホワイトとブラックで半々にグラデーションで指定されており、レスポンシブにも対応しています。テキストはデータの方はホワイト、data属性は:before疑似要素で配置し、ブラックにします。

デモ

実際のデモは、下記でお楽しみください。
レスポンシブ対応で、カラーの境界やサイズが変更されます。

See the Pen Vertical split layout text effect by Mandy Michael (@mandymichael) on CodePen.

top of page

©2017 coliss