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

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

19 days ago • 3 min read

Some people have trouble with the login screen. It's just a simple form, and putting two inputs in the middle of the screen feels boring. But there is a good way to make it look great. So, this is what you usually have. There are some other things, like social login and a sign-up link, but that's the basic idea. What you can do instead is to split the screen into two parts. One part is designated for the login form, while the other part can be used for any content you choose. Usually it's...

about 1 month ago • 1 min read

Take a look at the picture on the left. Can you consider this an objective rating? I guess not, since we don't know much about the number of reviews, how many are really bad (1 star), and how many are really good (5 stars). How is the rating calculated, after all? Does it consider only the latest reviews or all historical data? Many questions. No answers. When displaying ratings, there are several factors to consider: Display the total number of reviews. If there are only three reviews, it's...

about 1 month ago • 1 min read