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

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...

Some people have trouble with the login screen. It's just a simple form, and putting two inputs in the middle of the screen feels boring. But there is a good way to make it look great. So, this is what you usually have. There are some other things, like social login and a sign-up link, but that's the basic idea. What you can do instead is to split the screen into two parts. One part is designated for the login form, while the other part can be used for any content you choose. Usually it's...