Translucent tabs blending into opaque body in a responsive fluid layout
Hard to explain what I'm doing here but, when designing things to a fluid layout simple things may get hard. Here's an elegant solution to a very specific fluid width layout CSS conundrum.
- The texts length in the tabs vary (multilingual site)
- The layout needs to be fluid
ulcan’t have background color
The gist of the problem was to have the tabs (the
a elements) blend into the semi transparent
section element beneath it on hover and when current.
Cause of the transparency, the
ul could not have a background color (it wouldn’t be transparent then), and we needed to use a filler element.
Half of glory to Martti.