๐ŸŽจ Pixel-Perfect Positions - New CSS Feature "Anchor Positioning"

Adam Marsden - Apr 17 - - Dev Community

Hey ๐Ÿ‘‹ I hope you're having a great week. Here's a quick look at this week's newsletter:

๐ŸŽฎ Build Wordle with HTML & CSS

๐Ÿ“ฑ Responsive HTML Secrets

๐ŸฆŽ Play the Gecko Mini-Game Without a Single Line of JS!

Enjoy this week's edition ๐Ÿ‘‹ - Adam at Unicorn Club.


Sponsored by Webflow

Accelerate your agencyโ€™s growth

Whether you need to win new business or wow an existing client, Webflow empowers agencies to deliver high-quality client work, faster โ€” without growing your dev budget.

Start building โ†’


๐Ÿฆ„ This week's best

How would you build Wordle with just HTML & CSS?

The approach I took for this example leans hard on HTML form validation for the game logic.

Curious Geckos ๐ŸฆŽ๐ŸฆŽ๐ŸฆŽ: The Most Precise CSS-only Position-Aware Mini-Game!

A CSS-only, no JS, no checkbox, position-aware (hover/touch aware) interactive gecko-luring pastime!

Animated Tab Bar Using HTML and CSS

In this tutorial, we will create an animated tab bar using HTML and CSS. This tab bar will feature smooth transitions and interactive elements, providing an engaging user experience.

Drawing a Line to Connect Elements with CSS Anchor Positioning

CSS Anchor Positioning provides a better way to position an element in relation to another element.


๐Ÿง  Fun Fact

The Color of Hyperlinks - Hyperlinks are traditionally blue for a practical reason. The earliest web browsers were limited in color display, and blue was chosen as the default hyperlink color because it was the darkest color and offered the most contrast against a white background, making it easy to distinguish.


Layered Toggles: Optional CSS Mixins

The next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers, available today in every browser that supports them.

How to think about HTML responsive images

The days with an immobilized knee are long and Iโ€™ve just read through the Images section of the HTML Standard, as one does, hoping to better understand how responsive images work.

Rethinking personas: Empathy and inclusion in UX design

By using more inclusive methods like Jobs-To-Be-Done and Empathy Maps, we can ensure a better understanding of the diverse user needs to create more meaningful and accessible products.

๐Ÿ”ฅ Promoted Links

Share with 2,000+ readers, book a classified ad.

Get smarter about Tech in 5 min

Get the most important tech news, tools and insights. Join 90,000+ early adopters staying ahead of the curve, for free.

Support the newsletter

If you find Unicorn Club useful and want to support our work, here are a few ways to do that:

๐Ÿš€ Forward to a friend

๐Ÿ“จ Recommend friends to subscribe

๐Ÿ“ข Sponsor or book a classified ad

โ˜•๏ธ Buy me a coffee

Thanks for reading โค๏ธ

@AdamMarsdenUK from Unicorn Club

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .