crossing edges…
…or having a hangover
If you have surfed by this site a time or two, you may have noticed elements crossing borders and container edges here and there. Mainly decorative images are positioned as “hangovers”, often associated with headlines as is the case for the “surfer” image above.
I like “hangovers” a lot – in web design that is, and often have to hold back not to overdo the use of them. There is a system of sort in how I use, and do not use, “hangovers” across this site, but deviations from the system can be found here, there, and everywhere. No rules without exceptions.
Of course, on really small screens there aren't all that many edges to cross. Thus, this is a technique best suited for larger screens and wide browser windows.
freedom of expression
On one hand, moving elements over the edges makes them stand out, and on the other hand it frees up space for text in main areas. Both these factors are taken into considerations when adding classes for position, spacing, and size.
Each and every “hangover” element is designed in place using microtuning, as default (basic) styling for all elements is to keep them nicely within their respective containers.
The “actual vs. visual” order of elements is separated
with this technique, and visual arrangement can be tailored to my liking without
messing up logical source‐code (HTML
) order.
Source‐code order is important, as an image's alt
attribute
text will be read in source order sequence with surrounding text by Assistive
Technologies (AT) software. Web pages that don't make much sense without
images, rarely ever make much sense with images either, in my very
personal opinion.
That most images on my site have empty alt
attributes –
they are either decorative or they are described well enough in regular text, is
totally irrelevant when developing techniques that should work in all cases.
minor considerations
Containers controlled by overflow: auto/hidden
will clip
“hangovers” at the edges. So that method for containing
float
s is no good here. It never was any good anywhere anyway,
except for the odd cases when/where controlling overflow really is part
of design considerations, but be that as it may for now.
The often overlooked fact that float
s contain float
s,
provides us with one solution. The simple clear: both
on regular
elements or in ClearFix
form, will always work too. So, given the many well‐working alternatives
for containing float
s, the fact that “hangovers” don't
want to be “contained” in the regular meaning of the word, isn't
a problem.
I have been playing with “hangovers”, and other element manipulation in web design, for so long that it is second nature by now. Not many edge‐cases left in web design, really.
About time the W3C, and browsers, gave us web designers some new
CSS
toys to play with. Preferably some that don't belong in the
regular package of transitional effects.
sincerely
Hageland 09.mar.2014
12.mar.2014 - added some whiskey.
last rev: 12.mar.2014