Styling Scrollbars with CSS: The Modern Way to Style Scrollbars

Since the early days of the web, customizing the browser’s scrollbar has proven to be very difficult to standardize across major browsers. Fortunately, on September 2018 a W3C Working Draft called CSS Scrollbars was released that looks like a viable way to finally accomplish this! Turns out the ::-webkit-scrollbar-* pseudo selectors (which never were a …

Playing With Particles Using the Web Animations API

Louis Hoebregts writing for CSS-Tricks When it comes to motion and animations, there is probably nothing I love more than particles. This is why every time I explore new technologies I always end up creating demos with as many particles as I can. In this post, we’ll make even more particle magic using the Web …

Indicating Scroll Position on a Page With CSS

Scroll-based features tend to involve some bespoke concoction of CSS and JavaScript. But what if we could accomplish something that only uses CSS? Take this ingenious horizontal scrollbar with CSS, for instance. I want to do something similar, but to indicate scrolled sections rather than capture continuous scrolling. In other words, rather than increasing the …

classnames-components – A classnames component wrapper to speed up styling React components

Geoffrey has created a handy package to quickly create React components that are built of an element with some CSS classes applied to them. Handy for when you’re working with CSS libraries such as Tailwind. import cc from 'classnames-components'; // using arguments const Header = cc('h1')('font-sans', 'text-3xl'); // using an array const Intro = cc('p')(['font-serif', …

Multi-line Highlights in CSS

These lines aren’t injected using ::after or the like, but are done via backgrounds. The key CSS property you’re looking for is display: inline; though, as set on the p elements; without it, it won’t work. That last swipe effect also uses box-decoration-break clone; so that each line animates in parallel.

A Practical Overview Of CSS Houdini

Adrian Bece writing for Smashing Magazine: Houdini, an umbrella term for the collection of browser APIs, aims to bring significant improvements to the web development process and the development of CSS standards in general. Frontend developers will be able to extend the CSS with new features using JavaScript, hook into CSS rendering engine and tell …

Positioning Text Along a Path with CSS

Michelle Barker has used CSS Motion Path to align text along a path: The “Motion Path” name is a little misleading, as it doesn’t only relate to movement. In fact, although the specification still goes by the name “Motion Path”, the property used to define the path was changed from motion-path to offset-path. It’s easy …

Crafting a Cutout Collage Layout with CSS Grid and clip-path

On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say: What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path …