Hello All, We are going to start new batch from next week. message/call or mail us for more details.

4 September 2013

Speech Bubble Shapes in CSS

#bubble-1
{
    background:red;
    width:300px;
    height:50px;
    position:relative;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    left:40px;
}
#bubble-1:after
{
    position:absolute;
    content:"";
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-right:40px solid red;
    right:100%;
    top:20px;     
}
 
Speech Bubble Shapes in CSS
#bubble-2
{
    background:red;
    width:300px;
    height:50px;
    position:relative;
    border-radius:10px;
    -moz-boredr-radius:10px;
    -webkit-border-radius:10px;
}
#bubble-2:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:40px solid red;
    left:100%;
    top:20px;
}
 
Speech Bubble Shapes in CSS
#bubble-3
{
    width:300px;
    height:50px;
    background:red;
    position:relative;
    border-radius:10px;
    -moz-boredr-radius:10px;
    -webkit-border-radius:10px;
}
#bubble-3:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid red;
    left:80%;
    top:-20px;
}
 
Speech Bubble Shapes in CSS
#bubble-4
{
    width:300px;
    height:50px;
    background:red;
    position:relative;
    border-radius:10px;
    -moz-boredr-radius:10px;
    -webkit-border-radius:10px;
}
#bubble-4:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:20px solid red;
    right:80%;
    top:50px;
}
 
Speech Bubble Shapes in CSS
#bubble-5
{
    width:300px;
    height:50px;
    background:blue;
    position:relative;
    border-radius:10px;
    -moz-boder-radius:10px;
    -webkit-border-radius:10px;
}
#bubble-5:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-top:20px solid blue;
    border-right:20px solid transparent;
    top:50px;
    right:80%
}
 
Speech Bubble Shapes in CSS
#bubble-6
{
    width:300px;
    height:50px;
    background:blue;
    position:relative;
    border-radius:10px;
    -moz-boder-radius:10px;
    -webkit-border-radius:10px;
}
#bubble-6:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-bottom:20px solid blue;
    border-left:20px solid transparent;
    top:-20px;
    left:80%;
}
 
Speech Bubble Shapes in CSS
#bubble-7
{
    width:300px;
    height:50px;
    background:blue;
    position:relative;
    border-radius:10px;
    -moz-boder-radius:10px;
    -webkit-border-radius:10px;
}
#bubble-7:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-bottom:15px solid blue;
    border-right:40px solid transparent;
    left:100%;
    top:10px;
}
 
Speech Bubble Shapes in CSS
#bubble-8
{
    width:300px;
    height:50px;
    background:blue;
    position:relative;
    border-radius:10px;
    -moz-boder-radius:10px;
    -webkit-border-radius:10px;
    left:60px;
}
#bubble-8:after
{
    content:"";
    position:absolute;
    width:0;
    height:0;
    border-bottom:15px solid blue;
    border-left:40px solid transparent;
    right:100%;
    top:10px;
}
 
Speech Bubble Shapes in CSS
#bubble-9
{
    width:300px;
    height:50px;
    border:5px solid #5a8f00;
    border-radius:10px ;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    position:relative;
}
#bubble-9:before
{
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
    border-style:solid;
    border-color:#5a8f00 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
#bubble-9:after
{
       content:"";
       position:absolute;
       bottom:-13px; /* value = - border-top-width - border-bottom-width */
       left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
       border-width:13px 13px 0;
       border-style:solid;
       border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
 
Speech Bubble Shapes in CSS
#bubble-10
{
     width:300px;
    height:50px;
    border:5px solid #5a8f00;
    border-radius:10px ;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    position:relative;
}
#bubble-10:before
{
    content:"";
    position:absolute;
    top:-20px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
    border-style:solid;
    border-color:#5a8f00 transparent;
    display:block;
    width:0;
}
#bubble-10:after
{
    content:"";
    position:absolute;
    top:-13px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
    border-style:solid;
    border-color:#fff transparent;
    display:block;
    width:0;
}
 
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)