EverWeb Codebox

Simple Shapes Using CSS

Rectangle

Shapes are created using an empty div with a background color. The styles can be internal using a class or inline - or a bit of both.

When using an HTML Snippet the width and height can be set to 100% and the shape's size and proportions adjusted by dragging the actual snippet. Hold down the shift key while dragging to preserve the proportions of width to height.

<div class="rectangle"></div>

CSS

.rectangle {

     width:100%;

     height:100%;

     background: blue;

     margin:0;

     padding:0;          

}

HTML

<div class="circle"></div>

CSS

.circle {

     width:100%;

     height:100%;

     background: green;

     margin:0;

     padding:0;

     -moz-border-radius: 50%;

     -webkit-border-radius: 50%;

     border-radius: 50%;       

}

HTML

Borders

Borders can be added to these shapes by using the border property. The condensed version states the border width, type and color in one property - border: 2px solid #FF0000

The most useful border types are solid, dotted, dashed and double.

.circle {

     width:100%;

     height:100%;

     background: yellow;

     margin:0;

     padding:0;

     -moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%;

     border: 3px dotted #FF0000       

}

Rounded Corners

Rectangles can be given rounded corners using the border radius property. Note that these have to be specified with the appropriate vendor prefixes.

.rectangle {

     width:100%;

     height:100%;

     background: orange;

     margin:0;

     padding:0;

     -moz-border-radius: 20px;

     -webkit-border-radius: 20px;

     border-radius: 20px;          

}

Obviously, borders can be added to these as well.

Background Gradients

Since these shapes would normally be used for backgrounds to text content, the colors should be chosen carefully. In some cases it may be that a simple color gradient is required. CSS gradients need to be specified with various vendor prefixes but the concept is not too hard to understand.

A simple top to bottom gradient is secified like this...

     background: -webkit-linear-gradient(top, #FF0000, #000);

     background: -moz-linear-gradient(top, #0000FF, #000);

     background: -ms-linear-gradient(top, #0000FF, #000);

     background: -o-linear-gradient(top, #0000FF, #000);         

The gradient can be switched to left/right replacing "top" with "left" in the CSS.

easy

Click the Easy button to check widgets for easily creating rectangles and circles with borders, radiused corners and background gradients

Widgets