タグ

2012年10月5日のブックマーク (1件)

  • CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる

    WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた!</p> クラス指定なので1つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的!(でもない)before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと

    KinjouJ
    KinjouJ 2012/10/05