[CSS] HTMLとCSSだけで作成した吹き出しに影をつける

こんにちは、@yoheiMuneです。
以前に画像を用いずにCSSとHTMLで吹き出しを作成するで作成した吹き出しに、 影をつける実装をブログに書きたいと思います。

吹き出しに影をつける

以前のブログで、以下のような吹き出しをHTMLとCSSのみで作成しました。


実装方法については、こちらをご参照ください。


今回は、上記の吹き出しに影をつけてみたいと思います。

最近使えるようになったfilterを使って影をつける

ChromeやiOS6などで使えるようになったCSS Filter（詳しくは、こちら）。 Filter機能のうち、shadowを使うことで簡単に影をつけることができます。


（ソースコード）

.baloon2 {
	width: 200px;
	height: 100px;
	background-color: #fffaee;
	border: 2px solid #66ff66;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	margin: 20px auto;
	position: relative;
	/* 以下の１行でドロップシャドウが適用される */
	-webkit-filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
}
.baloon2:before, .baloon2:after {
	width: 0;
	height: 0;
	content: "";	
	position: absolute;
	right: 0px;
}
.baloon2:before {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #66ff66;
	border-right: 0px solid transparent;
	margin-right: -20px;
	top: 50%;
	margin-top: -20px;
}
.baloon2:after {
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	border-left: 18px solid #fffaee;
	border-right: 0px solid transparent;
	margin-right: -18px;
	top: 50%;
	margin-top: -18px;
}

filterのdropShdowはbox-shadowと異なり、表示されているコンテンツに対して影を表示することができ、 いい感じに影をつけてくれます。上記例では:before要素、:after要素には影の設定をしなくても影が付く点はいい感じです。

本実装では、Androidブラウザーとかでは影が表示されません。
「まぁ影は無いならないで良いんじゃない？」というレベルの重要度なら、上記実装もありかと思います。

:before要素ではみ出す部分を:after要素で隠しながら影を作成する

続いて、:before要素と:after要素を巧みに使いながら、いい感じに影を表現する方法です。
本実装は、ページ上部で紹介した吹き出しの実装とは少し異なります。


（ソースコード）

<style type="text/css">
.baloon3 {
  position: relative;
  background-color: #fffaee;
  width: 200px;
  padding: 5px 10px;
  margin: 20px auto;
  -webkit-box-shadow:0 0 5px #000;
  border: 1px solid #66ff66;
  -webkit-border-radius: 10px;
}
.baloon3:before {
  display: block;
  content: "";
 
  /* borderとwidthで三角形を作る */
  border-color: transparent #fffaee #fffaee transparent;
  border-width: 5px;
  border-style: solid;
  width: 0;
 
  /* 回転して▼にする */
  -webkit-transform:rotate(-45deg);
 
  /* ▼の位置を右部に表示調整 */
  position: absolute;
  left: 100%;
  top: 50%;
  margin: -6px 0 0 -5px;
 
  /* ▼に影をつける */
  -webkit-box-shadow: 1px 1px 0 #66ff66, 2px 2px 5px #000;
}

.baloon3:after {
  display: block;
  content: "";
  
  /* ▼を右側に */
  position: absolute;
  top: 50%;
  right: 0%;
  bottom: 0;
  margin: -9px 0px 0 -20px;
  
  /* ■を作って見せたくない影を塗りつぶす */
  height: 16px;
  width: 20px;
  background-color: #fffaee;
}
.baloon3 > p {
  /* :after疑似要素より上に描画されるように指定する */
  position: relative;
  z-index: 1;
  background-color: #fffaee;
  color: #333;
}
</style>
<div class="baloon3">
  <p>吹き出しに表示する文言</p>
</div>

実装のポイントとしては、:before疑似要素で吹き出しの部分を作成して、 :after疑似要素で:before疑似要素のはみ出た部分を塗りつぶす感じで実装されています。
（ちょっと無理矢理な感じなので、あまり好きな実装ではないです。）

最後に

Web上で吹き出しを作るだけなら可能ですが、吹き出しに影をつけようとすると大変です（上記よりももっといい方法があると思いますが、自分が無知でわかりません）。
吹き出し＋影をデザインで要求されたら、いまのところは画像で対応するのが良さそうです。
Lineアプリみたいに、縦横可変の吹き出しがいいなんていわれるとまた大変ですが、ここはがんばるしかなーい。

最後までご覧頂きましてありがとうございました。