影付きの吹き出しをスマフォ向けにCSSだけで作る方法
とりあえずサンプル
影付きの吹き出しをCSS3で作ってみた – jsdo.it – share JavaScript, HTML5 and CSS
初めてjsdoit使ってみました。
ちなみにスマフォ向けなので、Webkitで見てあげてください。
他のブラウザだとちょっと綺麗に描画出来なかったので、誰かForkしてください!
きっかけみたいなもの
Facebookで知人が「影付きの吹き出しをって再現難しいよねー」みたいな事を言ってたので、行けるんじゃないかと思って書いて見ました。
ソースの説明
CSS側にかなり詳細を書き込んでいるので、これでだいたいわかるかなーと思います。
CSSソース
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | /* [-- ここの設定はご自由に。見やすくしてるだけです */ body{ padding: 50px; } /* ここの設定はご自由に。見やすくしてるだけです --] */ /* [-- 吹き出しの大枠設定 */ .arrowBx{ position: relative; background-color: #fff; width: 150px; padding: 5px 10px; box-shadow:0 0 5px #000; border: 1px solid #000; border-radius: 5px; } /* 吹き出しの大枠設定 --] */ .arrowBx::before{ /* [-- ブロック要素にしてレイアウト出来るようにするおまじない */ display: block; content: ""; /* ブロック要素にしてレイアウト出来るようにするおまじない --] */ /* [-- borderとwidthで三角形を作る */ border-color: transparent #fff #fff transparent; border-width: 5px; border-style: solid; width: 0; /* borderとwidthで三角形を作る。 --] */ /* [-- transform:rotate;で回転して▼にする */ -webkit-transform:rotate(45deg); /* transform:rotate;で回転して▼にする --] */ /* [-- ▼の位置を下部に表示調整 */ position: absolute; left: 50%; top: 100%; margin: -6px 0 0 -5px; /* ▼の位置を下部に表示調整 --] */ /* [-- ▼を装飾。ボーダー、影をつける */ box-shadow: 1px 1px 0 #000, 2px 2px 5px #000; /* ▼を装飾。ボーダー、影をつける --] */ } .arrowBx::after{ /* [-- ブロック要素にしてレイアウト出来るようにするおまじない */ display: block; content: ""; /* ブロック要素にしてレイアウト出来るようにするおまじない --] */ /* [-- ▼の位置を下部に表示調整 */ position: absolute; left: 50%; bottom: 0; margin: 0 0 0 -10px; /* ▼の位置を下部に表示調整 --] */ /* [-- ■を作って見せたくない影を塗りつぶす */ height: 8px; width: 20px; background-color: #fff; /* ■を作って見せたくない影を塗りつぶす --] */ } /* [-- .arrowBx::afterの塗りつぶしに負けない様に調整 */ .arrowBx > p{ position: relative; z-index: 1; margin: 0; padding: 0; background-color: #fff; } /* .arrowBx::afterの塗りつぶしに負けない様に調整 --] */ |
だいたいやってる事をまとめると以下のような感じ。
- 吹き出し大枠(.arrowBx)を作る。
- ▼をCSS(::before)で描画する
- ▼に影をつける
- ▼のはみ出た影の部分をCSS(::after)で隠す
- P要素がレイヤーの一番上にくるように調整する
と言うような感じでしょうか。
ちなみにHTMLは以下のようなソース。特に変な事はしていないかなと。
HTMLソース
1 2 3 | <div class="arrowBx"> <p>box-shadowをつけた吹き出しのサンプル。box-shadowをつけた吹き出しのサンプル。</p> </div> |
まとめ
ざっくりですがこんな感じで。
Blog書きたかったので猛スピードで色々書いたので変なところあるかもしれませんが、Twitterとかでご意見などくだされば直したりします!