✨ Unveil the Magic – CSS Auto-Height Transitions!
Tags: webdev, css, javascript, design
Published: 2023-12-07 22:30:45

**Hey everyone** ✌️ Here's a quick look at this week's newsletter:

🌧️ Craft Rain with Code  
🎨 Maximize Your Design Reviews  
🌟 Marbla Typeface

Enjoy this week's edition 👋 - Adam at Unicorn Club.  

___

**Join 2,000+ People. Every Wednesday.**

**Carefully curated newsletter for developers, designers, and makers. 100% Free.**
 
[**Subscribe Today**](https://unicornclub.dev/)

___ 


Sponsored by  [API Hacker Inner Circle](https://go.unicornclub.dev/api-inner-circle-newsletter)

## [Join a community of developers, testers, and hackers](https://go.unicornclub.dev/api-inner-circle-newsletter)

[![](https://unicornclub.dev/wp-content/uploads/2023/11/Screenshot-2023-11-28-at-14.38.51.png)](https://go.unicornclub.dev/api-inner-circle-newsletter)

Upskill your API hacking tradecraft, and get exclusive access to:

-   Weekly API hacking articles
-   Weekly pro tips and snippets
-   Regular industry news and insights
-   Monthly review of my research and work

Subscribe today and get exclusive tips, tricks, and killer command line cheats to hack your apps and APIs.

It's skills development for the appsec guru in you, brought straight to your inbox. What could be better?  **No fluff. Just killer content.**

[Subscribe for Free](https://go.unicornclub.dev/api-inner-circle-newsletter)

---

### 🖌️ CSS

[**CSS trick: transition from height 0 to auto!**](https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

If you messed around with CSS for long enough, chances are you've tried at least once to make a transition from height: 0 to auto...

[**The `hanging-punctuation` property in CSS**](https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The hanging-punctuation property in CSS is almost a no-brainer. The classic example is a blockquote that starts with a curly-quote.

[**Drawing Raindrops with CSS Gradients and Masks**](https://css-irl.info/drawing-raindrops-with-css-gradients-and-masks/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

I started of thinking I could get away with just using background properties. That enabled me to create the raindrop shape, but creating the highlights was trickier.

### 🎨 Design

[**Get more out of design reviews**](https://grillopress.github.io/2023/11/26/get-more-out-of-design-reviews.html?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

I’ve reviewed a lot of designs. It’s a sign of healthy team that they share work to be reviewed. When I ran NHS Digital’s weekly design meet-ups I made sure to encourage this as much as possible.

[**Marbla - an experimental display typeface**](https://marbla.de/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Exploring the possibilities of variable fonts to change the mood and personality of a typeface.

### 🧑‍💻 Dev

[**Care beyond code: 7 best design practices for frontend developers**](https://evilmartians.com/chronicles/care-beyond-code-7-best-design-practices-for-frontend-developers?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

As a frontend engineer, it’s actually pretty easy not to think about the design of the project you’re working on.

### 🔥 Promoted Links

_Share with 2,000+ readers, book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)._

[**Your brand is your greatest asset**](https://go.unicornclub.dev/pushbrand)

With PushBrand, go from idea to brand and fleshed-out design system faster than you can say flexbox. Now in Private Beta. Unicorns warmly invited.

#### 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/106627508299892553)

📨 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_