blockquoteでの引用を美しく表示するCSSサンプル
2006年11月27日-
スポンサード リンク
Natalie Downe Blog Archive Inline image quotes
I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images.
blockquoteでの引用を美しく表示するCSS。
次のようなシンプルなblockquoteのHTMLがあったとします。
<blockquote cite="Brian Littrell"><p>Shoot for the moon. Even if you miss, you'll land among the stars.</p></blockquote>
サンプルで示されているCSSを使うことで次のように表示されます。
画像を2枚使っていて、CSSは次のようになっています。
blockquote {
blockquote p {
text-indent: 25px;
background: url(quotes1.png);
background-position: 0 2px;
background-repeat: no-repeat;
}
display: inline;
margin: 0;
padding-right: 24px;
background: url(quotes2.png);
background-position: bottom right;
background-repeat: no-repeat;
}
画像とCSSをちょこっと変更することで、よりオシャレな引用部分を作れるでしょう:-)
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 和柄背景画像フリー素材
- SVGのローディングアイコン「svg-spinners」
- グリッドにおしゃれなエフェクトをつけるサンプル
- 属性に値を設定するだけでパララックスアニメーションさせられる「Scroll Btween」
- スクロールで要素が迫ってくるようなエフェクトを作る「PushIn.js」
- 総数3.2万個のアイコンライブラリまとめサイト「Iconer」
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 過去のエントリ