Exemple HTML CSS de carte UNO

1,712 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

19 March 2026

Traces de monstre (cape)

16 July 2025

carte

12 December 2025

Les peurs de Fathom Home Alone

HTML

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;
    }