化物語のロゴをCSSのみで表現してみまみた

eyecatch

最近Netflixで化物語見直してるんですけどやっぱすごすぎる。
放送当時はちょうどフォトショ買いたてでロゴを真似してつくって遊んでいました。
で、今ならCSSだけで表現できるのでは、と思ったのでチャレンジしてみまみた。

完成サンプル

※Chrome/FireFox/IE10以降等のモダンブラウザでご確認ください。

化物語のロゴについて

化物語ロゴのフォントは新宋体が使われています。

font-sinsotai

物語シリーズのロゴにはいくつかのパターンがありますが、基本は新宋体に傾斜をつけて、グラデーション光彩です。
webフォントで新宋体を使うこともできますが、今回のサンプルでは明朝体を使用しています。

HTML


<div class="bmg-wrap">
  <span class="kanji">化</span>
  <span class="kana">バ</span>
  <span class="kana">ケ</span>
  <span class="kana">モ</span>
  <span class="kana">ノ</span>
  <span class="kanji">物</span>
  <span class="kana">ガ</span>
  <span class="kana">タ</span>
  <span class="kana">リ</span>
  <span class="kanji">語</span>
</div>

cssのtransformを利用して1文字ずつ変形するので、spanでマークアップします。

CSS

.bmg-wrap span {
    display: inline-block;
    float: left;
    line-height: 80px;
    -webkit-transform: skewY(-20deg) scaleX(0.5);
    -moz-transform: skewY(-20deg) scaleX(0.5);
    -o-transform: skewY(-20deg) scaleX(0.5);
    transform: skewY(-20deg) scaleX(0.5);
    -webkit-text-shadow: 0 0 20px #f00;
    -moz-text-shadow: 0 0 20px #f00;
    -o-text-shadow: 0 0 20px #f00;
    text-shadow: 0 0 20px #f00;
}
.bmg-wrap span.kanji {
    font-size: 80px;
    font-family: '游明朝','YuMincho', 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro', 'MS P明朝',serif;
    letter-spacing: -30px;
    color: #fff;
}
.bmg-wrap span.kana {
    font-family: '游ゴシック','YuGothic', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
    font-size: 24px;
    letter-spacing: -10px;
    color: #ff0;
}
.bmg-wrap:after {
    clear: both;
    display: block;
    content: "";
    height: 0;
}

使用する際は適宜サイズ変更してください。
transformのscaleXを使って文字幅を半分にし、skewYでY軸方向に傾斜をつけています。
文字間はletter-spacingを使って調整しました。

色違い版

text-shadowのカラーを変更すれば別の色でも可能です。

テキストシャドウにグラデーションが可能になればいいのにな!

  • このエントリーをはてなブックマークに追加

この記事の著者

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

WEBデザインギャラリー

アニメ・ゲームのwebサイト集

かっこいいwebサイト集めました

ページ上部へ戻る