Bauhaus inspired design with z-index and SVGs
Introduction
I’ve loved Bauhaus Design for many years and always jump at the chance to try out converting a layout to web design.
It was while I was thinking about recreating this design that I wrote the convert all glyphs of a font to individual SVG files article. This allowed me to easily grab the character glyphs that I needed.
Multi layering with z-index
A large part of the appeal is the layered effect of having the central image partially obscured by SVG glyphs. This is achieved with the z-index property. Add in a dash of box-shadow around the image and filter: drop-shadow() on the SVGs and we get the desired effect.
The Design
Stuff I need to learn / get better at
The viewBox settings for the SVGs are not quite right and need tweaking to get the fit “just right.” There is currently too much space surrounding each glyph, and… the ‘A’ & ‘V’ characters need to be adjusted to the same width (or thereabouts) as the other characters.
If you have any advice (or constructive feedback) about SVG manipulation and how I could improve upon this from a technical standpoint, please let me know.
Download sample code
I’ve assembled all the parts so that you can play with them. The standard – software is provided “as is”, without warranty of any kind – applies here.
That’s all folks
I intend to carry on working with this project but for the purpose of this exercise I’ll leave it at this basic version.
// End of Project
More Information
Further Reading
- Bauhaus Overview (wikipedia.org)
- MDN Docs: box-shadow (developer.mozilla.org)
- MDN Docs: drop-shadow (developer.mozilla.org)
- MDN Docs: z-index (developer.mozilla.org)
About Dave A.K.A. 'barrd'
