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.

See a fiddle of it →

  1. The texts length in the tabs vary (multilingual site)
  2. The layout needs to be fluid
  3. No javascript can be used
  4. The ul can’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.

Club-Mate, the beverage →