View profile

The DOM Artist - The :not() selector, a new CSS Art Challenge and more!

Braydon Coyer
Braydon Coyer
Let’s talk about some cool new CSS additions, my new Community Wall, the April CSS Art Challenge (win a month of Frontend Mentor PRO!) and discover some amazing content from the community!

Hi everyone and welcome to the 35 new subscribers who have joined since the last issue went out in March!
Have you been keeping up to date with the buzz in the CSS community? No worries if not - but let me tell you, there’s a lot to be excited for! From container queries, to the board support of the :not() and :has() selectors, it’s an exciting time to be a front-end developer!
Speaking of which, one of my favorite selectors is the :not() selector. It’s extremely versatile and I find myself using it more and more.
Here’s a simple example:
Say that you have styles for a primary button and also styles for a button if it’s disabled, with both sharing the same base .button class. How would you change the background color of the primary button when in :hover state without affecting a primary button that is disabled?
Styles for the primary button, and styles for the button when disabled.
Styles for the primary button, and styles for the button when disabled.
This may look fine at first glance, but if you hover over a disabled primary button, the background changes as if you were hovering over an active primary button.
The :not() selector makes this a quick fix - check this out!
Only apply the background to primary buttons if the button is NOT disabled
Only apply the background to primary buttons if the button is NOT disabled
Isn’t that cool? And it’s very easy to understand - reading this rule left-to-right is painless.
🚀 Portfolio Changes and Additions
I’ve shipped a few new changes to my website since last I wrote to you, with the biggest addition being the Community Wall! Sign in with GitHub and leave me a comment, note or suggestion and interact with the community on my portfolio!
Braydon Coyer
✨ Introducing the Community Wall! ✨

You can now log in and leave me a comment, note or suggestion and interact with the community on my website!

Give it a try!
https://t.co/dNPePAf4aV https://t.co/lX3p1ZWNlU
There’s a few other smaller changes and features on my blog, including snap scroll behavior on articles tags, and an overhaul of the font families on the website. If you want to keep up to date with what’s new on my website, I have a changelog page for your convenience!
🎨 The April CSS Art Challenge
Last month I launched CSS Art Challenge - a monthly community-based event that encourages developers to expand their CSS skillset by creating CSS Art and winning prizes.
The April challenge is live and you could win a month of Frontend Mentor PRO! I’d love to see your submissions! Hit me on up Twitter and showcase your work!
CSS Art Challenge
Here we go! 🚀

Introducing the April CSS Art Challenge - Particles!

This month, create a CSS art piece that utilizes particles to enhance the scene!

Additional challenge details 🧵 https://t.co/i8cpToDuqB
📚️ What I'm Writing
I’ve released 2 new articles since my last email to you, with 3 more lined up and ready to be published in the coming weeks.
The Powerful CSS not Selector
How to Enable Preview Mode in Next.js for your CMS
💫 Content from the Community
One of the brilliant things about being a developer on Twitter is that you get to cheer for other developers and learn from their informative articles, explore their stunning side projects, and witness their amazing achievements. Here are a few things I found over the last few weeks that I thought were super cool or helped me in some shape or form.
Alex shipped the new website for Pixel Point! The new animations are absolutely stunning, providing a fun and engaging experience and you scroll throughout the page!
Alex Barashkov
Our new website is live 🔥🔥🔥 - https://t.co/bky5yrTCIV
In love with new animations that we've built with @rive_app and @framer motion. Had a lot of fun working on it.

Powered by Gatsby and Tailwind CSS. https://t.co/2A4dlXxAHL
Next up, Ryan features his Greensock skills by creating a non-repeating marquee!
Ryan LaBar
Motion Tip Monday: Expanding last weeks @greensock no repeated content looping marquee: What if you have different width elements (like words)? #FrontEnd #javascript #creativecoding #webdev

Check the @CodePen - https://t.co/P7gcMW0Wgf https://t.co/R73rA8Ets6
🙌 Wrapping Up
As always, thanks for reading and being part of this community!
I’ll speak with you in May (though, it may be a bit late; we’re moving to our first house! 🎉)!
Did you enjoy this issue? Yes No
Braydon Coyer
Braydon Coyer @BraydonCoyer

A periodic update about my life, recent blog posts, how-tos, discoveries, and amazing content from the community!

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.