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

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

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

about 2 months ago • 1 min read

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

3 months ago • 3 min read