【CSS】文字の縁取り。

こないだ作った、スターウォーズのイントロをスタイルシートとJavaScriptで完全再現する iSW というWebアプリ。くわしくは → コチラからどうぞ…なのですが、この『STAR WARS』のタイトルで使われている縁取り付きの文字…STAR WARSのタイトル…これは Webkit 系ブラウザならば、簡単に作ることができます。

スタイルシートはこんな感じ。
.outlined{
  font-size: 200px;
  -webkit-text-stroke-width: 7px;
  -webkit-text-stroke-color: #dbab54;
  -webkit-text-fill-color: #000;
}
  • -webkit-text-stroke-width は縁取りの幅を指定します。
  • -webkit-text-stroke-color は縁取りの色を指定します。
  • -webkit-text-fill-color は内側の色を指定します。
より『STAR WARS』っぽくするならば、
  • フォントをサンセリフ系にする。iPhone や Mac ならば Helvetica がお勧め。
  • 行間を詰める。
  • 文字間を詰める。
  • 上下に潰し気味にする。
と良い感じになります。スタイルシートは、例えばこんな感じになりますか。
.outlined{
  font-size: 200px;

  font-family: 'Helvetica' , sans-serif;
  line-height: 0.75em;
  letter-spacing: -0.1em;
  -webkit-transform-origin: 50% 0;
  -webkit-transform: scaleY( 0.6 );

  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: #dbab54;
  -webkit-text-fill-color: #000;
}
これでスターウォーズのタイトル風の縁取り文字が完成です。

"-webkit" と接頭辞が付いていることからも分かるように、このスタイルは Safari や Chrome などでしか効きません。Firefox などで文字の縁取りを実現したいならば、text-shadow プロパティを使って誤摩化すという手法が一般的。

　参考記事は → css テキストストローク - CSSPRO

などなど。

カテゴリ:

タグ: