パーツ番号 02-04-02 ・ CSSのみ

大型引用符装飾

巨大な引用符グラフィックを背景に配した装飾的な引用。コラムやインタビュー記事の名言紹介に向きます。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="d02-04-02-quote">
          <span class="d02-04-02-mark">&ldquo;</span>
          <span class="d02-04-02-text">言葉には、背景を静かに支える大きな引用符が似合う。装飾としての存在感を残しながら本文を読ませます。</span>
        </blockquote>

CSS

.d02-04-02-quote{
          position:relative;
          margin:0;
          padding:10px 12px 0 12px;
          font-size:14px;
          line-height:1.85;
          color:#3a3a3a;
        }
        .d02-04-02-mark{
          position:absolute;
          top:-38px;
          left:-6px;
          font-size:96px;
          font-family:Georgia, serif;
          color:#e3e6f5;
          z-index:0;
          line-height:1;
        }
        .d02-04-02-text{
          position:relative;
          z-index:1;
          display:block;
        }

クラス名 .d02-04-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。