「text-stroke」プロパティで中抜き文字を作り、「text-shadow」で文字をずらしたテンプレートを作りました。
Googleフォント「Anton」で中抜き文字をずらしたテンプレ
要素をずらすデザインは最近、WEBでもよく見かけますよね。
ずらすことでユーザーの視線を引きつけて、簡単におしゃれなデザインに仕上げることができます。
今回はtext-strokeプロパティの設定方法とtext-shadowを使った文字のずらし方について解説します。
text-strokeプロパティとは
text-strokeプロパティを指定するとCSSで簡単に文字を縁取る表現が可能になります。

「text-stroke」を使用する際は、以下のようベンダープレフィックスを付けて指定する必要があります。
個別に指定する場合
縁の幅を指定
縁の色を指定
文字の色を指定。このプロパティを指定しない場合は「color」プロパティの値が適用されます。
text-strokeとtext-shadowで文字をずらす

-webkit-text-fill-colorにtransparentを指定し、文字を透過させています。幅は5pxにして縁を太めにしました。
透過させた文字に2つのtext-shadowをかけて右方向に青色と黒色の影を表示するようにしています。
全てのHTML・CSSコード
背景画像と文字の間に透過させた白背景を挟んで文字の黒い影が映るようにしました。
インパクトのある文字を表現するのに「Anton」は最適ですね。
今回のテンプレートは以下より使用できます。
Googleフォント「Anton」で中抜き文字をずらしたテンプレ