[CSS]ふんわりとアニメーションで浮かび上がるツールチップ
Post on:2010年5月19日
sponsors
スクリプトを使用しないで、ツールチップがふんわりとアニメーションで浮かび上がるスタイルシートをAdmix Webから紹介します。
Creating a Bubble Coda Style with CSS3
デモページ
使用しているのはCSS3で、ふんわりと浮かび上がるアニメーションはChrome, Safariで動作可能となっています。
CSSアニメーションに未対応のFirefoxやIEなどのブラウザでは、アニメーション無しでツールチップが表示されます。
HTML
HTMLはリスト要素で実装されています。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="html" cols="60" rows="5"> <ul id="bubblemenu"> <li> Penn Jillett <div> My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them. </div> </li> </ul> </textarea> |
CSS
CSSでは、まずliをインラインにし、カーソルを変更します。
|
1 2 3 4 5 6 7 |
<textarea name="code" class="css" cols="60" rows="5"> #bubblemenu li { display: inline; margin-left: 15px; cursor:pointer; } </textarea> |
次にパネルとして表示されるli内のdiv要素をスタイリングします。ポイントは不可視状態に「visibility:hidden;」と「opacity: 0;」を使用していることです。
そして、角丸やシャドウなども使用され、デザインもクールなものとなっています。アニメーションの設定は0.5sとなっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<textarea name="code" class="css" cols="60" rows="5"> #bubblemenu li > div { width: 150px; min-height: 100px; position: absolute; display: inline; margin-left: -120px; padding: 5px; visibility:hidden; opacity: 0; margin-top: -125px; background: #ffffff; font-size:1em; /* Setting the border-radius property for all Browsers */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari and Chrome */ border-radius: 5px; /* Browsers that Support it like Opera */ /* Setting the box-shadow property for all Browsers */ -moz-box-shadow: 0 0 8px gray; /* Firefox */ -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */ box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */ /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ } </textarea> |
ホバー時のエフェクトには、divのパネルを「visibility:visible;」と「opacity: 1;」で可視化し、30px上部にアニメーションを設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<textarea name="code" class="css" cols="60" rows="5"> #bubblemenu li:hover > div { visibility:visible; opacity: 1; margin-top: -150px; /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ } </textarea> |
sponsors
