CSSで中抜き文字をずらしてみた

「text-stroke」プロパティで中抜き文字を作り、「text-shadow」で文字をずらしたテンプレートを作りました。

Googleフォント「Anton」で中抜き文字をずらしたテンプレ

要素をずらすデザインは最近、WEBでもよく見かけますよね。

ずらすことでユーザーの視線を引きつけて、簡単におしゃれなデザインに仕上げることができます。

今回はtext-strokeプロパティの設定方法とtext-shadowを使った文字のずらし方について解説します。

text-strokeプロパティとは

text-strokeプロパティを指定するとCSSで簡単に文字を縁取る表現が可能になります。

「text-stroke」を使用する際は、以下のようベンダープレフィックスを付けて指定する必要があります。

-webkit-text-stroke: 1px red;

個別に指定する場合

-webkit-text-stroke-width: 1px;

縁の幅を指定

-webkit-text-stroke-color: red;

縁の色を指定

-webkit-text-fill-color:black;

文字の色を指定。このプロパティを指定しない場合は「color」プロパティの値が適用されます。

text-strokeとtext-shadowで文字をずらす

-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: #ffffff;
text-shadow: 10px 0px #1fa3ef, 25px 0px 5px #222;

-webkit-text-fill-colorにtransparentを指定し、文字を透過させています。幅は5pxにして縁を太めにしました。

透過させた文字に２つのtext-shadowをかけて右方向に青色と黒色の影を表示するようにしています。

全てのHTML・CSSコード

<div class="pic-container pic-background">
    <div class="box">
        <p>CSS3</p>
    </div>
</div>

.pic-container {
    width: 600px;
    height: 338px;
    font-family: anton;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: rgb(255, 255, 255, .3);
}

.box p {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #ffffff;
    text-shadow: 10px 0px #1fa3ef, 25px 0px 5px #222;
    font-size: 120px;
    text-align: center;
    letter-spacing: 1rem;
}

.pic-background{
	background-image: url(data:image/png;base64,i...);
	background-size: cover;
}

背景画像と文字の間に透過させた白背景を挟んで文字の黒い影が映るようにしました。

インパクトのある文字を表現するのに「Anton」は最適ですね。

今回のテンプレートは以下より使用できます。

Googleフォント「Anton」で中抜き文字をずらしたテンプレ