S
SolidJS8mo ago
Eatham

Transparent Border styling is weird

Attached is my component. It has the following css properties
.card {
width: 175px;
height: 175px;
border-radius: 6px;
background:
radial-gradient(109.12% 79.52% at 47.71% 0%, rgba(175, 175, 175, 0.2) 0%, rgba(159, 159, 159, 0.2) 20%, rgba(36, 35, 35, 0.2) 45.5%, rgba(0, 0, 0, 0.7) 100%),
url('../../../assets/tree.jpg') lightgray center center / cover no-repeat;
border: 2px solid rgba(140, 15, 15, 0.5);
color: white;
padding: 16px;
font-weight: bold;
font-size: 16px;
display: flex;
flex-flow: column;
justify-content: end;
}

.card-bottom {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: normal;
}
.card {
width: 175px;
height: 175px;
border-radius: 6px;
background:
radial-gradient(109.12% 79.52% at 47.71% 0%, rgba(175, 175, 175, 0.2) 0%, rgba(159, 159, 159, 0.2) 20%, rgba(36, 35, 35, 0.2) 45.5%, rgba(0, 0, 0, 0.7) 100%),
url('../../../assets/tree.jpg') lightgray center center / cover no-repeat;
border: 2px solid rgba(140, 15, 15, 0.5);
color: white;
padding: 16px;
font-weight: bold;
font-size: 16px;
display: flex;
flex-flow: column;
justify-content: end;
}

.card-bottom {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: normal;
}
It is a border box (made border box default across everything in another css file). I wanted an effect where a transparent border would be on top of the image to make the object feel 3D. But for some reason the bottom border has some other style that confuses me. I am guessing it has something to do with the default browser styling. But Idk. Thanks
No description
16 Replies
REEEEE
REEEEE8mo ago
Looks like it's blending with something underneath Maybe the background is showing underneath
Eatham
EathamOP8mo ago
I have asked in other places. It fixes some things when I add 50% 50% / 100% 100% no-repeat to the end of the radial gradient. However doing so causes more issues. I want my border to be on top of the background and transparent. And adding the line results in the border not being placed on top of the gradient.
Eatham
EathamOP8mo ago
Image of doing so. With a more transparent border
No description
Eatham
EathamOP8mo ago
And you get some weird sharp corner issues. If you look at the bottom left of the image.
REEEEE
REEEEE8mo ago
You could try using a psuedo element and absolute positioning it over the card
Eatham
EathamOP8mo ago
That feels a bit hacky In figma it works perfectly
Eatham
EathamOP8mo ago
No description
REEEEE
REEEEE8mo ago
Well it's figma. Not an exact representation of what the browser will render They're using a canvas and custom rendering
Eatham
EathamOP8mo ago
Yeh, but it is what I am going for. Something like it where the border is just a subtle outline around the background
REEEEE
REEEEE8mo ago
Hmm, I dont see anything wrong with your implementation. Maybe try removing the radial gradient temporarily to see Is the card just a div?,
Eatham
EathamOP8mo ago
yeh I think it is partially due to the background image not covering the whole div
REEEEE
REEEEE8mo ago
Yeah it's probably that
Eatham
EathamOP8mo ago
No description
Eatham
EathamOP8mo ago
when using url('../../../assets/tree.jpg') darkblue center center / cover no-repeat; How can I make the image fll the whole space?
Eatham
EathamOP8mo ago
Did some modifications. Removed the line in my last message.
No description
Eatham
EathamOP8mo ago
It isn't just an issue with the background image Ended up creating a pseudo element and placing it on top of my component Thanks
Want results from more Discord servers?
Add your server