Chris Bolson

A div that has a scooped out top left and bottom right corners, a notched top right corner, and a round bottom left corner.

A dive the looks a bit like a L that has been rotated 180deg

A div with a top left round corner, and a scoopped bottom right corner

A very strange looking shape. Almost like a circus tent, but with an extra rectangle added to the bottom right corner.

I remember how excited I was when border-radius became a thing... If only I'd know what would eventually be possible with it about 15 years later 😅

corner-shape takes border-radius to an all new level...

@cbolson.bsky.social has made a handy generator for it: www.corner-shape.com

One of my favorite recent pens - Custom Curved Scrollbars that follow the border radius of their container.

See the full demo on @codepen.io
codepen.io/cbolson/pen/...

#codepen,#scrollbar

Testing out the experimental CSS ::scroll-* pseudo elements to create interactive carousels with no JavaScript.
This demo pushes the idea by not even appearing to scroll. I have added a toggle to let you see the invisible scrolling elements.

See the demo on #codepen
codepen.io/cbolson/full...

Returning to your original question, aren't seconds or milliseconds the only valid units for keyframe animations?

They are valid units so calc() doesn't have an issue with them.
So, as they are the same unit, calc() is cancelling them out to give 0.5, just as calc(5px / 10px) will also return 0.5

On the other hand calc(5px / 10hz) will fail as the units are not compatible (at least it does in my tests)

Are the CSS frequency units Hz and kHz still supported?
MDN suggests not.

{⚔️} Day 166 of #CSSBattleDaily
I had a bit of fun with todays daily target 😂
cssbattle.dev/play/S777cDY... #CSSBattleChallenge via @cssbattle.dev

Using modern CSS functions to do math.
This uses attr() to get the values, if() to define the operation and function() to actually do the math. No JS.

See the code on #codepen
codepen.io/cbolson/pen/...

Using the CSS attr() function to define grid areas via data attributes.
See the code on #codepen
codepen.io/cbolson/pen/...

A digital countdown using styled range sliders.
Not very useful but fun to create.

See the full demo on #codepen
codepen.io/cbolson/pen/...

This hamburger icon menu expands from the corner and uses sibling-count() and sibling-index() to calculate the position of each button.

See the full code on #codepen
codepen.io/cbolson/pen/...

A modern Scrollspy using scroll-target-group and :target-current

See the demo on @codepen.io !

codepen.io/cbolson/pen/... #CodePen #CSS

Another demo using the CSS attr() function.
This one uses data attributes to define the percentages in a pie-chart.

See the full code on #codepen
codepen.io/cbolson/pen/...

Using the new attr() CSS function to define the target number and duration of a counter. No JS required.

See the full code on #codepen

codepen.io/cbolson/pen/...

Another demo using sibling-index() to delay the animation.

See the code on #codepen

codepen.io/cbolson/pen/...

I have now added more sliders to be able to control the second border-radius property. It can now generate even more interesting shapes!

An interactive demo of how corner-shape: superellipse() can be used to fine-tune the corners.
(Chrome only at the moment)

Full code on
@codepen.io
codepen.io/cbolson/pen/...

Experimenting with corner-shape, using the "bevel" value create hexagon avatars.
See the full code on #codepen
codepen.io/cbolson/pen/...

I'd love one if you can ship to 🇪🇸 😅

I can't wait for sibling-count() and sibling-index() to go baseline. They have so much potential!

In this demo I use them to dynamically calculate the position of the elements depending on the total number of elements and their index.

See the code on #codepen codepen.io/cbolson/full...

I'm not sure happened to the preview image on that one so here is a short video capture

Savor the Alphabet Soup Adapted from a previous logo animation idea: https://codepen.io/cbolson/pen/ExzVzpP Inpsired by the incredible Alphabet Soup by Justus Tumacde https:/...

Had some fun with this weeks #codepenchallenge
codepen.io/cbolson/pen/...
Random animated letters coming together to form a phrase

CSSBattle The funnest CSS game for web designers & developers

Finally managed to get in the top 10 on a #CSSBattleDaily with my best ever score of 720.37 😅
cssbattle.dev/play/e5B6sph...

I will admit that it always makes my day when I get one of my pens featured in the @codepen.io Spark newsletter.
😀
codepen.io/spark/437

I watched the first few minutes of this and paused it to be able to have a go at it myself without being influenced by their code or by the original code on Toni Lijic's website.
See the code on @CodePen
here:
codepen.io/cbolson/pen/...
Pure CSS, no JavaScript required

🔴 LIVE — @chriscoyier.net and I are reverse engineering a cool feature from Toni Lijic's site. come learn some complex CSS with me!
www.youtube.com/live/An3QMWg...

A CSS countdown to 2025 (with a dash of JS at the end).

Happy New Year everyone 🎉

See the code on @CodePen
codepen.io/cbolson/full...

Using animation-timeline to reveal the text.
One of my entries in #codepenchallenge last week.

See the code on @codepen.io
codepen.io/cbolson/pen/...

To celebrate reaching 500 followers on @codepen.io, I created a Pen dedicated to each one of my 500 followers.
Thanks for the follow 👍

codepen.io/cbolson/pen/...

One of my favourites from a few months ago.
I have just updated the code a bit to simplify the CSS, making better use of custom properties.
I have also added a container query to make it easier to test responsiveness.

See the full code on @codepen.io
codepen.io/cbolson/pen/...