CSSだけ！画像なし！テキストの色を半分変えるテクニック

こんにちは、クリエイティブフレークです。

この例は、画像を使わないでテキストだけでコーディングしています。

そんなの画像を使えば済む話じゃない？という考えの方もCSSだけで組むとこんなにいいことがあります。



メリット１
全体のファイルサイズが小さくなる

メリット２
テキストなのでSEOとしても効果的

メリット３
文字の変更、フォントサイズ、色の変更が簡単



作り方は簡単。

まずはどうやって表示しているのかという仕組みから説明します。







ベースとなる文字の上に

別の色で半分だけの文字を

かぶせるだけ



次はソースコードです。



HTML

<span class="halfStyle hs-base" data-content="H">H</span>
<span class="halfStyle hs-base" data-content="a">a</span>
<span class="halfStyle hs-base" data-content="l">l</span>
<span class="halfStyle hs-base" data-content="f">f</span>

CSS

.halfStyle .hs-base, {
 position: relative;
 display: inline-block;
 font-size: 80px;
 overflow: hidden;
 white-space: pre;
 color: #3c2210;
}
.halfStyle .hs-base:before {
 display: block;
 z-index: 1;
 position: absolute;
 top: 0;
 width: 50%;
 content: attr(data-content);
 pointer-events: none;
 overflow: hidden;
 color: #63c8df;
}

文字を１文字ずつspanで囲み、１文字に対して色違いで２種類表示させるために attr(data-content) を使います。

あとは見ての通り、親となるpositionをrelative、上から乗せる文字の方をabsoluteとします。

CSSの color の箇所に好きなカラーコードを入れるだけで応用ができます。



たとえば、width: 50%; を、 height: 50%; に書き換えると、上下で色が変わります。



もちろん、日本語だってこの通り！

Written by Creative Flake