こんにちは、今日は前から試してみたかった、cssで文字のカラーを上下、または左右半分個ずつにする方法に挑戦してみたいと思います。

 

まずは、実装したものから、

 

See the Pen テキストのカラーを半分ずつ表示する by sayuri (@giraffeweb) on CodePen.0

 

HTMLはいたって普通。
半分にしたいテキストが入っているdivもしくはpタグにクラスを設定してください。

 

//左右にわかれる場合
<div class="right_left">
  <p>RIGH&TLEFT</p>
</div>


//上下に分かれる場合
<div class="top_down">
  <p>TOP&DOWN</p>
</div>

 

●左右に分かれる場合

テキストが入っているdivもしくは、bodyなどに背景色を設定します。
左右に半分ずつなので、以下のようにcssに指定。

 

.right_left { background: linear-gradient(90deg, #00b7ee 50%, #ffffff 50%); }

 

divまたはbody内のpタグには以下のように指定。
background-clipを使うことで簡単に、よりシンプルに実装できます。

ただ、background-clipは一部ブラウザでは機能しないので注意してください。

 

.right_left p {
  background: linear-gradient(-90deg, #00b7ee 50%, #ffffff 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  white-space: nowrap;
}

 

●上下で分かれる場合

こちらも同じようにテキストが入っているdivもしくは、bodyなどに背景色を設定。
linear-gradientで今度は、上と下にそれぞれの色を設定します。

 

.top_down {
  background: linear-gradient(#f39700 50%, #ffffff 50%);
}

 

左右で分かれるパターンとはbackground: linear-gradient();の記述を少し変更すれば
こちらも簡単に実装できます♪

 

.top_down p {
  position: relative;
  display: inline-block;
  background: linear-gradient(#ffffff 50%, #f39700 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

 

キービジュアルや、注目してほしいコンテンツなどにもしようできそうですよね！

みなさんも試してみてください。

• code,
• css3,
• web