CODEWITHSUNDEEP
css
Philx94
Philx94

Reputation: 1295

Transparent border shows 3D effect

I am assigning two different classes on a div, for when it is selected. I gave the selected div a 2px solid blue border and gave the unselected one a 2px transparent one so it doesn't transform the dimensions of the div when it is selected. 

.recipe-card-container-selected {
  display: flex;
  flex-direction: column;
  background: linear-gradient(254deg, rgba(0, 0, 0, 0.3), rgba(51, 64, 93, 1) 85%);
  box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.2);
  margin: 0 8px 8px 8px;
  border-radius: 8px;
  border: 2px solid $primary-blue;
}

.recipe-card-container {
  display: flex;
  flex-direction: column;
  background: linear-gradient(215deg, rgba(0, 0, 0, 0.3), rgba(51, 64, 93, 1) 85%);
  border-radius: 8px;
  box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.2);
  margin: 0 8px 8px 8px;
  transition: 0.3s;
  border: 2px solid transparent;
}

enter image description here

I get this weird 3D border effect with the transparency because I used a linear gradient. Any idea on how could I fix it?

Upvotes: 0

Views: 394

Answers (1)

Jay Kariesch
Jay Kariesch

Reputation: 1482

Just set your element's box-sizing to border-box and remove the transparent border. This allows the overall box model's size to absorb values like border and padding, rather than tacking it on to the calculation.

.recipe-card-container {
  display: flex;
  flex-direction: column;
  background: linear-gradient(215deg, rgba(0, 0, 0, 0.3), rgba(51, 64, 93, 1) 85%);
  border-radius: 8px;
  box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.2);
  margin: 0 8px 8px 8px;
  transition: 0.3s;
  box-sizing: border-box;
  padding: 8px;
}

If the weird 3D effect persists, it's likely your box-shadow. Also, if this box sizing seems most practical to you, set global box sizing with this:

*,
*::before,
*::after {
    box-sizing: border-box;
}

Upvotes: 2

Related Questions