CSS writing-mode experiment

The demo

If you’re in a hurry, here’s the demo, make sure you resize the viewport in order to trigger the defined CSS media query.

The writing-mode property

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically, direction too. You can read more about it on MDN.

So, while thinking about a use case scenario, at that time Smashing Magazine’s latest website design went live. So I opened up DevTools to see how things were being crafted, we’re all curious by nature, aren’t we? While inspecting things around, I noticed the below section titles design:

Take a look at the vertical popular posts title

CSS

I was now having a use case scenario, so I made a CodePen demo that showcases it. Basically, the demo consists of a responsive time element that shifts by 90deg on medium and large resolutions and stacks otherwise.