[CSS] CSSで背景色と文字色を半々にする方法

投稿日：2019年11月11日

どうも、べ〜やんです。

今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。

おしゃれなデザイン

背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれなデザインになりますね。

さっそく作り方を紹介します。

HTMLのdata属性や、CSSの擬似要素、グラデーションなどを使用します。

今回使用したHTML↓

<p data-split="Text">Text</p>

data-splitで要素のテキストと同じ内容を入れます。

HTMLはこれだけなので、CSSにいきます。

body {
  background: linear-gradient(90deg, #55C501 50%, #F0EFDB 50%);
}

background: linear-gradient(90deg, #55C501 50%, #F0EFDB 50%);で背景色の指定で角度９０度の境目、５０％で#55C501と#F0EFDBにくっきり分けます。

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #55C501;
}

positionとtransformでテキストを中央配置。

colorを背景色を同じ色に。

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

:before擬似要素を指定。

content: attr(data-split);で擬似要素の中身にHTMLで指定したdata-splitを呼び出す。

colorを背景色を同じ色に。

width: 50%;にして文字の色が変わる箇所を指定。

overflow: hidden;ではみ出した部分を隠す指定。

つまり、色違いのテキストが重なっている状態を作り擬似要素の方を半分隠して色の境目を背景色と同じ位置に調整しています。

HTML,CSS全体↓

See the Pen RwwBoMv by beeyan (@orientado) on CodePen.

簡単に変更出来るバリエーションを紹介します。

変更部分↓

p {
  background: linear-gradient(180deg, #55C501 50%, #F0EFDB 50%);
}
p:before {
  height: 50%;
}

要素の境目の角度を180degに変更、擬似要素のwidthをheightに変更。

180degは説明のために残していますが、消してしまってもOKです。→background: linear-gradient(#55C501 50%, #F0EFDB 50%);

See the Pen abbjpza by beeyan (@orientado) on CodePen.

色の指定を変えるだけですね。

See the Pen NWWBdrd by beeyan (@orientado) on CodePen.

今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介しました。

意外と簡単に作れると感じたので使ってみてください。