Articles in “HTML & CSS”
-
Logical Properties for Useful Shorthands
Something I like about logical properties is the ability to set margins or padding on just a single axis on an element, while leaving the other alone. Say we have an element on which we’ve set some padding using the padding shorthand: Read Full Article
-
Powerful image optimization tools
Optimizing the size of images can have a bigger impact on performance than all other areas combined. In this article, Louis Lazaris covers different tools available for reducing the size of images. Read Full Article
-
Use legend and fieldset
It’s 2022 and people are still afraid to use <fieldset> and <legend>. I understand the layout challenges can be frustrating, but swapping to an ARIA group role will result in a more inaccessible experience. A Solution Try this: <fieldset>… Read Full Article
-
The CSS behind Figma
A look at some interesting use-cases for CSS flexbox and grid in Figma app. Read Full Article
-
Avoiding image layout shifts
By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: Read Full Article
-
The CSS Cascade, a deep dive
Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel. Read Full Article
-
Holograms, light-leaks and how to build CSS-only shaders
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… Read Full Article
-
The World’s Highest Website—a CSS Experiment
Ladies and gentlemen—welcome to the highest, longest, largest website in the World! Read Full Article
-
Masonry? In CSS?!
I spoke about CSS layout at CSS Day conference recently, and in the Q&A session afterwards I was asked about masonry layout in CSS. Masonry layout, in case you’re not aware, is where different height items are laid out in columns but, rather than bein… Read Full Article
-
Mind your language
Building flexible, multi-lingual sites can be tricky. This post takes a look at five steps to help things run smoothly… Read Full Article