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

Post on:2017年3月27日

HTML: 目から鱗のアイデア

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

<h1 contenteditable data-heading="Pick a Side">Pick a Side</h1>

1	<h1 contenteditable data-heading="Pick a Side">Pick a Side</h1>

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

CSS: レスポンシブ対応

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

html, body {
  background: -webkit-linear-gradient(left, #f9f9f9 0%, white 50%, black 50%, black 100%);
  background: linear-gradient(to right, #f9f9f9 0%, white 50%, black 50%, black 100%);
  height: 100%;
}

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