EverWeb Widgets HTML5

Transparent HTML5 Section Widget

Transparent HTML5 Section

Widget Settings

Transparent HTML5 Section widget
Transparent HTML5 Section

Section Element

A transparent background using an HTML5 section element which can be used on pages with a full size, responsive background image.
The <h1> heading shares the same font family and color as the paragraph text but can styled separately for font size, weight, style and text align.
The transparent background has rounded corners which are adjustable and can have a box shadow with variable colorand radius. The background transparency is also adjustable.

Widget Settings

Enter the heading and paragraph text using <br> for line breaks.
Enter the required font family and check the box if it is Google hosted.
Select a suitable fallback font and the font color.
Set the background opacity and corner radius.
If a box shadow is required to give the element more definition, set its color and offset radius.
Set the heading styles for font size, style, weight and text align.
Set the paragraph font size, alignment and line height.

Hyperlinks

As can be seen from the widget settings, there is an option for styling hyperlinks.
The links can be styled for color, hover color and text decoration. The options are "none", "underline" and "line-through".
Links are inserted into the text box using HTML like this...

<a href="page-name.html">Link Text</a>

If the linked page is to open in a new window, use this...

<a href="page-name.html" target="_blank">Link Text</a>
See HTML Special Characters & Hyperlinks for more information about using basic HTML and hyperlinks.

Get The Widget
Go To The Top

Background

Full size background images are not a good idea since they slow the page download time substantially and can cause readability problems.
To increase the page download speed the image used for the background of this page is a small square which is tiled by using the background repeat selector in the body styles. This CSS is pasted into the Head Code box in the Page inspector…

<style type="text/css">
body {
background-image:url("ewExternalFiles/texture.jpg");
background-repeat:repeat-x,y}
</style>

The image tile is shown to the right and can be dragged off the page onto the desktop for use in testing out this technique.

Copyright © Roddy McKay - 2015

Textured Image

Textured Background Image Tile
Control click the image to download.

Fixed Background

The page background can also be fixed so that the content appears to glide over it when the page is scrolled. The styles would then look like this...

<style type="text/css">
body {
background-image:url("ewExternalFiles/texture.jpg");
background-repeat:repeat-x,y;
background-attachment: fixed;
background-position: center;}
</style>