profile

Victor Ponamariov

Drop shadow vs Box shadow

Published over 1 year ago • 1 min read

Hello Reader,

For those who use Tailwind.
​
​drop-shadow and box-shadow are different things.

​
Sometimes people use drop-shadow when adding shadows to cards.
​
However, that might lead to real problems.
​
The reason is that drop-shadow (which uses the filter property under the hood) creates an isolated CSS context.
​
I couldn’t replicate the problem that I had in one of my old projects, but we had many cards, and inside the cards, there were dropdowns.
​
The problem was that neighboring cards were covering the dropdowns of other cards.
​
Another developer was trying to fix it by applying z-index for each card dynamically, and it seemed weird.
​
Then I asked ChatGPT what was going on, and it turned out that things like opacity or filters create an isolated stack.
​
I very cool example I found is from Shripal Soni. Awesome illustration!
​
The original post - https://lnkd.in/dQtnuhTx​

P.S. I've received a lot of feedback regarding my landing page. I plan to make an additional post about mistakes I made - it's okay, nobody is perfect and you should remember this.

If you're interested in the project I'm working on, check it out below. I'm still checking if there are enough people interested in this before I start.

Feel free to provide any feedback - I would really appreciate it!

​

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

5 days ago • 1 min read

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

3 months ago • 3 min read

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

3 months ago • 1 min read