/ Published in: JavaScript
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!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> <h1>Finn</h1> <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/