Exemple HTML CSS de carte UNO

Ouvrir dans l'éditeur Publiez votre code

Recommandé

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

Exemple HTML CSS de carte UNO

Recommandé

Un code par alejandrokundrah

Un code par mironovbogdan341

Formulaire de connexion

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Un code par mironovbogdan341

Formulaire de connexion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS