EverWeb Widgetbox

Shapes Using HTML & CSS

Rectangle & Square

The Rectangle and Circle widgets will create shapes using HTML and CSS rather than images. This will make for far faster downloading web pages - especially if there are more than one or two on a page.

Borders can be added to save even more images being created!

Click either widget icon to get the widget.

When inserting a text box over a shape, make the text box the same size as the shape and apply an inset margin using the Text inspector.

If the corners are heavily radiused, decrease the height of the text box and center it over the background shape using the horizontal guideline.

Rectangle Square CSS WIdget

Shapes Using HTML & CSS

Rectangle & Square

The Rectangle and Circle widgets will create shapes using HTML and CSS rather than images. This will make for far faster downloading web pages - especially if there are more than one or two on a page.

Borders can be added to save even more images being created!

Click either widget icon to get the widget.

When inserting a text box over a shape, make the text box the same size as the shape and apply an inset margin using the Text inspector.

If the corners are heavily radiused, decrease the height of the text box and center it over the background shape using the horizontal guideline.

Rectangle

or Square

Rectangle Square Widget
CSS Circle Oval WIdget

Circle & Oval

The Circle widget works in much the same way as the Rectangle one except that it doesn't obviously have the corner radius function.

These widgets can be used to create buttons by dropping a text box over them.

To create these "buttons" as hyperlinks, the text and/or the text box can be selected as a hyperlink using the Link inspector.

To make sure the link is easily found and clicked, make the text box the same size as the underlying shape and center the text both horizontally and vertically using the Text inspector.

Make sure that the settings for Before Paragraph, After Paragraph and Inset Margin are all set to zero.

A more suitable widget for creating buttons with hyperlinks can be found on the NEXT page.

Text Hyperlink

Text Box Hyperlink

Circle Oval Shape WIdget

This widget creates rectangular shapes with or without rounded corners.

The background can be a solid color or a gradient.

For a solid color, set both Color A and Color B to the same color.

The gradient can be set to run from top to bottom or from left to right by choosing "top" or "left".

The corner radius can be set to any value between zero and 150px.

Border styles can be set using the controls for border width, color and style.

It is not advisable to use anything other than a solid border with a gradient background!

Click Me

Get The Widget
Get The Widget