profile

Victor Ponamariov

Drop shadow vs Box shadow

Published 11 months 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

I've been skimming through my list of topics to cover and found an interesting CSS property that’s especially useful when you need to highlight a specific phrase inside a block of text. Normally, when a text block breaks into multiple lines, the browser treats the whole element as a single box — which often results in broken or inconsistent styling. So this code: Results in the following styling: To fix that, all you need is: box-decoration-break: clone; It tells the browser to treat each...

3 days ago • 1 min read

I've just gone through some of the screenshots I collected over the past few months. I’d like to share one of them with you. I don’t have a universal solution for rating UX. What I want to share is this thought: sometimes people come up with a great solution, but due to human nature, lifestyle, or whatever-you-want-to-call-it, the solution ends up becoming useless. I remember reading news about a new law that limits the number of SIM cards a person can buy. Many people use them for fraud, or...

27 days ago • 1 min read

I apologize for being absent. For the past ~2 months, I've collected quite a lot of topics for newsletter issues; hopefully, you will like them. Today I want to share with you a screenshot from my bank app and make a quick review of the problems it has. In my humble opinion, of course. Here we go. There are quite a few problems: 1. Separated from each other, the expiration date, card number, and security code are all part of the card credentials. The thing is, if you need to see card number,...

about 1 month ago • 1 min read