ホームページのちょっとした装飾｜吹き出し編

UPDATE：2016.10.6

CATEGORY

こんにちは！
アプリコットデザインの松澤です。

今回はホームページの中にいるアイコンにちょっとした装飾を施したいと思います！

まずはアイコンに登場して頂きます。

じゃーん！
今では知れ渡っているtwitterとfacebookのアイコンです。
今では有名になっているのでいいですが、知らない人から見たら「なにこのアイコン」ってなりますよね！

今回はそんなアイコンに吹き出しを作っちゃいます！

まずは骨組みを作っていきます。

<ul class="snsBtns">

<li><a href="#"><img src="http://apricot-design.com/wp2023/wp-content/uploads/twitter-1.png" alt="twitter" /><span>twitter</span></a></li>

<li><a href="#"><img src="http://apricot-design.com/wp2023/wp-content/uploads/facebook-1.png" alt="facebook" /><span>facebook

</span></a></li>

</ul>

こんな感じでhtmlを書いていきます！

この中のspanで囲んであるところが吹き出しで出てきます！
ちなみに今の状態だとこんな感じで表示されます。

twitter
facebook

文字がそのまま出てしまっていますね(・ω・)

では、ここから一気に装飾していきます！！

ul.snsBtns {

	clear:both;

	padding:5%;

}

ul.snsBtns li {

	float:left;

	margin-right: 15px;

}

ul.snsBtns li a{

	display:block;

	position:relative;

}

ul.snsBtns li a span{

	color: #fff;

    display: block;

    position: absolute;

    opacity: 0;

    width: 80px;

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

    top: -70px;

    left: -27px;

	border-radius: 5px;

    background: #55acee;

    text-align: center;

    transition: .3s;

    pointer-events: none;

    z-index: 10;

}

ul.snsBtns li a:hover span{

  opacity: 1;

  top: -40px;

}

ul.snsBtns li a span:after{

	position: absolute;

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);

    top: 100%;

    left: 35px;

    height: 0;

    width: 0;

    border: 6px solid transparent;

    border-top: 6px solid #55acee;

    content: "";

}

こんな感じでCSS（装飾用のコード）を書いていきます！

すると・・・！

アイコンの吹き出しの完成です！！
マウスをアイコンに当ててみてください！
吹き出しが降って来ます！

ul.snsBtns li a spanのtop、leftの部分の数値を変更すれば下から登場したり左右から登場したりと色々なパターンが作れるのでぜひ使ってみてください！！
こんな感じでホームページのちょっとした部分にも装飾し、閲覧している人にわかりやすくなるような工夫を盛り込むと、ボタンなどのクリックが増えること間違いなしです！