Bauhaus inspired design with z-index and SVGs
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.
Stuff I need to learn / get better at
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
- Bauhaus Overview (wikipedia.org)
- MDN Documentation: box-shadow (developer.mozilla.org)
- MDN Documentation: drop-shadow (developer.mozilla.org)
- MDN Documentation: z-index (developer.mozilla.org)