HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

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>

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー