Ejemplo de HTML y CSS de tarjeta UNO

541 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

28 August 2024

Efecto de desplazamiento al navegar por las imágenes

18 November 2024

Plantilla de sitio web de portafolio moderno

16 October 2025

Ejemplo de animación CSS: Carga y efectos de texto

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

Recomendado

Efecto de desplazamiento al navegar por las imágenes

Plantilla de sitio web de portafolio moderno

Ejemplo de animación CSS: Carga y efectos de texto

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS