Scroll Progress, Slick Sliders, and a CSS Eclipse

This week's CodePen community highlights include a deep dive into the Scroll Progress Timeline from Michelle Barker, a Slider.js-powered carousel from kristen17, and a CSS solar eclipse from Yoav Kadosh.

The easiest, fastest, and safest way for developers to build the ideal data file import experience

The Flatfile Data Exchange Platform provides developers an easy, fast, and secure way to build an ideal solution for importing CSV, Excel, or other data files, without compromising on flexibility. With Flatfile's API-first, event-driven architecture, developers can build fully customizable, powerful workflows that address any file-based import use case.

Start now, it's free
Solar Eclipse ☀️ (Pure CSS)
Yoav Kadosh shares a CSS solar eclipse "made with 18 layers of linear, radial & conic gradients. A "rotate" animation is applied to certain layers to move the rays." With static gradients from Yoav's gradient tool
Rich library of APIs combined with event-driven architecture
The Flatfile Data Exchange Platform is from the ground up designed on an open, API-first and event-driven architecture that easily fits into most tech stacks. Its rich library of APIs and code-based plugins for file-based data imports, validation, transformations, and workflows is uniquely powerful, providing development teams with ultimate customization and extensibility options.
kristen17 cooks up a delicious bit of UI for a restaurant site with this slider.js powered image carousel.
Scroll progress animations in CSS
Take a deep dive into the Scroll Progress Timeline in this detailed tutorial from Michelle Barker for MDN. Click the "see full example" links on the demos to get into the Pens and put what you learn into action.
Highly intuitive data import experience designed for end users
The platform provides an easy to use and intuitive user experience throughout the data import, matching, cleaning, and validation process. This includes workbook-style data editing, AI-assisted data-file importing, or protected microsites for secure collaboration.
CSS-only Flower Mask
Temani Afif crafts a bouquet of pretty floral photo masks with a nice slowed-down rotation effect on hover.
Tilting Cup
Wakana Y.K. pours us a glass of Three.js fun with this tilting cup. Check out the reflective details in the cup and the water as it moves.
Lewis Lane animates a trippy grayscale spiral reminiscent of vintage computer graphics in CSS & JS. Inspired by a gif by the legendary digital artist beesandbombs.
Randomness in CSS using trigonometry
Get a primer on randomness and pseudo-randomness in CSS trigonometry in this approachable tutorial from hypersphere, complete with great Pen embeds that really help illustrate the concepts.
Advanced data import functionality
Flatfile provides developers with all the tooling they need - from collecting any file type from any type of data source to AI-powered data matching, automated formatting, cleaning and validating data, to human-in-the-loop reviews and approvals.
Water Wave Filling Box with Animation
Move the range slider and watch the water rise in this interactive CSS & JS animation by Praveen Puglia.
Iris Door (fangs)
Josetxu crafts a sci-fi portal with a sinister edge in CSS. Hover the door to watch its fangs open and close. Then, check out the star and hexagonal variations.
Hover or tap around to fill the screen with luminous rainbow particles in this PIXI & Victor.js infused Pen by Steve Gardner.
Cell Rest
Juan Antonio Ledesma shares a subtly glowing "cell" that moves between a state of rest and agitation in this hypnotic SVG, CSS, and JS animation.
Circular Text with CSS Trig
Jhey Tompkins shows his progress through several attempts to place text along a circular path in this collection of Pens complete with a very satisfying final result!

Chris’ Corner

A collection of web design and development news and thoughts from CodePen's own Chris Coyier.

The <table> is one of the grand enemies of responsive design. They don’t wrap (that wouldn’t make much sense) so they can “blow out” the width of a mobile device pretty easily. The overflow property also doesn’t work on them. So you gotta find a way, and it really depends on the data. Sometimes a row of table data is pretty independently useful (imagine a row of employee data) so making all the <tr> and <th>/<td> element display: block and stacking them works. But that doesn’t work for data that needs to be cross-referenced. I think there are 3-4 other patterns that involve shuffling the data around to be more narrow-screen friendly. The old group of jQuery plugins Tablesaw from Filament Group showcase some of them.

Lately, I find rather than dig around for a display-altering solution, people just wrap the table in a <div> and let that <div> have overflow. So now you’ve got a table that you can scroll/swipe around without really changing how the table looks. I find myself consulting Under-Engineered Responsive Tables by Adrian Roselli on how best to do that regularly.

Ryan Mulligan has a cool take as well in Full-bleed Table Scrolling on Narrow Viewports. The “full bleed” part means using the edge of the browser window. Which you might otherwise not! Typically there is padding on the left/right (“inline”) edges of content, which would also be limiting the width of the table.

An example of a full bleed table scrolling on a narrow viewport.

The blue line in the screenshot above shows the padding on the column of content, which limits the width of the content inside there, but the table is explicitly pulled out from it to the edge. It’s a little thing but it’s classy!

Josh Comeau’s tutorial Animated Pride Flags has lots of fun things to learn along the way of creating a controllable version of this:

animation of a waving pride flag.

Notice that staggering is a big part of the look here. That happens with slightly different values to animation-delay. Since Josh used React to created the DOM for this, the loop can output those values as inline styles and use the number of iterations that map provides to stagger the value.

But wait! Maybe CSS should be helping us here, rather than us having to invent our own way to stagger things, right? That’s what the sibling-count() and sibling-index() proposal is all about. I’m a fan.

Josh’s tutorial basically just starts here and then covers more and more details. I especially like the bits of also stagging how much any given column “billows”, which is another use-case of staggering a custom property value. Also don’t miss the bits about double-stop color gradients and rounding width values to prevent awkward pixel gaps.

How should I mark this up? is always fun trivia. For me, anyway, I’m a very exciting person. Sometimes HTML has pretty cut-and-dry right and wrong ways to do things, but sometimes it doesn’t. There are differents ways with styling tradeoffs, accessibility tradeoffs, amount of markup tradeoffs, etc.

Lea Verou found a good one in What is the best way to mark up an exclusive button group? In other words, a group of buttons where only one can be active at a time. A multi-toggle? Lea, and plenty of other people, assumed that a group of <input type="radio"> is the right answer (only one radio button can be active at once), and then style them like buttons. I thought about <select> too which can only have one active choice, but no way are you going to be able to style that as buttons, even with the wildly more styleable <select-menu>.

Léonie Watson stepped in with advice that essentially boiled down to: if it looks like a <button>, you should use <button>, so there isn’t “a mismatch of expectations in terms of keyboard interaction and shortcuts.” Interesting!

Lea thinks maybe we need a <button-group>. Again, I’m a fan. I would have even kept <hgroup> around, me, for grouping multiple headers.

Have you heard this (correct) advice? Placeholders aren’t labels. Like, don’t do this:

<input type="text" placeholder="Your Mastodon Profile" />

Do this:

<label for="mastodon-profile">Your Mastodon Profile>/label>
<input type="text" id="mastodon-profile" placeholder="" />

A placeholder can be a little bonus hint or something, but even then, if that hint is important it should be accessible text which placeholder text is not.

I’m thinking of that because I saw Stanko Tadić’s CSS only floating labels. Floating labels is a pattern where text that looks like placeholder text (text within the input) moves away from the input but remains visible. This has gotten a bit easier as of late with the :placeholder-shown pseudo-class.

Animation of form field labels floating when their field is hovered.

What I like about the floating label pattern is that it continues to use <label>, so the accessibility remains. It’s also just kind of clever and fun. What I don’t like about it is that I don’t think it does anything truly useful. I’ve heard proponents of it say that it “saves space” because the label is inside the input. But it’s only inside the input until it’s focused, then it moves out, and it moves out to somewhere where it needs to remain visible and have space. So……… why don’t you just put the labels where they move out to in the first place? Kinda feels like movement, for movement’s sake.

If you haven’t tried to create a password with Neal Agarwal’s * The Password Game yet, you really should give it a crack.

Gameplay from the password game. The player has failed to meet rule 11, 'Your password must contain today's Wordle answer.'
Lol. And there is plenty to go even after this stage.

You can adjust your email preferences any time, or instantly opt out of emails of this kind. Need help with anything? Hit up support.