[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 }

top of page

©2017 coliss