2012年07月25日

2012 07.25 Wed


背景画像を使わず、スタイルシートだけで角に丸みのある吹き出しを表示します。
hukidasi_2012-7-25_15-44-58.jpg
コメントボックスっていう名前らしいです。

.chat-bubble {
background-color:#E6D7AD; /*背景色*/
border:2px solid #666666;
margin:10px auto;/*ボックス外の幅*/
padding:10px;/*ボックス内の幅*/
position:relative;
width:420px;
line-height:130%;
border-radius:12px;
}

.chat-bubble-arrow-border {
border-color: transparent #666666 transparent transparent; /*三角向き 下左上右*/
border-style: solid;
border-width: 11px; /*三角の横幅*/
height:0;/*セルの内側を消す*/
width:0;/*セルの内側を消す*/
position:absolute;
bottom:29px;/*上下の位置調整*/
left:-23px;/*左右の位置調整*/
}

.chat-bubble-arrow {
border-color: transparent #FBFBFB transparent transparent;/*三角の向き 下左上右*/
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:30px;/*上下調整*/
left:-20px;/*左右調整*/
}


お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。