Esempio HTML CSS della carta UNO

1232 alejandrokundrah

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

13 January 2026

Modello HTML per sito web di film

16 July 2025

Palco CSS con archi di luci e scale

9 December 2025

Modello di modulo di accesso HTML CSS Deezer Aesthetic

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

Consigliato

Modello HTML per sito web di film

Palco CSS con archi di luci e scale

Modello di modulo di accesso HTML CSS Deezer Aesthetic

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS