Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

NFT preview component card

Nika• 40

@NIKAKL

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is there a way to change the shadow radius without changing changing the radius of the whole card element? I tried wrapping the card element in another div and creating a shadow there but it didn't seem to work. Any tips?

Community feedback

@faruking

Posted

I am not sure there is an official way to that because according to web docs: "If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners". Source

However, there is a way to go about it. create 2 card class(instead of one) and make sure one is atop the other(one is visible and the other is not) by setting the position of the first card to 'absolute'. Then add box-shadow and border-radius to the one behind while setting a different border-radius for the one at the top.

Here is a codepen example

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord