2009年12月10日

背景画像を使わないで角丸吹き出しポップアップ CSS

スポンサード リンク

角丸吹き出し ポップアップ CSSサンプル

吹き出しを ここにマウスを乗せるとCSSだけで吹き出しを
 実現!!
画像は使っていません。
表示します。

  ボックスの四隅を丸くするプロパティにCSS3のborder-radiusがあります。
border-radiusプロパティに対応しているブラウザは
Safari Google Chrome 「-webkit-border-radius
Firefox 「-moz-border-radius」 で独自実装しています。
残念ながら IEはIE8になってもまだ未対応です。
なので当サンプルを「IE」でご覧の方は吹き出しの四隅は四角いままです。

ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

サンプルソース

<html>
<head>
<title>背景画像を使わないで角丸吹き出しポップアップ</title>
<style type="text/css">
<!--
.pop{ /*吹き出しの親要素*/
position: relative;
}

.fukidasipop { /*吹き出し本体*/
        position: absolute;
        top:30px; left:100px;
        display: none; /*何も表示しない*/
        padding: 5px; /*内側の余白*/
        width: 250px; /*ブロックの幅
        font-weight: bold; /*文字の太さ*/
        text-decoration: none; /*文字飾り*/
        color:#cc0033 ; /*文字色*/
        background-color: #f7ffff; /*背景色*/
        border: 2px solid #66a9ff;
        -webkit-border-radius: 10px;/* Safari、Google Chrome */
        -moz-border-radius: 10px;/* Firefox */
        
     }

a:hover .fukidasipop {
        display: block; /*ブロック要素で表示*/
     }

.wing{ /*吹き出しの突起*/
        border-top: 15px solid  transparent;
        border-left: 15px solid #66a9ff;
        width : 0px;
        height : 0px;
        position: absolute;
        left : 10px;
        top: -15px;
  }

.wingin{ /*吹き出しの突起の入れ子部分*/
        border-top: 13px solid  transparent;
        border-left: 13px solid #f7ffff;
        width : 0px;
        height : 0px;
        position: absolute;
        left : -13px;
        top: -11px;
  }
-->
</style>

</head>
<body>
<p class="pop">吹き出しを
<a href="javascript:void(0);">ここにマウスを乗せると
<span class="fukidasipop">CSSだけで吹き出しを<br>実現
<span class="wing">
<span class="wingin"></span></span></span></a>表示します。
</p>
</body>
</html>
  ボックスの配置方法
position: relative; position: absolute; top : *px; left : *px; リンク文字からの吹き出しの表示する位置を設定します。   a:hover (マウスポインタをリンクの上に合わせたとき)を使って
マウスポインタが乗ったら display: block; (表示する)
去ったら display: none ; (何も表示しない)をおこないます。

 前回のCSSで作る吹き出しボックスでは突起部分は上下左右の端にしか
配置できなかったのですが今回は自由な位置に設置することが可能です。
borderプロパティ 説明 プロパティの値
border-top 上のボーダー ボーダーの幅   // border-widthプロパティ
ボーダーの種類 // border-styleプロパティ
ボーダーの色    // border-colorプロパティ

 上記,三つのプロパティの値を順不同で
まとめて指定することができます。
border-top: 15px solid fuchsia; *solid(実線)
border-right 右のボーダー
border-bottom 下のボーダー
border-left 左のボーダー
まずborderプロパティに太い値を設定したボックスをつくります。
borderプロパティ
.smp1{
 border-top: 15px solid fuchsia;
 border-right: 15px solid #66a9ff;
 border-bottom: 15px solid fuchsia;
 border-left: 15px solid #66a9ff;
 width : 220px;
  }

各borderが斜めになって接していることが分かります。
 border-right、border-bottomを削除するか
値を0にします。border-right: 0; border-bottom: 0;

borderプロパティ
.smp2{
 border-top: 15px solid fuchsia;
 border-left: 15px solid #66a9ff;
 width : 220px;
  }
 border-top を透明にします。
borderプロパティ
.smp3{
 border-top: 15px solid transparent;
 border-left: 15px solid #66a9ff;
 width : 220px;
  }

transparent // 透明ですが幅は確保した状態でが描画されます。
 ボックスの幅、高さを '0' にします。これで完成
.smp4{
 border-top: 15px solid transparent;
 border-left: 15px solid #66a9ff;
 width : 0px;
 height: 0px;
  }
 上記の突起の中に入れる突起(色は本体に合わす)を同じ要領で作り
position: absolute;[絶対的配置]
下のようにボーダーがあるように位置合わせをします。

 
これをまた position: absolute;で任意の場所に吹き出し本体と
位置を合わせれば出来上がりです。
 これが吹き出し本体です。
CSSだけで吹き出しを実現!!
画像は使っていません。

吹き出しを ここにマウスを乗せるとCSSだけで吹き出しを
 実現!!
画像は使っていません。
表示します。

 傾斜を自由に変えることができる三角形の取り出し方
borderプロパティ
 下はそのままで,左右を透明に上ボーダーを '0' に
ボックスの幅,高さを '0' にします。

.smp6{
border-top:0;
border-left:15px solid transparent;
border-right:15px solid transparent;
border-bottom: 15px solid fuchsia;
width : 0px;
height: 0px;
}

 上記のプロパティの値を変えることで上,下,左,右向きの
三角形を作ることができます。
 左の傾斜を少し急 にします。border-left の幅の数値を減らします。
.smp7{
border-top:0;
border-left:8px solid transparent;
border-right:15px solid transparent;
border-bottom: 15px solid fuchsia;
width : 0px;
height: 0px;

border-radiusプロパティ
CSSで作る吹き出しボックス サンプル
display プロパティ
JavaScriptとCSSで指定した要素の表示/非表示
スタイルシート CSS
CSSだけでおこなう、画像の入れ替えとポップアップ
画像にマウスを乗せると説明文を表示します。
画像のロールオーバー,マウスが乗ると画像が入れ替わります。
a:hoverを使ってアンカーのスタイルを CSSだけで変更します
スタイルシートだけでポップアップメニュー、補足説明文を表示します。
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 17:30 | 大阪 ☁ | 吹き出し、見出し装飾 | このブログの読者になる | 更新情報をチェックする
×

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