Posted By

jamesming on 10/10/08

Tagged

Versions (?)

Last Edited at 10/10/08 12:00pm

Statistics

Viewed 459 times

Favorited by 1 user(s)

Related snippets

Speech bubble, rounder corners, no image needed.

/ Published in: JavaScript

Highlighted TextExpand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>Yet another speech bubble in CSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="language" content="de" />
<meta name="description" content="Speech bubble in CSS. Sprechblase in CSS"/>
<meta name="keywords" content="Sprechblase, CSS, speech bubble" />
<meta name="robots" content="index, follow, noarchive" />
<style type="text/css">
html {
	min-width: 460px;
	height:100%;
} 
body {
	background: transparent url(bg.png) top left repeat-x; 
	background-color:#fff;
	color: #000;
	margin: 20px;
	padding: 0;
	text-align: left;
	font-size:100.1%;
	font: 83%/1.4 verdana, arial, helvetica, sans-serif;
}
h1, h2{
	position: relative;
	margin: 0 0 .2em;
	font-size: 20px;
	letter-spacing: 0;
	text-transform: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #000;
}
#main {
	max-width: 800px;
}

.speech_bubble{
	background: transparent;
	margin:10px 0;
}
.speech_bubble_content{
	display:block; 
	background:#fff; 
	border:3px solid #ddd; 
	border-width:0 3px;
}
.speech_bubble p{
	padding:0.5em 0; 
	color:#000;
	margin:0 15px; 
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
	display:block; 
	overflow:hidden; 
	font-size:0;
}
.sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
	height:1px;
}
.sb4, .sb5, .sb6, .sb7{
	background:#fff; 
	border-left:1px solid #ddd; 
	border-right:1px solid #ddd;
}
.sb1 {margin:0 8px; background:#ddd;}
.sb2 {margin:0 6px; background:#ddd;}
.sb3 {margin:0 4px; background:#ddd;}
.sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
.sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
.sb6 {margin:0 2px; background:#fff; border-width:0 3px;} 
.sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;}

.speech_bubble em{
	display:block; 
	width:0; 
	height:0; 
	overflow:hidden; 
	border-top:12px solid #ddd; 
	border-left:12px dotted transparent; 
	border-right:12px dotted transparent; 
	margin-left:50px;
}
.speech_bubble span{
	display:block; 
	width:0; 
	height:0; 
	overflow:hidden; 
	border-top:10px solid #fff; 
	border-left:10px dotted transparent; 
	border-right:10px dotted transparent; 
	margin-left:52px; 
	margin-top:-15px;
}
* html .speech_bubble em {width:24px; height:12px; w\idth:0; hei\ght:0;}
* html .speech_bubble span {width:20px; height:10px; w\idth:0; hei\ght:0;}

</style>
</head>
<body>
<div id="main">
	
	<h1>Yet another speech bubble in CSS</h1><br/>

<div class="speech_bubble">
		<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
		<div class="speech_bubble_content">
			<p>This speach bubble is made with no images: It's 100% pure css! Therefore it works with JavaScript and images switched off.</p>
		</div>
		<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
		<em></em><span></span>
	</div>

<div class="speech_bubble">
		<b class="sb1"></b><b class="sb2"></b><b class="sb3"></b><b class="sb4"></b><b class="sb5"></b><b class="sb6"></b><b class="sb7"></b>
		<div class="speech_bubble_content">
			<p>The css code is an altered version of <a href="http://www.cssplay.co.uk/boxes/chunky.html">Stu Nicholls speech bubbles</a> on CSSplay.</p>

</div>
		<b class="sb7"></b><b class="sb6"></b><b class="sb5"></b><b class="sb4"></b><b class="sb3"></b><b class="sb2"></b><b class="sb1"></b>
		<em></em><span></span>
	</div>
	<h1>Egon</h1>

</div>
</body>
</html>

URL: http://194.95.111.244/~countzero/css/speech_bubble/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.