CSSでかわいい吹き出しを作る
つーことで・・・
吹きだし文字
ソース
<div class="bubble shadow bubble-left"> <div class="bubble-inner">吹きだし文字</div></div> <br /> <style> .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: 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-left:before { left: -7px; top: 50%; margin-top: -10px; } </style>
CSSで「可愛い」吹きだしを作る
縦横可変長で、縁取りと背景色が重要。かわいい吹きだし文字
CSSで「可愛い」吹きだしを作るソース
基本的に背景色直しでしょうのでコメント入れた場所が背景色。ふちの色は、shadowp で指定する。
<div class="bubblep shadowp bubble-leftp"> <div class="bubble-innerp">吹きだし文字</div></div>
<style> .bubblep { display:inline-block; position: relative; border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px; left:30px; } .bubblep:before { position: absolute; content: " "; height: 10px; /* 三角高さ (ひし形)*/ width: 10px; /* 三角幅 (ひし形)*/ transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } .bubble-innerp { padding:1em; background:#fefafb; /* 背景色 */ border-radius:5px; transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); } /* c5d7ed */ .shadowp, .shadowp:before { background:#fefafb; /* 背景色 */ box-shadow:0px 0px 0px 1px rgba(113,135,164,1); /* ふち色 */ -webkit-box-shadow: 0 0 0 1px rgba(113,135,164,0.2); /* ふち色 */ } .bubble-leftp:before { left: -5px; /* ひし形を三角に見せるための位置調整 */ top: 50%; /* 上下位置 */ } </style>
スポンサーリンク