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] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[CSS] リストの最初や最後だけなどに便利な擬似要素

どうも、べ〜やんです。 今回は、リストで最初や最後だけなど任意の箇所だけ違うデザインにしたい時などに便利な擬似クラスを紹介します。 リスト一部だけ リストの最初や最後だけなど任意のリストだけデザインを …