How To Build A Magazine Layout With CSS Grid Areas — Smashing Magazine
Web development, especially what you can do with CSS, has become increasingly complex. With the added capabilities of CSS Grid, it is now possible to achieve layouts that look like they were laid out by hand. Let’s tackle a practical example of how to do something like that.
Animating CSS Grid (How To + Examples) | CSS-Tricks
I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers!
Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes.
In a previous article, I looked at CSS Grid's ability to create complex layouts using its auto-placement powers. I took that one step further in another
Holograms, light-leaks and how to build CSS-only shaders - Robb Owen
Get a shiny WebGL look without actually using WebGL. In this article we take a look at how CSS blend modes unleash the potential of cool compositing effects without the need for JavaScript
Simplify Your Color Palette With CSS Color-Mix() — Smashing Magazine
CSS color-mix is an experimental function that blends two colors and can be used to simplify color palettes. You can define a color palette and theme without too much effort using CSS color-mix().
When I first learned that the path() function is supported in the clip-path attribute,
I was quite excited because it allows clipping with complex shapes other than ellipse or polygons.
Responsive iframes with the CSS aspect-ratio property
Today, I want to show you can use a few lines of CSS to make your embedded iframes fully responsive. Let’s dig in!
The challenge with iframes and responsive layouts Unlike images and the native HTML5 video element, iframes do not scale responsively by default.
/** * This does NOT work */ iframe { max-width: 100%; height: auto; } Years back, Dave Rupert put together a great video showing the challenge with responsive iframe videos.