オンマウスでふんわり現れる！CSS3を使った吹き出しサンプル5つ
タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。
別サーバーにサンプルを用意していますのでご覧ください。
Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。
では、一番上のサンプルを解説します。
HTML
まずはHTMLから。
a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。
CSS
続いてCSSです。いつも通りまずは全部載せます。
@font-face {
font-family: 'typicons';
src: url("fonts/typicons.eot");
src: url("fonts/typicons.eot?#iefix") format('embedded-opentype'),
url("fonts/typicons.woff") format('woff'),
url("fonts/typicons.ttf") format('truetype'),
url("fonts/typicons.svg#typicons") format('svg');
font-weight: normal;
font-style: normal;
}
.wrap{
width: 350px;
margin: 0 auto;
padding: 50px 0 100px;
color: #fff;
text-align: center;
}
.wrap li{
list-style: none;
float: left;
margin: 0;
padding: 0 5px;
}
.wrap a{
display: block;
position: relative;
width: 30px;
height: 30px;
padding: 5px;
border-radius: 50%;
background: #3498db;
transition: .3s;
}
.wrap a:hover{
background: #196090;
}
.wrap a:before {
font-family: 'typicons';
font-style: normal;
font-weight: normal;
display: inline-block;
width: 30px;
height: 30px;
padding: 0;
margin: 0;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 1;
}
.home:before { content: '\e081'; }
.twitter:before { content: '\e0e7'; }
.facebook:before { content: '\e0d7'; }
.rss:before { content: '\e0ce'; }
.cog:before { content: '\e04d'; }
.wrap a span{
position: absolute;
opacity: 0;
top: -50px;
left: -20px;
width: 60px;
padding: 10px;
border-radius: 2px;
background: #196090;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
}
.wrap a span:after{
position: absolute;
top: 100%;
left: 34px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: 6px solid #196090;
content: "";
}
.wrap a:hover span{
opacity: 1;
top: -40px;
}
Webフォントの読込み
@font-face {
font-family: 'typicons';
src: url("fonts/typicons.eot");
src: url("fonts/typicons.eot?#iefix") format('embedded-opentype'),
url("fonts/typicons.woff") format('woff'),
url("fonts/typicons.ttf") format('truetype'),
url("fonts/typicons.svg#typicons") format('svg');
font-weight: normal;
font-style: normal;
}
アイコンをWebフォントで表示します。Webフォントについては「IEでもWebフォントが使えることを知ったので勉強してみました｜Webpark」をご参考に。
今回は「Typicons」というサイトのアイコンを使わせていただきました。アイコン形式のWebフォントについては「画像の代わりに使えるアイコンタイプのWebフォントのまとめ｜Webpark」をご参考に。
ul要素
.wrap{
width: 350px;
margin: 0 auto;
padding: 50px 0 100px;
color: #fff;
text-align: center;
}
この辺は数値は横幅が狭くなりすぎなければ自由に変更して大丈夫です。
li要素
.wrap li{
list-style: none;
float: left;
margin: 0;
padding: 0 5px;
}
アイコンを横並びにするための指定です。
アイコンの外枠部分
.wrap a{
display: block;
position: relative;
width: 30px;
height: 30px;
padding: 5px;
border-radius: 50%;
background: #3498db;
transition: .3s;
}
.wrap a:hover{
background: #196090;
}
丸型のWebフォントもありますが、今回はa要素で丸を作って、その上に擬似要素を使ってアイコンを乗せています。このようにすると、丸の色もアイコンの色も自由に指定することができます。
transitionでマウスを乗せたときの変化に動きを付けています。ちょっと前までベンダープレフィックスを付けていましたが、Safari以外のブラウザの最新バージョンではもう必要ないみたいです。
Webフォントでアイコンを表示
.wrap a:before {
font-family: 'typicons';
font-style: normal;
font-weight: normal;
display: inline-block;
width: 30px;
height: 30px;
padding: 0;
margin: 0;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 1;
float: left;
}
.home:before { content: '\e081'; }
.twitter:before { content: '\e0e7'; }
.facebook:before { content: '\e0d7'; }
.rss:before { content: '\e0ce'; }
.cog:before { content: '\e04d'; }
丸の上に乗せるアイコンの設定です。擬似要素で表示します。丸の中心に表示するコツは「CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー｜Webpark」をご参考に。
吹き出しの表示
.wrap a span{
position: absolute;
opacity: 0;
top: -50px;
left: -20px;
width: 60px;
padding: 10px;
border-radius: 2px;
background: #196090;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
}
.wrap a span:after{
position: absolute;
top: 100%;
left: 34px;
height: 0;
width: 0;
border: 6px solid transparent;
border-top: 6px solid #196090;
content: "";
}
.wrap a:hover span{
opacity: 1;
top: -40px;
}
アイコンを基準に絶対値で表示場所を指定します。最初は透明で、マウスを乗せたときに表示されるようにします。
擬似要素を使った吹き出しについては、「CSSの擬似要素を使った見出しデザイン｜Webpark」が参考になりますのでぜひ。
他のサンプル
それでは２～５のサンプルについても解説します。HTMLは一緒で吹き出しを表すspan要素を少し変更するだけです。変更する部分のCSSのみ紹介します。変更や追加している部分は背景色を変えています。
2. 下から現れる1
.wrap a span{
position: absolute;
opacity: 0;
top: -20px;
left: -20px;
width: 60px;
padding: 10px;
border-radius: 2px;
background: #196090;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
}
最初の位置をマウスを乗せたときの位置より下にすると当然下から現れるようになります
3. 下から現れる2
.wrap a span{
position: absolute;
opacity: 0;
top: -20px;
left: -20px;
width: 60px;
padding: 10px;
border-radius: 2px;
background: #196090;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.wrap a:hover span{
opacity: 1;
top: -40px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
回転しながら現れます。transformを使いますが、FirefoxとIE10はベンダープレフィックスなしでも大丈夫で、Chromeはベンダープレフィックスが必要となります。
4. 回転して現れる1
.wrap a span{
position: absolute;
opacity: 0;
top: -20px;
left: -20px;
width: 60px;
padding: 10px;
border-radius: 2px;
background: #196090;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.wrap a:hover span{
opacity: 1;
top: -40px;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
今度は立体的に回してみます。くるくる回って降りてきます。
5. 回転して現れる2
.wrap a span{
position: absolute;
opacity: 0;
top: -20px;
left: -20px;
width: 60px;
padding: 10px;
border-radius: 2px;
background: #196090;
color: #fff;
font-size: 12px;
line-height: 1;
transition: .3s;
-webkit-transform: rotateX(-90deg);
transform: rotateX(90deg);
}
.wrap a:hover span{
opacity: 1;
top: -40px;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
めくれるように回転させます。
さいごに
ということでオンマウスで現れる吹き出しの設置方法を解説しました。
transitionやtransformはブラウザによっては対応していませんが、機能的には問題ありません。ただopacityに対応していないIE8以下だと機能的に問題があります。
相変わらずIEは困らせてくれます。
とはいうものの、最新バージョンのIE10はtransitionやtransformもベンダープレフィックスなしで対応しています。
けど、IEが問題になる原因は、新バージョンへの乗換えが進まないことです。色々理由があると思いますが、私の職場なんかだと予算の関係で古いパソコンを使い続け、セキュリティソフトが入っていて新しいバージョンもインストールできない（IEに限らず何もインストールできない）のでIE8を使い続けています。
文句を言っても仕方ないし、こちらで何とか対応しないといけないわけで、今回のopacityでしたら以下の方法で対応することができます。
opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
下がIE8以下用のコードになります。
個人的にCSSハックは好きではないですが、どうしてもというときは以下のものだけ使うようにしています。
color: red; /* 全てのブラウザ */ color: green¥9; /* IE8 とそれ以下のバージョンに対応 */ *color: yellow; /* IE7 とそれ以下のバージョンに対応 */ _color: orange; /* IE6 に対応 */
せっかくCSS3が普及してもIEのせいでモチベーションが下がります。スマホ用サイトはあまり作ったことないですが、気にせずCSS3を使えるので楽しいだろうなーなんて思ったりします。
最後は愚痴っぽくなりましたがお役に立てればうれしいです。
@webpark2さんのツイート
