CSS でバルーン (吹き出し) を作る
CSS だけで、バルーン (吹き出し) を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;
}
No comments