Javascript・画像なしでcssを使った噴出し

CSS, 子ネタ

ちょこっとした小ネタですが…

モダンブラウザの場合の表示

hkds_cap1
CSS3をサポートしているブラウザだと上の様に見えます。

古いブラウザの場合

hkds-ie7_cap1
古いブラウザになればなるほどしょぼい表示になります。
うーん、しょぼいですね。とりあえず詳細は続きに。

ソースについて

css

サンプルはこちら.hkdsWp:hover .hkds{
/*マウスカーソルが重なったら表示*/
visibility:visible;
}
.hkds{
/*通常の状態は非表示*/
visibility:hidden;
/*絶対配置に*/
position:absolute;
/*ネガティブマージンで位置を調整*/
margin:-2.4em 0 0 -2.3em;
/*レイアウト調整*/
padding:0.3em;
line-height:1;
/*ボーダーで影っぽく調整*/
border-style:solid;
border-color:#336;
border-width:1px 2px 2px 1px;
/*色指定*/
background-color:#369;
color:#fff;
/*角丸処理(CSS3)*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
/*ボックスシャドウ処理(CSS3)*/
-moz-box-shadow:2px 2px 7px #666;
-webkit-box-shadow:2px 2px 7px #666;
}
.hkds:after{
/*噴出しの出っ張り部分の表示*/
content:"◆";
/*噴出しの背景色と同色に*/
color:#369;
/*絶対配置で表示*/
position:absolute;
bottom:0;
left:1em;
margin-bottom:-0.5em;
line-height:1;
}

とこんな感じに設定しています。
詳細はコメントアウトに書いてあるのでそちらを参照してください。

HTML

<span class="hkdsWp">
リンク
<span class="hkds">
リンク先の説明だよ!噴出しだよ!!
</span>
</span>

HTMLはこのように入れ子になっています。
親要素(噴出しを出させたいリンクなど)には「.hkdsWp」を、子要素(噴出し部分)には「.hkds」というclassを追加してあげれば表示されます。

ページ内にも一応サンプルを

ここにカーソルを合わせるとリンク先の説明だよ!噴出しだよ!!

と言う感じでした。
またIEで使えない技なので需要はなさそうですね!

1件のコメント »

  1. ただしIE意外に限る kzms2 – html,css,javascript » Javascript・画像なしでcssを使った噴出し http://bit.ly/8uKKR8

    トラックバック by ずま/Zuma — 2009/12/9 水曜日 @ 16:16:00

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。