Here are two small scroll-snapping carousels that I made. In the top one the items are laid out using CSS Flexbox, whereas the second one uses CSS Grid. The code also works fine with arbitrarily sized .scroll-items elements, they don’t need to have the same width. ℹ️ Want to now more about scroll snapping? Check […]
Tag Archives: css
Building Better Interfaces, a talk by Hakim El Hattab
At CSS Day 2019, I was fortunate to see Hakim El Hattab bring his talk Building Better Interfaces. A recording of his talk – and all other talks – are available on YouTube: This session is a deep-dive into the areas of interface design that Hakim has specialized in for over a decade—interactivity and animation. […]
A modern CSS reset
Andy Bell: In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS browser compatibility issues are much less likely than they were in the old IE 6 days. That era was when resets such as normalize.css came about and saved us all heaps […]
Flexbox Holy Albatross with CSS Grid
In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid. ℹ️ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical): There’s no […]
CSS Logical Properties and Values, the next Step of CSS Evolution
Still in draft, yet already thoroughly supported, is the CSS Logical Properties and Values Level 1 Specification, a CSS module which gets me excited. CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings. […]
Animated CSS border-image (using an SVG)
Charming little demo by Louis Hoebregts: Using a Data URI he injects an SVG as the url for the border-image CSS property. That SVG itself is then animated using a self-contained tad of inline CSS. (Yes, that’s CSS-in-CSS 😉)
Logical Operations with CSS Variables CSS Custom Properties
Going beyond Binary Conditions for CSS Calculations, Ana Tudor takes it to a whole new level by introducing the logical operations (and, or, nand, nor, not, and xor) to CSS — all built on top of calc() Very often, while using switch variables, I wish I could perform logical operations on them. We don’t have […]
text-decoration-* CSS Properties Coming to Firefox
Glad to see this announcement by Mozillian Daniel Holbert: As of today (Sept 12 2019), I’ve turned on support for the CSS properties text-decoration-skip-ink, text-decoration-thickness, and text-underline-offset, on all platforms. As posted before, text-decoration-skip-ink gives you nicer underlines. The other two properties allow one to tweak the position and color of the underline. CSS Tricks […]
“Can I email…” – Support tables for HTML and CSS in emails
Can I email is like Can I use but specifically for email: which HTML and CSS features are supported by which mail client? They also provide a scoreboard, ranking mail clients based on their support among the 70 HTML and CSS features listed on Can I email. Can I email… Support tables for HTML and […]
CSS Grid: Avengers Magazine Layouts
Really nice CSS Grid demo by Olivia NG. It’s a magazine containing twelve pages on The Avengers: CSS Grid: Magazine Layouts → 💁♂️ Other nice CSS Grid Demos by Olivia include a Floor Plan and an Excel Spreadsheet