Html - CSS: Double sided element not showing borders correctly

CloverJohnson
October 4, 2023
180 views
0 votes
2 Answers

I am creating a rogue-like deck-builder game. I’m adding a feature to make a card that appears to be good, but works against you. However, since I need it to appear as different rarities on each side, that means I need two borders.

My original attempt was a standalone transition, but it was too sudden, and didn’t either fade into a color, or be double-sided like I wanted. My second attempt worked, but looked like this when built:

html,
body {
  font-family: "Space Mono", monospace;
  color: white;
  width: 100%;
  height: 100%;
}

card {
  width: calc(70px * 2);
  height: calc(100px * 2);
  background: #3b3b3b;
  border-radius: 1em;
  perspective: 600px;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.cardfront,
.cardback {
  backface-visibility: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}

.evilcardfront {
  border-top: 10px solid orange;
  border-bottom: 6px solid orange;
}

.evilcardback {
  border-top: 10px solid maroon;
  border-bottom: 6px solid maroon;
}

.epic {
  border-top: 10px solid #9c20aa;
  border-bottom: 6px solid #9c20aa;
}

.flipped {
  transform: rotateY(180deg);
}

.cardback {
  transform: rotateY(180deg);
  font-size: medium;
  text-align: center;
  padding-top: 10px;
}

.common {
  border-top: 10px solid slategray;
  border-bottom: 6px solid slategray;
}

<div style="display: flex;">

  <card class='evil' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
    <div class='cardfront evilcardfront'></div>
    <div class='cardback evilcardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card has misplaced borders</span></div>
  </card>

  <card class='common' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
    <div class='cardfront'></div>
    <div class='cardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card is correct</span></div>
  </card>

</div>

jsfiddle

Tags: css html

Answers

        html, body {
            font-family: "Space Mono", monospace;
            color: white;
            width: 100%;
            height: 100%;
        }

        .card-container {
            display: flex;
        }

        .card {
            width: calc(70px * 2);
            height: calc(100px * 2);
            perspective: 600px;
            position: relative;
            transition: transform 1s;
            transform-style: preserve-3d;
            margin: 10px;
        }

        .cardfront,
        .cardback {
            backface-visibility: hidden;
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 1em;
        }

        .evilcardfront {
            background: orange;
        }

        .evilcardback {
            background: maroon;
        }

        .epic {
            background: #9c20aa;
        }

        .flipped {
            transform: rotateY(180deg);
        }

        .cardback {
            transform: rotateY(180deg);
            font-size: medium;
            text-align: center;
            padding-top: 10px;
        }

        .common {
            background: slategray;
        }

    <div class="card-container">
        <div class="card evil" onclick="if (!this.classList.contains('flipped')) { this.classList.add('flipped') }">
            <div class="cardfront evilcardfront"></div>
            <div class="cardback evilcardback">
                <span id="name">Name</span><br>
                <span id="type" style="color: fuchsia; font-size: small;">type</span><br>
                <span>this card has misplaced borders</span>
            </div>
        </div>

        <div class="card common" onclick="if (!this.classList.contains('flipped')) { this.classList.add('flipped') }">
            <div class="cardfront"></div>
            <div class="cardback">
                <span id="name">Name</span><br>
                <span id="type" style="color: fuchsia; font-size: small;">type</span><br>
                <span>this card is correct</span>
            </div>
        </div>
    </div>

In this revised code, the following improvements have been applied:

A .card-container section has been introduced to encapsulate your cards, enhancing the organizational structure.

Moved the border-radius property to the .cardfront and .cardback classes, ensuring that the borders are rendered consistently on both sides.

Background colors defined directly within card type classes (e.g., .evilcardfront, .evilcardback, .epic, .common) instead of relying on the border-top and border-bottom properties for border styling.

These adjustments ensure that your double-sided cards now display the intended limit display, adjusted to the respective card type.

Should I deserve a Clap from You?

I think that this should solve your problem

html,
body {
  font-family: "Space Mono", monospace;
  color: white;
  width: 100%;
  height: 100%;
}

.evil,
card {
  width: calc(70px * 2);
  height: calc(100px * 2);
  background: #3b3b3b;
  border-radius: 1em;
  perspective: 600px;
  position: relative;
  z-index: 1;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.evilBack {
  width: calc(70px * 2);
  height: calc(100px * 2);
  background: #3b3b3b;
  border-radius: 1em;
  perspective: 600px;
  transform-style: preserve-3d;
}

.cardfront,
.cardback {
  backface-visibility: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
}

.evilcardfront {
  border-top: 10px solid orange;
  border-bottom: 6px solid orange;
}

.evilcardback {
  border-top: 10px solid maroon;
  border-bottom: 6px solid maroon;
}

.epic {
  border-top: 10px solid #9c20aa;
  border-bottom: 6px solid #9c20aa;
}

.flipped {
  transform: rotateY(180deg);
}

.cardback {
  transform: rotateY(180deg);
  font-size: medium;
  text-align: center;
  padding-top: 10px;
}

.common {
  border-top: 10px solid slategray;
  border-bottom: 6px solid slategray;
}

.evil {
  border-top: 10px solid orange;
  border-bottom: 6px solid orange;
  transform-style: preserve-3d;
}

.evilBack {
  top: -0.65em;
  position: absolute;
  left: 0px;
  border-top: 10px solid maroon;
  border-bottom: 6px solid maroon;
}

<div style="display: flex;">



  <div class='evil' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
    <div class="cardfront"></div>
    <div class='cardback'> <span class='evilBack'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card is correct</span></span>
    </div>
  </div>





</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS: Double sided element not showing borders correctly

Answers