Exemplo de cartão UNO HTML CSS

Abrir no Editor Publique Seu Código Precisa de um site?

Recomendado

2 March 2025

CSS

.card-container {
  perspective: 800px;
}

.card {
  --s: 0.5s;
  position: relative;
  width: 210px;
  height: 332px;
  background: #fffffd;
  border-radius: 1em;
  box-shadow: 0 0 6px -4px black;
  transition: 0.5s all linear;
  transform-style: preserve-3d;
  pointer-events: none;
  user-select: none;
  animation: 2s spin linear infinite;
}

.card::before {
  content: "";
  position: absolute;
  bottom: -24px;
  bottom: 0;
  left: 0;
  width: 210px;
  height: 110px;
  transform: translate(0em, 60%) rotateX(90deg) scale(0.8);
  border-radius: 100%;
  background-color: #000a;
  z-index: -10;
  filter: blur(24px);
}

@keyframes spin {
  to {
    transform: rotateY(360deg);
  }
}

.back {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0.7em;
  border-radius: 1.25em;
  background: #191f1f;
  overflow: hidden;
}

.red {
  position: absolute;
  background: #cb0323;
  inset: 0;
  border-radius: 100%;
  transform-origin: center;
  transform: scale(0.875) skewX(-22.5deg);
}

.back .text {
  position: absolute;
  font-size: 5em;
  font-weight: 800;
  color: #e4c713;
  transform-origin: center;
  transform: rotate(-15deg) translateX(5px);
  text-shadow:
    2px 2px #f1e8ad,
    2px 1px #f1e8ad,
    2px 0px #f1e8ad,
    2px -1px #f1e8ad,
    2px -2px #f1e8ad,
    1px -2px #f1e8ad,
    0px -2px #f1e8ad,
    -1px -2px #f1e8ad,
    -2px -2px #f1e8ad,
    -2px -1px #f1e8ad,
    -2px 0px #f1e8ad,
    -2px 1px #f1e8ad,
    -2px 2px #f1e8ad,
    -12px 10px #191f1f,
    -10px 10px #191f1f,
    -9px 9.428571429px #191f1f,
    -8px 8.857142857px #191f1f,
    -7px 8.285714286px #191f1f,
    -6px 7.714285714px #191f1f,
    -5px 7.142857143px #191f1f,
    -4px 6.571428572px #191f1f,
    -3px 6px #191f1f,
    -2px 5.428571429px #191f1f,
    -1px 4.857142857px #191f1f,
    0px 4.285714286px #191f1f,
    1px 3.714285715px #191f1f,
    2px 3.142857143px #191f1f,
    3px 2.571428572px #191f1f,
    4px 2px #191f1f,
    4px -4px #191f1f,
    -4px -4px #191f1f,
    -5px -3px #191f1f,
    -6px -2px #191f1f,
    -7px -1px #191f1f,
    -8px 0px #191f1f,
    -9px 1px #191f1f,
    -10px 2px #191f1f,
    -11px 3px #191f1f,
    -12px 4px #191f1f,
    -14px 4px #fffffd,
    -13px 3px #fffffd,
    -12px 2px #fffffd,
    -11px 1px #fffffd,
    -10px 0px #fffffd,
    -9px -1px #fffffd,
    -8px -2px #fffffd,
    -7px -3px #fffffd,
    -6px -4px #fffffd,
    -5px -5px #fffffd,
    -4px -6px #fffffd,
    -3px -6px #fffffd,
    0px -6px #fffffd,
    3px -6px #fffffd,
    6px -6px #fffffd,
    -14px 12px #fffffd,
    -8px 12px #fffffd,
    -7px 11.5px #fffffd,
    -6px 11px #fffffd,
    -5px 10.5px #fffffd,
    -4px 10px #fffffd,
    -3px 9.5px #fffffd,
    -2px 9px #fffffd,
    -1px 8.5px #fffffd,
    0px 8px #fffffd,
    1px 7.5px #fffffd,
    2px 7px #fffffd,
    3px 6.5px #fffffd,
    4px 6px #fffffd,
    5px 5.5px #fffffd,
    6px 4px #fffffd;
}

.front {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0.7em;
  border-radius: 1.25em;
  background: #cb0323;
  overflow: hidden;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.front .red {
  border: 0.7em solid #fffffd;
  transform: scale(0.92, 0.875) skewX(-22.5deg);
}

.text-center {
  position: absolute;
  width: 12em;
  color: white;
}

.text-top {
  position: absolute;
  top: -1em;
  left: -1.25em;
  width: 7em;
  color: white;
}

.text-bottom {
  position: absolute;
  bottom: -1em;
  right: -1.5em;
  width: 7em;
  color: white;
}

body{
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:100vh;
      margin:0;
      background-color:#e8e8e8;
    }

Exemplo de cartão UNO HTML CSS

Recomendado

Um código por lebdev

Um Código de Metehan

Layout de colunas

HTML

CSS

JS

Recomendado

Um código por lebdev

Um Código de Metehan

Layout de colunas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS