Establishing a new block formatting context using overflow: hidden;

Today Vasilis tweeted a link to a very nice (and old, apparently) CSS trick: Here's your monthly reminder that this is an obscure, but very handy feature of CSS overflow. http://t.co/4qNriVlB5y — Vasilis (@vasilis) February 13, 2014 Overflow does some cool things you should know about. Creates Block Formatting Context Clears Floats The second feature […]

Vertical align anything with just 3 lines of CSS

.element { position: relative; top: 50%; transform: translateY(-50%); } Same goes for horizontal centering. Where one – back in the day – would abuse margin-left by setting a negative margin to half of the width, we can now use translateX(-50%) to horizontally center a fluid-width box. .element { position: relative; width: 400px; left: 50%; margin-left: […]

CSS Animated Content Switching

A trend I’m seeing for the coming year is the rise of Transitional Interfaces on the web. A fine example is the aforementioned Fluidbox, or this interface (extract from the post linked): Sparked by the post linked — which you should read — I started goofing around with CSS transforms and transitions a bit. The […]

Fluidbox

I adore the smooth transition offered by Medium’s lightbox module — no disruptive modal window, and opening/closing of the lightbox is intuitive and straightforward. So I tasked myself with a little challenge — replicate it, and improve on it, if possible. CSS transitions and transforms FTW Fluidbox Demo → Fluidbox Source (GitHub) → Fluidbox Explanation →