Sunday 26 May 2013

CSS3 SHAPES

You can use these shapes in any html control like text area , buttons , grids etc.

SQUARE

#square {
width: 140px; 
height: 140px; 
background: blue; 
}
CIRCLE

#circle { 
width: 140px;
height: 140px;
background: blue; 
-moz-border-radius: 70px; 
-webkit-border-radius: 70px; 
border-radius: 70px;
}

OVAL
#oval {
width: 200px; 
height: 100px; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px;
}

you can use the oval shape in text area .

ROUNDED CORNER
#rc 
{
border:display:solid;
border-radius: 5px;
   border-width:1px;
 }

you can use this in text area .

SPEECH BLUE
#speech-bubble {
width: 120px; 
height: 80px; 
background: blue;
position: absolute;
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid blue;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}

you can use speech blue to show messages if text boxes are left blank

No comments: