前の記事 ≪:シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a...
次の記事 ≫:ハイパフォーマンスWebサイト - 本

ナイスな吹き出しパーツを作るCSSと画像セット

2008年04月01日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
woork: Nice comments counter style for your blog post
This post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code.

ナイスな吹き出しパーツを作るCSSと画像セット。
次のような吹き出しパーツをつくるサンプルがダウンロード可能になっています



HTMLは次のように、シンプル

<div class="bubble">
<span class="count">... counter ...</span>
comments
</div>

CSSも以下のような感じ

.bubble{
    background:url(img/bubble.png) left top no-repeat;
    color:#575553;
    float:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9px;
    height:68px;
    margin-right:20px;
    padding-top:7px;
    text-align:center;
    width:70px;
}

.bubble .count{
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:24px;
    color:#CC6600;
}

記事もとのエントリでは、ブログのコメント数を表示していますが、その他の場合にも流用できそうですね。

関連の記事検索:CSS, Web制作, 吹き出し
スポンサード リンク

By.KJ : 2008年04月01日 10:15 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)