It looks like the solution is to use a spring connector. This one is robust; you cannot break it! 🦾

https://css-tip.com/spring-connector/

#CSS #HTML

RE: https://mastodon.social/@csstricks/117553081888051087

📝 New CSS Article!

I decided to re-implement the :nth-child() selector using modern features because why not?

#CSS #HTML

RE: https://mastodon.social/@csstricks/117553081888051087

📝 New CSS Article!

I decided to re-implement the :nth-child() selector using modern features because why not?

#CSS #HTML

Maybe the connector below is more robust?

Still not...

#CSS #HTML

@css Challenge for you: make it into a line that slacks under gravity, so infinitely stretchy, but the arc can be tricky to calculate maybe? And could be interesting to also try making it swaying a bit when moving things around haha.

Bending and stretching a line is good (https://css-tip.com/bending-line/), but let's try something more mechanical: a foldable Zig-Zag connector.

https://css-tip.com/zig-zag-connector/

Be careful, it's not as robust as a stretchy line, so don't ... too late, it's broken now 😣

A CSS-only low-quality connector 🫠

#CSS #HTML

📝 New CSS Article!

Learn how I combined Anchor Positioning, border-shape, and other modern CSS features to create the connection below.

https://blog.master.dev/two-circles-one-connection-and-border-shape/

That's the simplest example. Another article will cover more complex ones!

The future of CSS is awesome. 🤩

#CSS #HTML

💡 CSS Tip!

random() + shape() + confetti = fancy shape explosion 🎉

https://css-tip.com/shape-confetti/

A CSS-only fun (and useless) demo powered by modern features.

#CSS #HTML

💡 CSS Tip!

random() + shape() + confetti = fancy shape explosion 🎉

https://css-tip.com/shape-confetti/

A CSS-only fun (and useless) demo powered by modern features.

#CSS #HTML

CSS-Tricks is an independent site once again!

https://css-tricks.com/css-tricks-has-a-new-owner/

Confetti Shape Explosion. Good? bad? 👀

#CSS #HTML

More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value.

curve, wave, zig-zag, arc ... Which one do you prefer?

https://css-tip.com/shaped-range-slider/

0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)

#CSS #HTML

More range sliders with fancy shapes? Let's go! This time with a tooltip showing the value.

curve, wave, zig-zag, arc ... Which one do you prefer?

https://css-tip.com/shaped-range-slider/

0% JavaScript and 100% CSS magic (border-shape, shape(), scroll-driven animations, and more!)

#CSS #HTML

💡 CSS Tip!

Another cool shape that works well with random(): wavy dividers!

https://css-tip.com/random-wavy-shapes/

Each visitor gets their own wavy shape for a unique experience.

#CSS #HTML

💡 CSS Tip!

Another cool shape that works well with random(): wavy dividers!

https://css-tip.com/random-wavy-shapes/

Each visitor gets their own wavy shape for a unique experience.

#CSS #HTML

📝 New CSS Article!

With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count().

Strange? Confusing? What the heck am I talking about?!

Read my latest article 👇

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/

#CSS #HTML

📝 New CSS Article!

With Scroll-Driven Animations, you can transfer a value from one element to another anywhere on the page. I am using it to implement children-count().

Strange? Confusing? What the heck am I talking about?!

Read my latest article 👇

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/

#CSS #HTML

💡 CSS Tip!

Want to know how many children your container has? We don't have children-count() yet, but we can implement it using modern CSS!

https://css-tip.com/children-count/

A hacky experiment powered by Scroll-Driven Animations.

How would you use it? Share your use cases 👇

#CSS #HTML

a11y question: Let's suppose I have an empty html element somewhere on the page with 0 content, invisible*, having position:absolute (or fixed). It has no purpose in the HTML (only used for some CSS stuff).

Is it a good idea to add the "inert" attribute? Or should I do nothing?

* It may or may not have a size, but no style to make it visible.

#A11y #HTML

💡CSS Tip!

Creating CSS Shapes is one of my favorite tasks, and now I can do something even better: Random CSS Shapes!

Let's start with Blobs.

https://css-tip.com/random-blob/

You never see the same shape twice. A unique shape for a unique experience! 👀

#CSS #HTML