Skip to main content

How to Create Chat Bubbles in CSS

At first, you need to write the appropriate HTML markup. Refer to the examples below:
INPUT HTML <div class="talk-bubble"> <div class="talktext"> <p>CSS Talk Bubble configured by classes. Defaults to square shape, no triangle. Height is auto-adjusting to the height of the text.</p> </div> </div> <div class="talk-bubble tri-right left-top"> <div class="talktext"> <p>This one adds a right triangle on the left, flush at the top by using .tri-right and .left-top to specify the location.</p> </div> </div> <div class="talk-bubble tri-right left-in"> <div class="talktext"> <p>This talk-bubble uses .left-in class to show a triangle on the left slightly indented. Still a blocky square.</p> </div> </div> <div class="talk-bubble tri-right round btm-left"> <div class="talktext"> <p>And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.</p> </div> </div> <div class="talk-bubble tri-right border round btm-left-in"> <div class="talktext"> <p>Now we add a border and it looks like a comic. Uses .border .round and .btm-left-in</p> </div> </div> <div class="talk-bubble tri-right border btm-right-in"> <div class="talktext"> <p>Now flipped the other way and square. Uses .border and .btm-right-in</p> </div> </div> <div class="talk-bubble tri-right btm-right"> <div class="talktext"> <p>Flush to the bottom right. Uses .btm-right only.</p> </div> </div> <div class="talk-bubble tri-right round right-in"> <div class="talktext"> <p>Moving our way back up the right side indented. Uses .round and .right-in</p> </div> </div> <div class="talk-bubble tri-right round border right-top"> <div class="talktext"> <p>And finally on the right flush at the top. Uses .round .border and .right-top</p> </div> </div>
Now, you need to write the CSS script to assign properties. Refer to the examples below: CSS /* General CSS Setup */ body{ background-color: lightblue; font-family: "Ubuntu-Italic", "Lucida Sans", helvetica, sans; } /* container */ .container { padding: 5% 5%; } /* CSS talk bubble */ .talk-bubble { margin: 40px; display: inline-block; position: relative; width: 200px; height: auto; background-color: lightyellow; } .border{ border: 8px solid #666; } .round{ border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; } /* Right triangle placed top left flush. */ .tri-right.border.left-top:before { content: ' '; position: absolute; width: 0; height: 0; left: -40px; right: auto; top: -8px; bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.left-top:after{ content: ' '; position: absolute; width: 0; height: 0; left: -20px; right: auto; top: 0px; bottom: auto; border: 22px solid; border-color: lightyellow transparent transparent transparent; } /* Right triangle, left side slightly down */ .tri-right.border.left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: -40px; right: auto; top: 30px; bottom: auto; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: -20px; right: auto; top: 38px; bottom: auto; border: 12px solid; border-color: lightyellow lightyellow transparent transparent; } /*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left:before { content: ' '; position: absolute; width: 0; height: 0; left: -8px; right: auto; top: auto; bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; } .tri-right.btm-left:after{ content: ' '; position: absolute; width: 0; height: 0; left: 0px; right: auto; top: auto; bottom: -20px; border: 22px solid; border-color: transparent transparent transparent lightyellow; } /*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: 30px; right: auto; top: auto; bottom: -40px; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.btm-left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: 38px; right: auto; top: auto; bottom: -20px; border: 12px solid; border-color: lightyellow transparent transparent lightyellow; } /*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right-in:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: 30px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: 38px; bottom: -20px; border: 12px solid; border-color: lightyellow lightyellow transparent transparent; } /* left: -8px; right: auto; top: auto; bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; left: 0px; right: auto; top: auto; bottom: -20px; border: 22px solid; border-color: transparent transparent transparent lightyellow; /*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -8px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: 0px; bottom: -20px; border: 12px solid; border-color: lightyellow lightyellow transparent transparent; } /* Right triangle, right side slightly down*/ .tri-right.border.right-in:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -40px; top: 30px; bottom: auto; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.right-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -20px; top: 38px; bottom: auto; border: 12px solid; border-color: lightyellow transparent transparent lightyellow; } /* Right triangle placed top right flush. */ .tri-right.border.right-top:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -40px; top: -8px; bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.right-top:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -20px; top: 0px; bottom: auto; border: 20px solid; border-color: lightyellow transparent transparent transparent; } /* talk bubble contents */ .talktext{ padding: 1em; text-align: left; line-height: 1.5em; } .talktext p{ /* remove webkit p margins */ -webkit-margin-before: 0em; -webkit-margin-after: 0em; }
OUTPUT Watch this space after some time. [blockquote align="none" author="devrant.com"]Developers saying programming is pure logic have never done CSS in their life.[/blockquote]

Comments

Post a Comment

Popular posts from this blog

How to Install and Configure Drupal

Drupal is a feature rich Content Management System (CMS) which allows webmasters to run dynamic website without PHP knowledge. Publishers can add website content through admin interface. Thanks many modules it is possible to install a lot of additional features like spell check, displaying banners or AdSense ads, chat, mailing list, e-commerce modules etc. Drupal CMS was written in PHP and can be downloaded free of charge. In this article I will explain how to install this script and describe the configuration basics. Web hosting requirements for Drupal CMS Before you start the installation process, ensure that your web host offers PHP support, cron jobs and MySQL database. Drupal requires PHP version 4.3.3 or higher (Drupal 4.5 and earlier versions will not run on PHP 5), PHP XML extension and MySQL v3.23.17 or higher. If you are not sure which version of PHP and MySQL your web hosting provider currently uses, contact their help desk and ask them first. How to install Drupal CMS
Post a Comment
Read more

Advantages of Using PHP

History of PHP PHP (it originally was abbreviation of for Personal Home Page) was first written by Rasmus Lerdorf . These were Perl scripts to track users of his Web pages. On communication and suggestions from other people he rewrote it as a scripting language and added support for forms. As its popularity grew, a core group of developers created an API for it and turned it into PHP3. Presently we have version 5. (PHP5) and its growth is likely to continue. Advantages of PHP PHP will run on all platforms, including most UNIXs, Windows (95/98/NT/2000) and Macs. As this uses the same code base, all scripts will run identically on all the platforms. PHP is similar to C. So anyone who has experience with a C-style language will easily learnd PHP. In C-style languages we can also include Javascript and Java. In fact, much of PHP’s functionality is provided by wrappers around the underlying system calls (such as fread() and strlen()) so C programmers will immediately feel at home.
Post a Comment
Read more