●●っぽい表現ができる「CSS3」サンプル集

2013/10/30

こんにちは！ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。

Webフォントの充実、スマートフォンの流行、そしてCSS3の表現力アップにより、画像を使わなくても凝った表現の見出しが作れるようになりました。

どんなデザインがあるのか。海外のサイトを調べるとたくさん出てきますが日本語だとあまりカッコ良く見えなかったりもします。そこで今回は、日本語書体で使えるCSS3のコードサンプル集をまとめて紹介します！

１.高級フレンチのメニューっぽい見出しデザイン

疑似要素を使って見出しの前後にマークを入れています。こちらも画像ではなくフォント・Wingdings 2を使って表現しています。Win,Mac両方にプリインストールされている書体です。格調高い見出しデザインにどうぞ！

HTML

<hr class="horizontal-line">
<p class="horizontal-headline marks">注文の多い料理店</p>

CSS

.horizontal-headline {
        width: 11em;
        color: #6a6958;
        font-size: 30px;
        margin: -1em auto auto;
        text-align: center;
        text-shadow: 1px 1px 1px #f6f5e8;
        background: /* 背景色を指定 */ ;
}
 
.horizontal-line {
        border: 1px solid #aeac93;
        box-shadow: 1px 1px 1px #f6f5e8;
}
 
.horizontal-headline:before,
.horizontal-headline:after {
        position: relative;
        top: -3px;
        color: #7b7a65;
        font-size: 20px;
        font-family: &amp;quot;Wingdings 2&amp;quot;;
}
 
.horizontal-headline:before {
        content: &amp;quot;b&amp;quot;;
        margin-right: 10px;
}
 
.horizontal-headline:after {
        content: &amp;quot;a&amp;quot;;
        margin-left: 10px;
}

リボンっぽい見出しデザイン

リボンを巻き付けたようなデザインです。ブログエントリの見出しなどにどうぞ！

HTML

<p class="ribbon"><span>注文の多い料理店</span></p>

CSS

.ribbon {
    position: relative;
    color: #ffffff ;
    background: #ec524e;
    font-size: 16pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #ccc ;
    border-top:3px solid #ea9878;
}
.ribbon:after, .ribbon:before {
    content: &amp;quot;&amp;quot;;
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #bb2925;
}
.ribbon:after {
    left: 0;
    border-right: 5px solid #bb2925;
}
.ribbon:before {
    right: 0;
    border-left: 5px solid #bb2925;
}

TIPS
カスタマイズ可能なジェネレーターもあります！
http://web-dou.com/tool/css_gen_h.php

映画のタイトルっぽい立体的見出しデザイン

影だけで再現していますが、内側にエンボスのような薄いグレーが入っています。太いウェイトの書体を使うと見栄えが良く、勢いのある内容の場合に使いやすいでしょう。

HTML

<p class="cinema">注文の多い料理店</p>

CSS

.cinema{
        font-size:30px;
        font-family:bold;
        text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
 }

【参考】http://markdotto.com/playground/3d-text/

ネオンきらめく繁華街っぽい見出しデザイン

Photoshopの光彩（外側）のようなデザインです。鮮やかな色を指定すると使い道が限られそうですが、ぼけ足の長いシャドウは実は万能選手。暖い色、冷い色などで使うと季節感も出せますのでキャンペーンなどにどうぞ。

HTML

<p class="neon">注文の多い料理店</p>

CSS

.neon{
        color: #fff;
        font-size:30px;
        font-weight:bold;
        font-family:&amp;quot;sans serif&amp;quot;;
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

ロングシャドウっぽい見出しデザイン

フラットデザインの派生として影をソリッドに伸ばしていくロングシャドウデザインもCSS3だけで表現できてしまいます。

HTML

<p class="longshadow">注文の多い料理店</p>

CSS

.longshadow{
        margin:0;
        padding:10px;
        font-size:30px;
        background: #21e1b4;
        color: white;
        overflow: hidden;
        text-shadow: 0px 0px #18b28e,
                                 1px 1px #18b28e,
                                 2px 2px #18b28e,
                                 3px 3px #18b28e,
                                 4px 4px #18b28e,
                                 5px 5px #18b28e,
                                 6px 6px #18b28e,
                                 7px 7px #18b28e,
                                 8px 8px #18b28e,
                                 9px 9px #18b28e;
                                /* 以降 伸ばしたい影の流さまで足していく */
}

雑誌っぽい本文デザイン（ドロップキャップ）

雑誌などで良く使われる先頭の文字が大きくなるドロップキャップというデザイン。文章の始まりを明示的にすることができます。文字を大きくするだけでなく文字が流し込みになるようにしてあげると見栄えが良いです。背景色や文字色を変更してみても良いですね。

HTML

<p><span class="firstcaps">二</span>人の若い紳士しんしが、すっかりイギリスの兵隊のかたちをして、ぴかぴかする鉄砲てっぽうをかついで、白熊しろくまのような犬を二疋ひきつれて、だいぶ山奥やまおくの、木の葉のかさかさしたとこを、こんなことを云いいながら、あるいておりました。</p>

CSS

.firstcaps{
        display: block;
        float:left;
        padding-right: 10px;
        font-size:40px;
}

インタビューっぽい本文デザイン

こちらも雑誌で良く見るデザインです。インタビューで司会とかト書きを表す??（ダブルダーシ）をWeb用に最適化してみました。インタビューを掲載するときには使ってみると良いのではないでしょうか。段落に応じて書体を変更することがポイントです。

HTML

<hr>
<p class="interview-line">それに、あんまり山が物凄ものすごいので、その白熊のような犬が、二疋いっしょにめまいを起こして、しばらく吠うなって、それから泡あわを吐はいて死んでしまいました。</p>
<p>「じつにぼくは、二千四百円の損害だ」と一人の紳士が、その犬の眼まぶたを、ちょっとかえしてみて言いました。</p>
<p>「ぼくは二千八百円の損害だ。」と、もひとりが、くやしそうに、あたまをまげて言いました。</p>

CSS

.interview-line{
        width:24em;
        height:5em;
        float:right;
        padding-left: 10px;
        font-family:&amp;quot;san serif&amp;quot;;
        font-weight: bold;
        text-align: left;
        margin:-1em auto auto;
        background: #fff;
}


.interview-headline p:nth-child(3){
        margin-top:120px;
}

まとめ

いかがでしたでしょうか？これらのテキストエフェクトが画像無しでできるというのは本当に驚きですよね。

今回挙げたサンプルは、古いブラウザですと表示できませんので導入する機会は限られています。
いまのところ、各種モダンブラウザ（Chrome, Safari, IE10等）とスマートフォンのみの対応になりますので注意が必要です。

色の変更やシャドウの調整を施しカスタマイズして、ぜひ実戦投入してみてください！

著者
イシジマミキ ( ザ・マーズナレッジ )

デザイン業の他、執筆やコワーキングスペース事業も。表現でなく考え方で遊びを持たせるものが作りたい。越冬できるキリギリスを目指して、少し働いて好きに遊べるよう人生実験中。好きな言葉は「人生を棒にふるくらいヒマとゆとりをもって遊ぼう」。制作実績など掲載、おまけでデザインの考え方や制作フローも書いています。
・ブログ　：http://blog.woopsdez.jp
・twitter : @woopsdez
・facebook : http://facebook.com/woopsdez