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

Easy SEO – HTML for Titles, Descriptions & Meta Tags

HTML tags for SEO It is easy to master the simple HTML tags that are used in search engine optimization. Keywords and keyword phrases must occur often and near the beginning of the TITLE tag, the DESCRIPTION and KEYWORDS meta tag. The more frequent the keywords appear and the nearer they appear to the beginning of the tags and pages, the greater the chance of achieving high search engine positioning. The three that are most important for page optimization are: 1. The TITLE tag This is the most important HTML tag on your web page. It should at the very least contain the name of your company unless your company name is really deceptive or general. For instance if you have decided to name your SEO business website Cracking The Code it may be a better idea to put a description rather than your business or a bunch of Da Vinci Code fans and conspiracy theorists could end up on your site. . It is more important than the content and it is more important than the description or keywords meta...
Post a Comment
Read more

How to Use Email Marketing wisely & Stand out from Junk Mail

Follow Follow my blog with Bloglovin Why email marketing Email Marketing is the most cheapest and efficient way to promote products. However, under tons of junk mail, your marketing mail always be neglected and put into the wastebasket. To stand out from the junk mails, follow the suggestions below to increase the power of your email marketing. 1. No “image only” email, use text mail instead First, email with image will put extra loading on the email server, which will make the processing time longer. Second, some email servers will mark those “image only” emails as junk mails or spam mails. This, of course, will lower the chance to deliver the mail to your customer. 2. No attachments Similar to the above case, emails with attachments will put extra loading on the email server. Under the threat of virus, some email servers will filter out the email attachment. The customer may not get what you want to provide. Also, nowadays, most users are very sensitive to those unknown email ...
Post a Comment
Read more