How to Draw Speech Bubble and Shapes with CSS3

, , 1 Comment

Drawing with CSS in a trendy topic these days. Today i will show you in this post how to draw speech bubbles and basic shapes (Like envelope, book mark, starburst ect…). These tips are the basic to drawing more complex drawings.

Before going to the shapes, i will explain the CSS border-width and border-color  Property.

CSS

{code}

#box{

border-width:30px 30px 30px 30px;

border-color: #FF0 #009 #060 #F00;

border-style:solid;

height:50px;

width:50px;

}{/code}

 

You will get the below result:

we have set the border-width top:30px, left:30px, bottom:30px and right 30px. You can clearly indetify setting border-color property using different color as above example.

Let see more closer.

CSS

{code}

#box{

border-width:30px 30px 30px 30px;

border-style:solid;

border-color: #FF0 #009 #060 #F00;

height:1px;

width:1px;

}{/code}

You will get the below result:

The height and the width of the box is 1px. This CSS let us to get the triangle

CSS

 

{code}

#box{

border-width:30px 30px 30px 30px;

border-style:solid;

border-color: #FF0 transparent transparent transparent;

height:1px;

width:1px;

} {/code}

You will get the below result:

We set the border-color for top only. Others are transparent. So we can get the triangle shape.

Now we will see how to draw a speech bubble in CSS3.

The final result:

HTML
{code}
<div >

<p class="speech-bubble">THIS IS SPEECH BUBBLE</p>

</div>
{/code}

CSS
{code}

.speech-bubble {

position:relative;

padding:15px;

color:#000;

background:#f6ff00;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

} {/code}

This CSS shows how to draw a boder redius in CSS3. More details please visit my previous tutorial CSS3 Exciting Border Functions and Features

CSS
{code} /* creates triangle */

.speech-bubble:after {

content:"";

display:block;

position:absolute;

bottom:-30px;

left:50px;

width:0;

height:0;

border-width:15px 15px 15px 15px;

border-style:solid;

border-color: #f6ff00 transparent transparent transparent ;

}{/code}
 

:before and :after pseudo-elements:

Using pseudo-elements will help us in reducing the amount of unnecessary HTML code.  By using these elements, we will have minimal markup. In this case, just one empty div , Note these pseudo-elements are in CSS2 specs.

 

Envelope

 

The final result:


 

HTML
{code}

<div class="envelope">

</div>
{/code}

CSS

{code}
.envelope {

content:"";

display:block;

position:absolute;

left:50px;

top:50px;

width:0;

height:0;

border-width:50px 100px 50px 100px;

border-style:solid;

border-color: #9c9c9c #000 #000 #000 ;

margin:5px;

}{/code}
{code}

.envelope:before {

content:"";

display:block;

position:absolute;

bottom:-30px;

left:-100px;

top:-150px;

width:0;

height:0;

border-width:50px 100px 50px 100px;

border-style:solid;

border-color: transparent transparent #000 transparent ;

}{/code}

Lets see some book mark shape

The final result:

HTML
{code}
<div>

<p class="bookmark after"></p>

</div>{/code}

CSS
{code}

.bookmark{

display:block;

width:100px;

height:200px;

background:#fe0;

position:relative;

left:50px;

}{/code}

{code}
.bookmark:after {

content:"";

display:block;

position:absolute;

bottom:-80px;

width:0;

height:0;

border-width:30px 50px 50px 50px;

border-style:solid;

border-color:#fe0  transparent transparent transparent ;

}{/code}

 

Another book mark shape

HTML
{code}
<div>
<p class="bookmark1 after"></p>
</div> {/code}

CSS

{code}
.bookmark1{

display:block;

width:100px;

height:200px;

background:#fe0;

position:relative;

left:50px;

}{/code}
{code}

.bookmark1:after {

content:"";

display:block;

position:absolute;

bottom:-80px;

left:0;

width:0;

height:0;

border-width:50px 50px 50px 50px;

border-style:solid;

border-color:#fe0  #fe0 transparent #fe0 ;

}{/code}

 

Now we will see  CSS3 rotation property. All we needed was a series of nested block-level elements each rotated by a slightly different amount. The rotation would distribute the box corners around the circumference of the star.

To start with I created a 16 pointed star by using three nested span elements inside a div.

The final Result

HTML
{code}

<div class="starburst">

<span><span><span>

<p>STARBURST</p>

</span></span></span>

</div>
{/code}

CSS
{code}

.starburst {

display:block;

width:100px;

height:100px;

background:#fe0;

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

rotation:45deg;

position:relative;

left:50px;

top:50px;

text-align:center;

text-decoration:none;

color:#000;

font-weight:bold;

font-family:Arial, sans-serif;

}{/code}

 

-webkit-transform:rotate and -moz-transform:rotate will rotate the box in to -45 degree and the other is the standard rotation rule as it will be used once this rotation property becomes standard.

CSS
{code}

.starburst span {

display:block;

width:100px;

height:100px;

background:#fe0;

-webkit-transform:rotate(22.5deg);

-moz-transform:rotate(22.5deg);

rotation:22.5deg;

}{/code}

span element will rotate the box into 22.5 degree. So you will get the  starburst shape.
 

Flower

The final Result:

HTML
{code}
<div class="flower">

<span><span><span>

<p>FLOWER</p>

</span></span></span>

</div>
{/code}

CSS
{code}

.flower {

display:block;

width:100px;

height:100px;

background:#fe0;

-moz-border-radius:15px;

-webkit-border-radius:15px;

border-radius:15px;

radius:15px;

position:relative;

top:50px;

left:50px;

}

{/code}
{code}

.flower span {

display:block;

width:100px;

height:100px;

background:#fe0;

-webkit-transform:rotate(22.5deg);

-moz-transform:rotate(22.5deg);

rotation:22.5deg;

-moz-border-radius:15px;

-webkit-border-radius:15px;

border-radius:15px;

} {/code}

 

Ribbon

 

The final result:

HTML

{code}
<div>

<div class="ribbon">

<span><span><span><span><span><span><span><span>

<p>RIBBON</p>

</span></span></span></span></span></span></span></span>

</div>

<div class="ribbonL"></div>

<div class="ribbonR"></div>

</div>{/code}

CSS
{code}

.ribbon {

display:block;

width:100px;

height:100px;

background:#fe0;

-webkit-transform:rotate(-67.5);

-moz-transform:rotate(-67.5);

rotation:-67.5;

position:relative;

top:50px;

left:50px;

text-align:center;

text-decoration:none;

color:#000;

font-weight:bold;

font-family:Arial, sans-serif;

}{/code}

{code}

.ribbon span {

display:block;

width:100px;

height:100px;

background:#fe0;

-webkit-transform:rotate(11.5deg);

-moz-transform:rotate(11.5deg);

rotation:11.5deg;

}{/code}

{code}

.ribbonL {

width:30px;

height:200px;

background:#fe0;

-webkit-transform:rotate(11.5deg);

-moz-transform:rotate(11.5deg);

rotation:11.5deg;

position: relative;

left:50px;

top:50px;

}{/code}

{code}

.ribbonR {

width:30px;

height:200px;

background:#fe0;

-webkit-transform:rotate(-11.5deg);

-moz-transform:rotate(-11.5deg);

rotation:-11.5deg;

position: relative;

left:110px;

top:-150px;

}{/code}

Try out the CSS3 rotation property for your self and see what you can come up with.

Share this: