EverWeb Codebox logo

EverWeb Widgetbox 3

Scroll FX Button Hyperlink Widget

Transparent Rectangle

Full Width & Fixed Options

This widget creates a transparent rectangle with options for border, rounded corners and a box shadow.
These effects are created using CSS rather then images for a faster downloading web page.
The widget uses the new controls in EverWeb V1.8 for creating a full width object whose position can be fixed if required. Go to the DEMO page to see it in action.
NOTE: If the widget is used with the parallax scrolling background, it should be inserted after the background and before any other content.

Full width fixed transparent rectangle widget
Full width fixed transparent rectangle widget

Widget Settings

Drag the widget onto the page and open the Metrics inspector.
Check the "Full width" box.
Adjust the widget to the required height using a drag handle or the Metrics inspector.
Drag it to the required position on the design canvas and then check the box next to "Fixed position".
Open the color window and choose the required background color.
Open the "Color Sliders" tab to get the RGB color numbers and enter them into the widget settings.
Set the background opacity.
Set the corner radius, border color and width if required.
Set the box shadow color and radius if needed.

This widget is included in the Scroll FX widget pack.