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.
A CSS feature you should know
|
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( But what kind of environment variables do we have and how can we use them? Here is a good example. safe-area-inset-*Here is the definition of the group of safe area variables safe-area-inset refers to a group of CSS environment variables (safe-area-inset-top, -right, -bottom, and -left) used to ensure web content is not obscured by device-specific UI elements like display notches, rounded corners, or system navigation bars. But it's easier to show than tell.
So these variables basically hold paddings so that you can avoid such problems with your content being covered by the notch of an iPhone device, for example. In the case of a web browser, these variables will probably equal zero. If a variable is not defined for a specific device or application (the environment where the code is executed), you can use a fallback value instead. Here is an example of how you can add top padding. And here is how it can be done with Tailwind classes. 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.
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,...
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 <html> 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...
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...