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] CSSでチェックマークを作る方法

どうも、べ〜やんです。 今回はCSSでチェックマークを作る方法を初心者の方用に紹介します。 リストなどのデザインのバリエーションを増やすのに便利です。 チェックマーク リストなどによく使われるチェック …

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

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

[HTML] articleとsectionの使い方

どうも、べ〜やんです。 今回は、HTMLのarticleとsectionの使い方を紹介します。 articleとsection div、article、sectionどれを使っても見た目上は同じ様に表 …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …