Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Create CSS3 Speech Bubbles?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 290
    Comment on it

    In this blog, I am explaining how we can create a speech bubble without using any type of image and javascript code. We can simply create a speech bubble with the help of CSS.

    For creating a speech bubble we need a single line HTML code for that here i am using a HTML <p> tag.

    <p class="demo">speech bubble</p>

     

    Now we have to style this outer box with the help of below CSS code:-

    p.demo {
      position: relative;
      width: 200px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      background-color: #fff;
      border: 8px solid grey;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      -webkit-box-shadow: 3px 3px 4px grey
      -moz-box-shadow: 3px 2px 4px grey;
      box-shadow: 3px 3px 4px grey;
    }

    The main CSS property in above CSS code is position:relative it is used for speech bubble pointer.

     

    Now we have to create a pointer for our bubble . We can do this with the help of image but here I am doing it with the help CSS as shown in below code.

    p.demo:before {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      left: 30px;
      top: 100px;
      border: 26px solid;
      border-color: grey transparent transparent grey;
    }

    By using abCSS css code we have created a triangle which will align to the bottom of our speech box.

     

    Now we have to delete some part of it. we will do it with the help of below code.

    p.demo:after {
      content: ' ';
      position: absolute;
      width: 0;
      height: 0;
      left: 38px;
      top: 100px;
      border: 15px solid;
      border-color: #fff transparent transparent #fff;
    }

    Working demo:- https://jsfiddle.net/LfLr5jpL/24/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: