2009年11月17日

CSSで作る吹き出しボックス,サンプル

スポンサード リンク

CSSで作る吹き出しボックス

吹き出し風のボックスです。
borderプロパティを使います。

容量1GB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。
さくらのレンタルサーバ

サンプルソース

<html>
<head>
<title> CSSで作る吹き出しボックス,サンプル</title>
<style type="text/css">
<!--
.fukidasi {
     padding: 5px; /* 内側の余白 */
     width: 220px; /* ボックスの幅 */
     font-weight: bold; /* 文字の太さ */
     color: white; /* 文字色 */
     background-color: blue; /* 背景色 */
     border-top: white solid 10px; /* 上ボーダー */
     border-left: blue solid 10px; /* 左ボーダー */
  }
-->
</style>
</head>
<body>
<p class="fukidasi">吹き出し風のボックスです。borderプロパティを使います。</p>
</body>
</html>
このサンプルは過日 borderプロパティをいじくっているうちに思いつきました。

borderの全方向で幅を10px 、色はfuchsiaです。
borderプロパティ
吹き出しボックス
つぎにborderの上と下の色を変えてみます。
borderプロパティ
吹き出しボックス
各borderが斜めになって接しています。これを利用して
左上に突起を作ります。

まず右と下のボーダーを '0' にします。
borderプロパティ
吹き出しボックス

これで姿が見えてきました。上ボーダーの色を背景色(この場合はページ)と同じに
左ボーダーの色をボックスの背景色と同じにすればできあがりです。
border-top: white solid 10px; // 上ボーダー  白  実線  太さ
border-left: blue solid 10px; // 左ボーダー  青 実線  太さ
borderプロパティ
吹き出しボックス

a:hoverを使ってアンカーのスタイルを CSSだけで変更します
スタイルシート CSS
リスト要素を使ったナビゲーションメニュー
スタイルシート css を使った横並びリストメニュー
スタイルシートだけでポップアップメニュー、補足説明文を表示します。

posted by javaScript at 16:36 | 大阪 ☔ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

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