painting with light

layer by layer.

That my designs are heavily layered, is nothing new. Have been using such tech­niques all along.

The following is about designing for wider screens.

When I started designing web pages (in 2001) I had to add HTML elements – divs – for every layer, and use semi-trans­par­ent images. Often had to prepare images in indexed mode, as IE6 (with an 80% market dominance back then) didn't support semi-trans­par­ency. Tough times…

Then came ::before and ::after to save me from divitis, and the latest tools to arrive were effects like transitions, animations, keyframes, and filter().
The afore mentioned makes for a pretty power­ful palette on a skinny canvas. The HTML template I use has only the bare minimum of elements, plus one extra div as page container for ease of designing. So far that has been enough.

painting a header

The header's appearance is a major part of any site's identity, so I have “painted” the header area to reflect mine. Note that in the source-code there is no actual header element – never found the need for one.

All you see up there are elements and generated content repo­si­tioned from else­where in the source-code, to fill the space that was prepared for them by having content-carrying elements pushed down. An illusion as good as any.

The animated birds and the HOME and NAV links, have been there for years. Modifications have been made as browsers have evolved and increased support for my ideas, but the overall look has been pretty steady for years.

Lately I decided to also animate the “cloudy” background, which was easy enough to do but not so easy to get right. To animate the image itself didn't turn out right in my eyes, so I settled for overlays to modify the appearance of the static image instead.
It was all about striking a balance for what would look right, and also work reason­able well for all pages on site.

details and code

One animated layer with linear-gradient background colors and a keyframes timing scheme, gave me the animation I wanted – blue color of varying intensity to give the illusion of changes in light conditions.
However, to get enough darkening effects at both sides, the center where I often pull up an image from the main content area appeared too dark. Overall it became either too much, or too little, for my liking.

To soften the effects in that center area only, I added another, lightly animated, narrow and tall overlay with an almost white to transparent radial-gradient. This creates the illusion of a more steady light-beam down the middle, while allowing some of the animated effects from the other layer to shine through.

two added layers on page and header background:
/* background */
html body #base.d {background: url("../imagedepot/4bl.png"), url("../imagedepot/bug-clouds-f.png");}

/* overlay one */
html body::before  {content: "\00A0"; position: absolute; z-index: 1; 
top: 0; left: 0; width: 100%; height: 400px; background: transparent; opacity: .3;
background: linear-gradient(rgba(230,240,250,.5) 0, rgba(0,50,100,.7) 140px, rgba(125,175,225,.0));
animation: fltr4 35s ease-in-out forwards infinite;}

@keyframes fltr4 {
0% {opacity: .65; filter: brightness(100%);}
25% {opacity: .1; filter: brightness(200%);}
40% {opacity: .1; filter: brightness(400%);}
50% {opacity: .1; filter: brightness(250%);}
60% {opacity: .1; filter: brightness(500%);}
80% {opacity: .1; filter: brightness(200%);}
100% {opacity: .65; filter: brightness(100%);}
}

/* overlay two */
html body::after  {text-align: center; content: "\00A0"; z-index: 1; 
top: 0; left: 30%; width: 45%; height: 500px; background: transparent; opacity: .6;
background-image: radial-gradient(at 50% 20px, #f0f7ff 15%, transparent 50%);
animation: move3 12s ease-in-out forwards infinite;}

@keyframes move3 {
0% {left: 25%; width: 50%; opacity: .4;}
50% {left: 35%; width: 30%; height: 350px; opacity: .7;}
100% {left: 25%; width: 50%; opacity: .4;}
}
more details:

The background image that is repeated down the page-body and the image on top, are added to #base in one go. The top image is selectable via a class on #base, so pages in different categories can be given different header images.

Two generated content layers cover the header image and top of the page image.
The ::before layer has a linear gradient that goes in blue as background, and is heavily animated to create a “changing light conditions” effect for the cloud-covered header image.
The ::after lightly animated layer “moderates” the heavily animated layer by dampening its effects in the top/​center area.
As all animations in the header area are timed differently, the overall picture is constantly changing.

Layers involved can be visually outlined.

Side-column background lowered and animated:
/* side column background */
html body #base main:before {content: "\00A0"; position: absolute; top: 0; bottom: -5px; left: 99.9%; 
padding: 0 2px 0 .3%; border: solid 1px #999; border-width: 1px 0 0 1px; border-radius: 4px 0 0 0; 
width: calc(53.4% - 1px); box-shadow: -1px -1px 5px rgba(100,100,100,0.35); 
background: #ffb url(../imagedepot/back15cb.png); z-index: 1; overflow: hidden;}

/* conditional lowering and animation */
html body #base.sb main:before {z-index: 0; animation: anim5 42s ease-in-out forwards infinite;}

@keyframes anim5 {
0% {opacity: 1;}
50% {opacity: .85;}
100% {opacity: 1;}
}
more details:

Normally the side-column back­ground is opaque and stable, as varying the back­ground usually doesn't go well with text – hurts reada­bility.

On a few pages the top of the side-column doesn't contain any text apart from maybe a high-contrast headline, and in such cases I some­times add a class to lower the background below the level of the animated generated content covering the header, and time-vary opacity to let the header image shine ever so slightly through.

I can do this because the side-column's content carrying elements are layered inde­pen­dent of its background. Images high up in the content area will stay above the animated background layers, increasing contrast instead of reducing it.

effects vs noise

Layering is used every­where in this site design, but content areas are sacred tran­quil­ity zones. Animations and effects that may distract from content, are not allowed here.

Anything static that seems relevant alongside the actual content, may potentially be used as decor in content areas. All else either has to be content, or it doesn't belong here. My site, my rules, and when­ever I try to break these rules myself, I regret it and almost imme­di­ately remove the noise.

sincerely  georg; sign

Hageland 22.nov.2017
last rev: 23.nov.2017



www.gunlaug.comadvice upgradeadvice upgrade navigation