Pausing a GIF with details/summary
This is the neatest trick I’ve seen in some time. In this demo, Steve Faulkner creates a way to effectively pause a gif by wrapping the image in <details>/<summary> and positioning those elements on top of an image, like this:
Chris then went ahead and made another version in which he replaced the GIF with the images so that the animation is paused by default. And also that GIF is lazy loaded in, which could potentially be much better for performance.
The details and summary elements are designed to let you show/hide content like an accordion but this sort of demo makes me feel like this is the new checkbox hack, where a relatively simple bit of HTML can do a ton of outlandish and bizarre things.
Event listeners that fire only once
I didn’t know that this was possible: Manuel Matuzović shows how to make an event listener fire only once:
The button in Manuel’s example will now only fire the alert once, no matter how many times you click it afterwards. Pretty neat!
A fancy web-book-thing
The other day Robin Sloan published his latest book project, Annabel Scheme and the Adventure of the New Golden Gate, but the interesting thing to note here is how you navigate through the book, as it’s sort of like a slideshow:
There’s been a ton of attempts to make bookish-horizontal-scrolling on the web but nothing has ever felt quite as good as this before. It’s responsive, works with touch just as good as it does on scroll, and it doesn’t feel like a gimmick at all.
If you view source, you’ll see the layout is done with CSS columns, but there is still a medium-sized cup of JavaScript in there to handling the page turning. It’s worth noting that CSS is so close to being able to handle this mostly on its own. Jason Pamental experimented with that on his book experience, and I found that if CSS just supported either of these two things we’d be a lot closer:
• Allow scroll snapping to work on columns
• Have some kind of CSS regions that is capable of auto-generating repeating block-level elements as-needed by content
But that doesn’t help with click-to-turn pages, so maybe this kind of experience is destined to be JavaScript-powered forever.
Also, I think Robin Sloan’s book UI design is cool and weird:
Speaking of book things… this 3D book generator is pretty cool:
Hey might as well huh?
Nice look, Bustle.
I really like the design of bustle.com. The big banner! The overlapping type! The reduced colors and focused typography! But not only that: the loading animations, the full page menu, the speed and overall snappiness of things.
I’ve noticed this trend lately where a lot of magazine-styled designs are making their way, slowly, onto the web. And I, for one, am thoroughly excited.
Color theme switcher
Here’s a great example of how powerful CSS custom properties are: Max Böck made this fabulous color theme switcher that is based on the styling of Mario Kart levels.
The extra nifty thing about this is how Max built this thing. All the color values are stored in a JSON file and then Max iterates over that file via Eleventy to create a CSS file with that data
A Font-Like SVG Icon System for Vue
Icon fonts aren’t great for a bunch of reasons but the reason why they’re still fairly common is that they’re pretty easy, at least in comparison to a complex SVG build system and what not. Well, in this post Kevin Lee Drum has written a great tutorial about how to make an easy font-like SVG icon system in Vue:
Here is what my ideal icon system looks like:
– To add icons, you just drop them into a designated icons folder. If you no longer need an icon, you simply delete it.
– To use the rocket.svg icon in a template, the syntax is as simple as .
– The icons can be scaled and colored using the CSS font-size and color properties (just like an icon font).
– If multiple instances of the same icon appear on the page, the SVG code is not duplicated each time.
– No webpack config editing is required.
All of this sounds swell, and the way he goes about making it is to create a single SVG sprite that can then be accessed like this:
<svg><use xlink:href="#rocket" /></svg>Using flexbox and text ellipsis together
This post from Leonardo Faria is excellent because it cleans up some confusion about flexbox and min-width. Let’s say you wanted an element on a webpage to behave in the same way as this gif:
To do this we need to focus on the min-width CSS property. By default it is set to auto and we need to set it to 0, as Leonardo explains. It’s definitely worth checking out this post because I’ve bumped into this snag in the past, too.
Sponsor
Tomorrow is WooCommerce Day!
You’re not going to want to miss it. This is the biggest sale WooCommerce does each year, so if you’ve been waiting for the best deals on extensions and themes to enhance your WooCommerce store, then July 28 is the time to snag them! Get an early jump and stock your cart now so you’re ready for the big day.
[Chris]: Bryan Braun was inspired by a “mechanical sign” that had “pixels” that could flip between black and white to make designs to build Checkboxland. HTML checkboxes are on or off allowing for that same ultra low design fidelity look. You can pass in a big ol’ array of Boolean values and it will render them.
Well, I should say Integer values, as it supports indeterminate checkboxes too with a 2 value. Then the real fun starts with the Extended API which does things like characters printing, marquees, and transitions.
