advanced code snippet search

We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.

Posted By

jamesming on 10/10/08


Tagged

corners ROUNDED bubble speech


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

n2linux


Speech bubble, rounder corners, no image needed.

Published in: JavaScript 

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

Plain TextExpand 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="de">
  4. <head>
  5. <title>Yet another speech bubble in CSS</title>
  6. <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  7. <meta name="language" content="de" />
  8. <meta name="description" content="Speech bubble in CSS. Sprechblase in CSS"/>
  9. <meta name="keywords" content="Sprechblase, CSS, speech bubble" />
  10. <meta name="robots" content="index, follow, noarchive" />
  11. <style type="text/css">
  12. html {
  13. 	min-width: 460px;
  14. 	height:100%;
  15. } 
  16. body {
  17. 	background: transparent url(bg.png) top left repeat-x; 
  18. 	background-color:#fff;
  19. 	color: #000;
  20. 	margin: 20px;
  21. 	padding: 0;
  22. 	text-align: left;
  23. 	font-size:100.1%;
  24. 	font: 83%/1.4 verdana, arial, helvetica, sans-serif;
  25. }
  26. h1, h2{
  27. 	position: relative;
  28. 	margin: 0 0 .2em;
  29. 	font-size: 20px;
  30. 	letter-spacing: 0;
  31. 	text-transform: none;
  32. 	font-family: Georgia, "Times New Roman", Times, serif;
  33. 	color: #000;
  34. }
  35. #main {
  36. 	max-width: 800px;
  37. }
  38.  
  39. .speech_bubble{
  40. 	background: transparent;
  41. 	margin:10px 0;
  42. }
  43. .speech_bubble_content{
  44. 	display:block; 
  45. 	background:#fff; 
  46. 	border:3px solid #ddd; 
  47. 	border-width:0 3px;
  48. }
  49. .speech_bubble p{
  50. 	padding:0.5em 0; 
  51. 	color:#000;
  52. 	margin:0 15px; 
  53. }
  54. .sb1, .sb2, .sb3, .sb4, .sb5, .sb6, .sb7{
  55. 	display:block; 
  56. 	overflow:hidden; 
  57. 	font-size:0;
  58. }
  59. .sb1, .sb2, .sb3, .sb4, .sb5, .sb6{
  60. 	height:1px;
  61. }
  62. .sb4, .sb5, .sb6, .sb7{
  63. 	background:#fff; 
  64. 	border-left:1px solid #ddd; 
  65. 	border-right:1px solid #ddd;
  66. }
  67. .sb1 {margin:0 8px; background:#ddd;}
  68. .sb2 {margin:0 6px; background:#ddd;}
  69. .sb3 {margin:0 4px; background:#ddd;}
  70. .sb4 {margin:0 3px; background:#fff; border-width:0 5px;}
  71. .sb5 {margin:0 2px; background:#fff; border-width:0 4px;}
  72. .sb6 {margin:0 2px; background:#fff; border-width:0 3px;} 
  73. .sb7 {margin:0 1px; background:#fff; border-width:0 3px; height:2px;} 
  74.  
  75. .speech_bubble em{
  76. 	display:block; 
  77. 	width:0; 
  78. 	height:0; 
  79. 	overflow:hidden; 
  80. 	border-top:12px solid #ddd; 
  81. 	border-left:12px dotted transparent; 
  82. 	border-right:12px dotted transparent; 
  83. 	margin-left:50px;
  84. }
  85. .speech_bubble span{
  86. 	display:block; 
  87. 	width:0; 
  88. 	height:0; 
  89. 	overflow:hidden; 
  90. 	border-top:10px solid #fff; 
  91. 	border-left:10px dotted transparent; 
  92. 	border-right:10px dotted transparent; 
  93. 	margin-left:52px; 
  94. 	margin-top:-15px;
  95. }
  96. * html .speech_bubble em {width:24px; height:12px; w\idth:0; hei\ght:0;}
  97. * html .speech_bubble span {width:20px; height:10px; w\idth:0; hei\ght:0;}
  98.  
  99. </style>
  100. </head>
  101. <body>
  102. <div id="main">
  103.  
  104. 	<h1>Yet another speech bubble in CSS</h1><br/>
  105.  
  106. 	<div class="speech_bubble">
  107. 		<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>
  108. 		<div class="speech_bubble_content">
  109. 			<p>This speach bubble is made with no images: It's 100% pure css! Therefore it works with JavaScript and images switched off.</p>
  110. 		</div>
  111. 		<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>
  112. 		<em></em><span></span>
  113. 	</div>
  114.  
  115. 	<h1>Finn</h1>
  116.  
  117.  
  118. 	<div class="speech_bubble">
  119. 		<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>
  120. 		<div class="speech_bubble_content">
  121. 			<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>
  122.  
  123. 		</div>
  124. 		<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>
  125. 		<em></em><span></span>
  126. 	</div>
  127. 	<h1>Egon</h1>
  128.  
  129. </div>
  130. </body>
  131. </html>

Report this snippet 

You need to login to post a comment.