Skip to main content
CSS is fun and cool and I like it.
Article

Let’s Make a Multi-Thumb Slider That Calculates The Width Between Thumbs

HTML has an <input type="range">, which is, you could argue, the simplest type of proportion slider. Wherever the thumb of that slider ends up could represent a proportion of whatever is before and whatever is after it (using the value and max attributes). Getting fancier, it’s possible to build a multi-thumb slider. But we’ve got another thing in mind today… a proportion slider with multiple thumbs, and sections that cannot overlap.… Read article “Let’s Make a Multi-Thumb Slider That Calculates The Width Between Thumbs”

Article

CSS-Only Carousel

It’s kind of amazing how far HTML and CSS will take you when building a carousel/slideshow.

  1. Setting some boxes in a horizontal row with flexbox is easy.
  2. Showing only one box at a time with overflow and making it swipable with -webkit-overflow-scrolling is easy.
  3. You can make the “slides” line up nicely with scroll-snap-type.
  4. A couple of #jump-links is all you need to make navigation for it, which you can make all nice and smooth with scroll-behavior.
Read article “CSS-Only Carousel”
Article

Multi-Thumb Sliders: General Case

Read article “Multi-Thumb Sliders: General Case”
Article

Multi-Thumb Sliders: Particular Two-Thumb Case

This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is that CSS got better — and so have I, so I recently decided to make my own 2019 version.

In this two-part article, we’ll go through the how, step-by-step, first building an example with two thumbs, then identify the issues … Read article “Multi-Thumb Sliders: Particular Two-Thumb Case”

Article

Simple Swipe with Vanilla JavaScript

I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.

This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let’s jump right into it!… Read article “Simple Swipe with Vanilla JavaScript”

Article

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable.… Read article “Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input”

Article

You can get pretty far in making a slider with just HTML and CSS

A “slider”, as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to … Read article “You can get pretty far in making a slider with just HTML and CSS”

Link

Carousels Don’t Have to be Complicated