[CSS] CSSだけでつくる吹き出しデザイン：パート3 ドロップシャドウ付き（可変） CSS Speech Bubble with Drop Shadow : norm

画像を使わずにCSSだけで吹き出しデザインを実装する方法のパート3です。今回はドロップシャドウ付きの吹き出しデザインです。ボックスシャドウは透明部分のボーダーの外側についてしまうので、三角部分の実現にボーダーは使用せず、四角を回転させて実装します。ぼかしをゼロにすることでボーダー1pxの設定も可能。:before擬似要素、:after擬似要素、Box-shadow、Transformを使用しています。以前の記事はこちらから。CSSだけでつくる吹き出しデザイン CSS Speech Bubble。CSSだけでつくる吹き出しデザイン：パート2 ボーダー付き CSS Speech Bubble。

CSSサポート状況

DEMO

下中央（ぼかしなし）

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

上中央（ぼかしなし）

左中央（ぼかしなし）

右中央（ぼかしなし）

水平垂直距離0（ぼかし）

下方向（ぼかしなし）

HTML

  
   吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  
  
   吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  
  
   吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  
  
   吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  
  
   吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  
  
   吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

CSS

/* 共通 */
.bubble {
 display:inline-block;
 position: relative;
 border-radius:5px;
}
.bubble:before {
 position: absolute;
 content: " ";
 height: 20px;
 width: 20px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
.bubble-inner {
 padding:1em;
 background:#fff;
 border-radius:5px;
 /* transform z-index hack */
 transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
}
.shadow, .shadow:before {
 box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
 background:#fff;
}
/* 下中央（ぼかしなし） */
.bubble-bottom:before {
 bottom: -7px;
 left: 50%;
 margin-left: -10px;
}
/* 上中央（ぼかしなし） */
.bubble-top:before {
 top: -7px;
 left: 50%;
 margin-left: -10px;
}
/* 左中央（ぼかしなし） */
.bubble-left:before {
 left: -7px;
 top: 50%;
 margin-top: -10px;
}
/* 右中央（ぼかしなし） */
.bubble-right:before {
 right: -7px;
 top: 50%;
 margin-top: -10px;
}
/* 水平垂直距離0（ぼかし） */
.shadow2, .shadow2:before {
 box-shadow: 0 0 4px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2);
 background:#fff;
}
/* 下方向（ぼかしなし） */
.shadow3 {
 box-shadow: 0 3px #ccc;
 -webkit-box-shadow: 0 3px #ccc;
 background:#fff;
}
.shadow3:before {
 box-shadow: 3px 3px #ccc;
 -webkit-box-shadow: 3px 3px #ccc;
 background:#fff;
}

[CSS] CSSだけでつくる吹き出しデザイン：パート3 ドロップシャドウ付き（可変） CSS Speech Bubble with Drop Shadow