🔨 Quick Wins for Devs - 12 Powerful CSS One-Liners
Tags: css, webdev, design, beginners
Published: 2024-02-02 20:53:53


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

🌟 Five Roles Shaping the Future of Design  
📐 Utopian SCSS - Crafting Perfect Type & Space Scales  
✍️ Scroll Magic - Line Drawing Effects

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

Sponsored by  [20i®](https://go.unicornclub.dev/20i)

## [20i® Managed Cloud Hosting](https://go.unicornclub.dev/20i)

[![](http://unicornclub.dev/wp-content/uploads/2024/01/20i-Managed-Cloud-Hosting.jpeg)](https://go.unicornclub.dev/20i)

Easily build, deploy & manage all your sites across lightning-fast, multi-platform  [Managed Cloud Hosting](https://go.unicornclub.dev/20i). Perfect for designers, agencies, ecommerce & side-hustlers.

[Deploy from only $10.99/mo](https://go.unicornclub.dev/20i)

### 🧑‍💻 Dev

[**Utopia SCSS library**](https://utopia.fyi/blog/utopia-core-scss/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Generate Utopian type & space scales directly in SCSS.

[**Draw on Scroll**](https://garden.bradwoods.io/notes/svg/draw-on-scroll?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

How to create a line drawing effect on scroll using SVG clip-path.

[**My take on fading content using transparent gradients in CSS**](https://polypane.app/blog/my-take-on-fading-content-using-transparent-gradients-in-css/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The effect looks great but it has two downsides: The text behind the gradient is no longer selectable. The effect only works on solid background colors.

[**12 Modern CSS One-Line Upgrades**](https://moderncss.dev/12-modern-css-one-line-upgrades/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.

### 🎨 Design

[**Five Future Roles for Designers**](https://jarango.com/2024/01/21/five-future-roles-for-designers/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

AI will change things in unimaginable ways. And I’m not talking about AGI, which still feels like something of a chimera.

[**HermanMiller - Identity guidelines**](https://brandstandards.hermanmiller.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Solutions that stand the test of time always start and end with people. This cornerstone of human-centered design has guided us for a century.

### 🔥 Promoted Links

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

[**Get Smarter About AI and Tech in 5 mins.**](https://go.unicornclub.dev/techpresso)

Receive a daily summary of the most important AI and Tech news, carefully selected from 60+ media outlets.

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

Upskill your API hacking tradecraft, and get exclusive access to API hacking articles and Weekly pro tips and snippets.

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

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