Skip to content
Submitted over 2 years ago

NFT preview component card

Nika•40
@NIKAKL
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

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

  • Faruk Abdulganiyu•380
    @farukingPosted over 2 years ago

    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

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