CSSだけでふきだしを出す

CSS3でふきだし

下記サイトを参考に、上からふわっと表示させる吹き出しを作成。

●参考サイト
http://js.crap.jp/book/chapter2/icon-effect.html

HTML

<div class="container">
  <!-- CSSだけでふき出し -->
  <section class="section-deco">
    <ul><!--
   --><li>
         <a class="icon-a"><span class="span-balloon">ペコッ</span></a>
      </li><!--
   --><li>
         <a class="icon-b"><span class="span-balloon">ポコッ</span></a>
      </li><!--
  --></ul>
  </section>
  <!-- //CSSだけでふき出し -->
</div>

CSS

@charset "UTF-8";


/*====================================
    Reset
====================================*/

*{  margin:0;
    padding:0;
    border:none;
}

/*====================================
    装飾
====================================*/

.container { width: 720px; margin: 40px auto;}

section {
  width: 480px;
  margin: 0 auto;
  background: #fff;
  -webkit-box-shadow: 0px -1px 3px rgba(100, 100, 100, .4);
  box-shadow: 0px 1px 3px rgba(100, 100, 100, .4);
}
p {
  float: left;
  display: block;
  text-align: left;
  font-size: 16px;
  margin: 0 auto;
  color: #838694;
  padding: 20px 20px 10px 30px;
}

/* icon */
ul { padding: 20px 30px 10px;}
ul li {
  display: inline-block;
  width: 30px;
  margin-right: 20px;
}

/* =========================================
  icon
========================================= */

a.icon-a,
a.icon-b {
  display: block;
  width: 26px;
  height: 26px;
  padding: 0 2px;
}
/* 通常のicon画像 */
a.icon-a {
  background: url(デフォルトのimg.png) no-repeat;
}
a.icon-b {
  background: url(デフォルトのimg.png) no-repeat;
}
/* hoverのアニメーション */
a.icon-a:hover,
a.icon-b:hover {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .25s;
  transition: all .25s;
}
/* hoverした時のicon画像 */
a.icon-a:hover {
  background: url(hover時のimg.png) no-repeat;
}
a.icon-b:hover {
  background: url(hover時のimg.png) no-repeat;
}


/* =========================================
  ふきだしの四角ボックスの設定
========================================= */

ul a{
  position: relative;/* aタグを起点に各ふきだしの位置を設定*/
  text-align: center;
}

ul a span{
  position: absolute;
  letter-spacing: .1rem;
  top: -38px;/* 上からふわっとさせる為に */
  left: -25px;
  width: 60px;/*吹き出しの四角の幅*/
  padding: 6px 10px;
  background: #fff;
  /* アニメーション用の設定 */
  transition: .3s;
  opacity: 0;
  /* 装飾 */
  -webkit-box-shadow: 0px 1px 3px rgba(100,100,100, .5);
  -mz-box-shadow: 0px 1px 3px rgba(100,100,100, .5);
  -moz-box-shadow: 0px 1px 3px rgba(100,100,100, .5);
  box-shadow:0px 1px 3px rgba(100,100,100, .5);
  color: #666;
  font-size: 14px;
  line-height: 1;
}


/* =========================================
  吹き出しのやじるしの設定
========================================= */

ul a span:before{
  position: absolute;
  top: 100%;
  left: 30px;/*中央にarrowがきてほしかったので、吹き出しの四角の幅/2 ぶん*/
  height: 0;
  width: 0;
  border: 6px solid transparent;
  border-top: 8px solid rgba(100,100,100, .3);
  content: "";
}
ul a span:after{
  position: absolute;
  top: 100%;
  left: 30px;/*中央にarrowがきてほしかったので、吹き出しの四角の幅/2 ぶん*/
  height: 0;
  width: 0;
  border: 6px solid transparent;
  border-top: 6px solid #fff;
  content: "";
}
ul a:hover span{
  opacity: 1;
  top: -35px;
}