painting with light
… layer by layer.
That my designs are heavily layered, is nothing new. Have been using such techniques 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-transparent images. Often had to prepare images in indexed mode, as IE6 (with an 80% market dominance
back then) didn't support semi-transparency. 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 powerful 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 repositioned from elsewhere 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 reasonable 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 background is opaque and stable, as varying the background usually doesn't go well with text – hurts readability.
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 sometimes 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 independent 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 everywhere in this site design, but content areas are sacred tranquility 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 whenever I try to break these rules myself, I regret it and almost immediately remove the noise.
sincerely
Hageland 22.nov.2017
last rev: 23.nov.2017