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] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …