[CSS]日本語にもマッチする、見出しの文字をかっこよくするスタイルシートのまとめ

スタイルシートで文字を装飾すると、かっこいいのは英語が多いですが、今回紹介するのは日本語にもなかなかマッチするスタイルを紹介します。

実際のデモでは英語にスタイルが適用されていますが、オンラインで日本語に変更も可能です。

This is a Headline

ブラウザはChrome, SafariのWebkit系でご覧ください。

各スタイルとともに、スタイルシートを紹介します。
とその前に、HTMLはごくシンプルです。

<h1 class="vintage">美しい日本語</h1>

ヴィンテージ風にスタイルします。

.vintage{
  background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
  text-shadow: 5px -5px black, 4px -4px white;
  font-weight: bold;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text }

ストローク状にスタイルします。

.stroke{
  color: transparent;
  -webkit-text-stroke: 1px black;
  letter-spacing: 0.04em;
  background-color: }

プレスしたようにスタイルします。

.press {
  color: transparent;
  background-color : black;
  text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
-webkit-background-clip : text;
}

立体的な3Dにスタイルします。

.threed{
  color: #fafafa;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135 }