profile

Victor Ponamariov

Drop shadow vs Box shadow

Published about 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

Here is a quick recap of all CSS prefers-* queries that you can use to adjust to user settings. Prefers Reduced Motion (95.57% global support) Indicates whether the user prefers less motion to avoid VIMS - Visually-Induced Motion Sickness. Here we disable any animations or transitions, but we can be flexible here (e.g., REDUCE motion but do not disable it completely) Prefers Color Scheme (95.16% global support) Detects whether the user prefers a light or dark color theme. In this example we...

9 days ago • 1 min read

Today we'll cover another CSS media query: prefers-reduced-motion, and how to load (or avoid loading) styles based on user preferences — this is genuinely cool stuff! I've just posted the same article on LinkedIn, for my first time. Accessibility concern There’s a condition called VIMS: Visually induced motion sickness (VIMS)—a subcategory of motion sickness that specifically relates to nausea, oculomotor strain, and disorientation from the perception of motion while remaining still. To...

21 days ago • 1 min read

After a rough patch, I’m getting back to writing. More practical stuff that you can apply directly in your projects. One topic that looks really good is how to use modern CSS to support UI/UX and accessibility. Preference Media Queries Preference Media Queries allow you to adapt your UI based on the user's system-level settings and personal preferences — like reduced motion, high contrast, or dark mode. They're mostly used to improve accessibility and user experience. Let's cover one of them....

25 days ago • 1 min read