Useful CSS one-liner trick


There is the grayscale filter in CSS that can make your pictures completely grayscale.

It's useful when you want to show a bunch of logos, making them grayscale by default, but when you hover over them, they become colorful.

But!

Another trick is to use grayscale on the tag. This way you can look at your app from a different perspective and see how it looks without colors.

This is useful if you want to see what draws users' attention most, whether such elements as links, buttons, and other interactive elements are recognizable without colors.

Have a nice week!

Victor Ponamariov

I'm a full-stack developer that is passionate about good user interfaces. In my newsletter, I talk mainly about UI/UX stuff. You could expect an email or two in a month, I'm not aiming to spam you with non-useful info.

Read more from Victor Ponamariov

Live and learn. Either CSS is developing so fast, or I'm so slow, but I feel like I knew 80% of CSS in 2015, and now I know at most 50%. Today we'll talk about env function in CSS. Yeah... there are environment variables in CSS, just like in NodeJS 🤯 The env() CSS function can be used to insert the value of a user-agent defined environment variable into your CSS. The syntax is simple: env(<environment-variable>, <fallback>) But what kind of environment variables do we have and how can we use...

When I first dived into the topic of colors, it seemed to me that I was at least studying nuclear physics. It still does, though. 😅 Disclaimer: I might have some inaccuracies in this article. Sometimes I used definitions provided by Google AI, because it was challenging for me to convey/explain the ideas with precise words. But mostly there are links and definitions from Wikipedia and other resources. There are many notions and abbreviations: CIE 1931, RGB, sRGB, HSL, CMYK, Oklab, LCH, OKLCH,...

I found a perfect example of a landing page that has a lot of mistakes. There are around 30 things to fix! If you want me to review yours, reply to this email :) Before I flood you with pictures, I would love to see you on my Instagram. It's a perfect place to record short tips and personal life as well 😊 Now, let's get to our MEGA ROAST. Hero Section First goes the hero section. Here is a brief list of mistakes (which you will see in other sections as well): Contrast. The green logo on the...