EverWeb ThemeKit

EverWeb

ThemeKit

Really Cool Heading

Widgets

Fancy Responsive Heading

In the bad old days prior to CSS3 web designers resorted to using PNG images to create distinctive headings. Some still do but hopefully they will fade away soon!
Even when using a WYSIWYG editor like EverWeb a basic understanding of website layout and CSS (cascading styesheets) will go a long way to help create a better design - even if it is just to understabd the controls of more advanced widgets.
The link at the bottom goes to the W3docs site which is a good reference for all the CSS selectors and properties.
Responsive Text
The heading has some CSS properties that may not be familiar which make it different from all the rest.
To make the text font size responsive it can be expressed in viewport units. If we used viewport width, the text would go on betting bigger as the browser width is increased.
To make it more manageable, the font size is set as 6vmin - viewport minimum - which is a percentage of the viewport width or height - whichever is smaller.
Text Stroke
The text-stroke property creates a border around the letter. It has values for width and color. The text-fill color fills in the space inside.
Letter Spacing
Normally it is not good pratice to use the letter-spacing property since spacing out letters makes the words more difficult to read - especially for those with certain types of reading difficulties.
In this case we need to add some spacing to stop the letters running into one another.
Text Shadow
Adding a text shadow will give the heading aa 3D effect. Text shadow uses two selectors - shadow radius and shadow color. Using rgba rather than a hex color allows the opacity of the shadow color to be reduced if necessary.
Odds & Ends
To spice it up a little the background has a two color gradient with an adjustable angle and the container padding is set in viewport units rather than pixels so that it too responds to changes in browser/device window width.
Logo
The heading has a grid layout so the optional logo/link is inserted in row one. The logo image has controls for percentage width, maximum width and align - left, center or right.
Animation
Both the logo and the heading can animate in using a choice of 15 custom animation types. The animation duration and delay times are set in milliseconds.

Responsive Headings

There are a number of ways to create responsive text and the best method is to make the font size respond to changes in browser/device screen width by using viewport units.
For EverWeb users, this is not without its problems because the application cannot display viewport units.
The method used here to fool EverWeb into recognising viewport units was discovered totally by accident as many inovations do.
Font
The font used in this demo is the Google hosted Alfa Slab One and the font sizes for the headings from top to bottom are 3, 4, 4 and 5 viewport width units. The letter spacing and top/bottom padding are also expressed in viewport units.
Transparent Heading
The headings shown above have a text stroke and have their color removed by setting the "text-fill-color" to "transparent" and the "background-clip" selector set to "text".
Gradient Background
The heading can have a three color background gradient with adjustable color stops to create the effect. The colors are set out from left to right and the sliders for adjusting the color stops control their spread and the way in which they interact.
Background Image or GIF
The background can also be an image. The image used in the demo has a file size of only 1KB so is fine for use on oages that will display on phones.
The background can also be an animated GIF if it really needs to be eye catching.
Note that GIFs tend to have rather large file sizes and can effect the page's download performance on mobile devices.