Since CSS Level 2, CSS list-style-type has supported keywords like disc or decimal to define the appearance of the list item marker. Landing in Chrome 79, and also available in Firefox ever since version 39, is the ability to set it to an arbitrary string. Here’s a pen that demonstrates its behavior / usage: Let’s […]
Tag Archives: css
Change the marker of a list to any character with
Pure CSS Scroll Shadows (Vertical + Horizontal)
A long time ago (2012!), Lea Verou shared a way on how to add scrolling shadows to containers that needs scrolling. Using those shadows in a scroll container is a great UX thing, as they visually tell the user that the content is scrollable. Her code however, only worked with containers that scroll vertically. Based […]
Ship legacy JavaScript and CSS files in a Webpack Project with webpack-merge-and-include-globally
One of the projects that I’m working on is quite reliant on jQuery and Bootstrap. As we’re introducing new features (such as a few React-based components, and Stylus for CSS) in said project, we’ve also introduced Webpack into it. Now, we don’t want to run jQuery nor Bootstrap through Babel (using Webpack), but we want […]
Implementing Dark Mode on adactio.com
Jeremy recently implemented “Dark Mode” on his site. Tanks to CSS Custom Properties the implementation is pretty straightforward (also see my writeup here). But of course, Jeremy added some extra details that make the difference: In Dark Mode images are toned down to make ‘m blend in better, as detailed by Melanie Richards: @media (prefers-color-scheme: […]
Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)
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 […]
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 😉)