EverWeb Widgets HTML5

Full Width - Fixed or Floating

This widget takes advantage of the Full Width control introduced in EverWeb V1.8.
It will produce a rectangle shape with rounded corners and a color or color gradient background with adjustable color angle and opacity.
Both the border and box shadow options are inset since an ouset one cannot be added to a 100% wide object.
Unlike the default EverWeb shape, this is created with pure CSS with no shape images to reduce the download efficiency of the web page.

Full width inset rectangle

Full Width Rectangle

Full Width Rectangle Metrics
Full Width Rectangle Widget Settings

Widget Settings

Drag the widget onto the page and open the Metrics inspector.
Check the "Full Width" box.
If the rectangle is to be the background to a fixed header or footer, check the "Fixed position" box once it is in the desired position on the page.
The shape can be dragged into the header or footer area by holding down the command key while dragging or by checking the box next to "Allow free draggin" in the Metrics inspector.
Set the background color or check the box if a gradient is required and set colors A and B.
Enter the required color gradient angle.
Adjust the opacity if required.
Note that opacity is the opposite of transparency so the lower the setting - the more transparent it will be.
Set the corner radius if rounded corners are required.
Set the inset border width and color if needed.
Set the inset box shadow color and radius if required.

Get The Widget