🎨 Pixel-Perfect Positions - New CSS Feature "Anchor Positioning"
Tags: css, ux, html, resources
Published: 2024-04-17 19:00:51


**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](https://go.unicornclub.dev/webflow-agency)

## [Accelerate your agency’s growth](https://go.unicornclub.dev/webflow-agency)

[![](http://unicornclub.dev/wp-content/uploads/2024/04/unicorn-club-agencies.jpg)](https://go.unicornclub.dev/webflow-agency)

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 →**](https://go.unicornclub.dev/webflow-agency)

---

### 🦄 This week's best

[**How would you build Wordle with just HTML & CSS?**](https://scottjehl.com/posts/wordleish/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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!**](https://dev.to/warkentien2/curious-geckos-the-most-precise-css-only-position-aware-mini-game-16i2?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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

[**Animated Tab Bar Using HTML and CSS**](https://dev.to/withaarzoo/animated-tab-bar-using-html-and-css-free-source-code-51e5?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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**](https://frontendmasters.com/blog/drawing-a-line-to-connect-elements-with-css-anchor-positioning/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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**](https://kizu.dev/layered-toggles/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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**](https://danburzo.ro/responsive-images-html/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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**](https://uxdesign.cc/rethinking-personas-empathy-and-inclusion-in-ux-design-37145d2ee807?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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](https://unicornclub.dev/sponsorship#classified-placement)._

[**Get smarter about Tech in 5 min**](https://go.unicornclub.dev/techpresso)

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](https://preview.mailerlite.io/preview/146509/emails/118799130261718566)

📨 Recommend friends to  [subscribe](https://unicornclub.dev/)

📢 [Sponsor](https://unicornclub.dev/sponsorship)  or book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)

☕️ [Buy me a coffee](https://www.buymeacoffee.com/adammarsdenuk)

_Thanks for reading ❤️  
[@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK)  from Unicorn Club_