Skip to content

Issue 49

Scroll animations, CSS Generated Content rewrite and design tools for adaptive layouts

Rachel Andrew
2 min read


Issue 49

A few interesting things this week, I really enjoyed reading the Smashing Magazine article about creating a 3D CSS cube, I love detailed walkthroughs explaining the process of getting to a result more than just seeing the clever technique itself.

We also have a nice little library for scroll animations in layouts and a note form the CSS Working Group about the rewrite of the CSS Generated Content Module.

Drop me a line if you spot anything that might be interesting to other readers. I try and get a balance of useful techniques as well as inspiration and experiments.

Rachel Andrew, CSS Layout News

Flexbox Flag!

I hope American readers had a good 4th of July. Here's a Flexbox flag by Andrew Harvard.

ScrollTrigger - Scroll based animations with ease

This looks like a nice little library for scroll animations.

"Triggers classes on html elements based on the scroll position. Uses requestAnimationFrame so it doesn't jack the users scroll."

CSS WG Blog – CSS Generated Content Initial Rewrite

The CSS Working Group has published a Working Draft of the CSS Generated and Replaced Content Level 3. This module specifies the generated content features (content property and related functionality) in CSS.

One of the features of this rewritten module is the inclusion of alternate text for generated content, indicated by a forward slash after the content you are inserting, then a string representing the alternate text.


Completely CSS: Progressively Collapsing Navigation | Kenan Yusuf

A very nice menu, demonstrating progressively collapsing navigation using HTML and CSS and some neat use of flexbox.

Front-End Challenge Accepted: CSS 3D Cube – Smashing Magazine

A thorough walkthrough from Anna Selezniova, creating a rotating 3D CSS cube.

Use Cases For CSS Vertical Media Queries

A post detailing several use cases for "Vertical Media Queries" focusing on min-height and max-height.


Modern Design Tools: Adaptive Layouts — Design Insights from Bridge — Medium

"Design tools should have the same properties as the medium for which we are designing."

An interesting post about the tools we use for designing adaptive layouts.

Our Sponsor

Virtual CSS and Sass Conference Event - July 26-28, 2016

Virtual CSS and Sass Conference Event - July 26-28, 2016

Join us for the virtual CSS and Sass conference event, CSS Summit, and discover the tips and techniques to improve your CSS, keep it responsive and lean, and ready for the future. From Flexbox to Style Guides, from Sass to PostCSS, our experts can help you find the best ways to create your best CSS. Best of all, there’s no travel hassle with E4H’s online events! Enjoy all the presentations, and ask questions of the speakers live on your own desktop, then review the recordings later on at your own pace. Register now and save 20% with LAYOUTNEWS code at