Tagged “images”
Images on the Web: The Big Picture, Part 1
In modern web development there are a myriad ways to present an image on a web page and it can often feel pretty baffling. In this series I step through the options, moving from basic to flexible images; then from modern responsive images to the new CSS for fitting different sized images into a common shape. By the end I'll arrive at a flexible, modern boilerplate and toolkit for images.
A First Look at aspect-ratio (on CSS-Tricks)
Chris Coyier takes the new CSS aspect-ratio property for a spin and tests how it works in different scenarios.
Create an Automatically Responsive Flexbox Gallery (on egghead.io)
Here’s a lovely intrinsically responsive (no media queries) photo gallery solution from Stephanie Eckles. It can accommodate differently sized images and achieves its layout by a combination of flexbox features (flex-wrap, flex-basis) and by applying object-fit: cover to photos to make them fully cover their parent list items.
3 Popular Website Heroes Created With CSS Grid Layout (on Modern CSS Solutions)
Some serious CSS Grid positioning, image manipulation and alpha transparency ninjitsu on display here from Stephanie Eckles!
This episode explores creating website heroes - aka “headers” - with one of my favorite ways to use CSS grid layout: by turning it into a canvas.
Bustle
Here’s a beautiful, magazine style website design for digital publication Bustle. The typography, use of whitespace, responsive layout, menu pattern, colour palette and imagery are all on point!
Modern CSS Solutions
Modern CSS Solutions for Old CSS Problems
Jank-free Responsive Images
Here’s how to improve performance and prevent layout jank when browsers load responsive images.
Native lazy-loading for the web
Now that we have the HTML attribute loading we can set loading="lazy" on our website’s media, and the loading of non-critical, below-the-fold media will be deferred until the user scrolls to them.
See all tags.