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

実装方法については、こちらをご参照ください。 今回は、上記の吹き出しに影をつけてみたいと思います。 最近使えるようになった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:dro

[aoiasaba]

吹き出し

[utoh]

filterのdropShdowはbox-shadowと異なり、表示されているコンテンツに対して影を表示することができ、 いい感じに影をつけてくれます。 webkit-filter:drop-shadow

[yoheiM]

吹き出しに影をつける