Box and Fancy Effects With CSS
Creating a box and rounded box with css we can do that with using few css properties like height,width,border.
following is the simple box.
This is simple example of margin and padding. border. The class box1 gives the effects of the following box
.box1
{
background:#99FFd5 ;
width:200px;
height:150px;
margin: 10px 10px 0px 10px;
padding: 0px 15px 0px 0px;
border:dashed ;
border-width: 2px;
overflow:hidden;
padding-right: 1%;
}
Here is the fancy example of the padding margin ,border. Well there is no content in the box but this box is for creating the a good effect. People reading ths artcile must have noticed a blue icon on left of every descripption well it is nothing but a similar example of the
class displayed below.
.col_fancy
{
font-size: 0px; line-height: 0%;
border-top: 20px solid red;
border-bottom: 20px solid #fc0;
border-left: 20px solid blue;
width:5px;
height:5px;
border-right: 20px solid blue;
}
If you wish to create a simple box with header and content sections apart. here is a exaple for that.
Test Content
Header
This is a sample content for a box u can use it.
.box2 { background:#FF9933;
width:200px;
height:auto;
margin: 10px 10px 0px 10px;
padding: 0px 0px 0px 0px;
border:solid ;
border-width: 4px;
border-bottom-color:#FF0000;
border-left-color:#FF0000;
border-right-color:#FF0000;
border-top-color:#FF0000;
overflow:inherit;
float:left;
}
.content { background:#66FFFF;
width:inherit;
height:auto;
border-bottom-color:#FF0000;
border-left-color:#FF0000;
border-right-color:#FF0000;
border-top-color:#FF0000;
padding: 0px 0px 0px 0px;
border:solid ;
border-width: 0px;
overflow:inherit;
}
.header1 {
width:inherit;
height:20px;
text-align:center;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border:solid ;
border-width: 0px;
overflow:inherit;
cursor:move ;
}
If you wish to create a simple box with header and content sections apart and rounded edges
we need to add -moz-border-radius(*following will work on Firefox only)
. here is a exaple for that.
Test Content
Header
This is a sample content for a box u can use it.
.box2 { background:#FF9933;
width:200px;
height:auto;
margin: 10px 10px 0px 10px;
padding: 0px 0px 0px 0px;
border:solid ;
border-width: 4px;
border-bottom-color:#FF0000;
border-left-color:#FF0000;
border-right-color:#FF0000;
border-top-color:#FF0000;
overflow:inherit;
float:left;
-moz-border-radius: 12px;
}
Here is a fancy example of moz-border -radius
we need to add -moz-border-radius(*following will work on Firefox only)
. here is a exaple for that.
.round
{
width:90px;
height:90px;
border: 30px #FF0000 solid;
-moz-border-radius: 100px;
}
