CSS でバルーン (吹き出し) を作る

CSS だけで、バルーン (吹き出し) を3パターン作ってみました。

  1. ひらめきのバルーン
  2. 話すときのバルーン
  3. 思い出すときのバブルバルーン

ひらめきのバルーン

CSS だけで、バルーン (吹き出し) を作ってみました。これは、ひらめきのバルーンです。

HTML

<div class="balloon-idea"><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、ひらめきのバルーンです。</p></div>

CSS

balloon-idea {
	position: relative;
	width: 240px;
	margin: 0 auto;
	padding: 40px;
	font-size: 18px;
	background: linear-gradient(#e5f2ff, #b2d9ff);
	background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff);
	background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff));
	border-radius: 210px / 120px;
	-moz-border-radius: 210px / 120px;
	-webkit-border-radius: 210px / 120px;
}
.balloon-idea:after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 145px;
	border-width: 35px 10px 0;
	border-style: solid;
	border-color: #b2d9ff transparent;
	display: block;
}

話すときのバルーン

CSS だけで、バルーン (吹き出し) を作ってみました。これは、話すときのバルーンです。

HTML

<div class="balloon-talk"><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、話すときのバルーンです。</p></div>

CSS

.balloon-talk {
	position: relative;
	width: 240px;
	margin: 0 auto;
	padding: 40px;
	font-size: 18px;
	background: linear-gradient(#e5f2ff, #b2d9ff);
	background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff);
	background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff));
	border-radius: 210px / 120px;
	-moz-border-radius: 210px / 120px;
	-webkit-border-radius: 210px / 120px;
}
.balloon-talk:before {
	content: "";
	position: absolute;
	bottom: -15px;
	right: 220px;
	border-width: 0 0 30px 50px;
	border-style: solid;
	border-color: transparent #b2d9ff;
	display: block;
}
.balloon-talk:after {
	content: "";
	position: absolute;
	bottom: -15px;
	right: 250px;
	border-width: 0 0 30px 20px;
	border-style: solid;
	border-color: transparent white;
	display: block;
}

思い出すときのバブルバルーン

CSS だけで、バルーン (吹き出し) を作ってみました。これは、思い出すときのバブルバルーンです。

HTML

<div class="balloon-bubble"><p>CSS だけで、バルーン (吹き出し) を作ってみました。これは、思い出すときのバブルバルーンです。</p></div>

CSS

.balloon-bubble {
	position: relative;
	width: 240px;
	margin: 0 auto;
	padding: 40px;
	font-size: 18px;
	background: linear-gradient(#e5f2ff, #b2d9ff);
	background: -moz-linear-gradient(center top, #e5f2ff, #b2d9ff);
	background: -webkit-gradient(linear, center top, center bottom, from(#e5f2ff), to(#b2d9ff));
	border-radius: 210px / 120px;
	-moz-border-radius: 210px / 120px;
	-webkit-border-radius: 210px / 120px;
}
.balloon-bubble:before {
	content:"";
	position: absolute;
	z-index: 10;
	bottom: -20px;
	left: 45px;
	width: 30px;
	height: 30px;
	background: #b2d9ff;
	border-radius: 60px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	display: block;
}
.balloon-bubble:after {
	content:"";
	position: absolute;
	z-index: 10;
	bottom: -30px;
	left: 30px;
	width: 15px;
	height: 15px;
	background: #b2d9ff;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	display: block;
}

About this entry

No comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です