CODING

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

投稿日:


どうも、べ〜やんです。

今回は、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%);で背景色の指定で角度90度の境目、50%で#55C501#F0EFDBにくっきり分けます。

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

positiontransformでテキストを中央配置。

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に変更、擬似要素のwidthheightに変更。

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で背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介しました。

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



-CODING
-,

執筆者:


comment

関連記事

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

HTML文法チェックサービスMarkup Validation Service

どうも、べ〜やんです。 今回は、HTMLの文法にミスがないかを自動で判別してくれるサービスMarkup Validation Serviceを紹介します。 HTMLを独学で勉強していて自分の知識がどれ …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …