Creando diseños web visualmente atractivos

Introducción

En este laboratorio, exploraremos los fundamentos de la programación CSS y aprenderemos cómo crear páginas web visualmente atractivas. A través de una serie de ejercicios y retos, adquirirás experiencia práctica con los selectores, propiedades y valores de CSS, y te convertirás en un experto en el estilo de los elementos HTML. Al final del laboratorio, tendrás las habilidades y el conocimiento para crear hermosos y responsivos diseños web.

Tarjeta isométrica

index.html y style.css ya se han proporcionado en la VM.

Para crear una tarjeta isométrica, utiliza transform con rotateX() y rotateZ() junto con una box-shadow. También puedes agregar una transition para animar la tarjeta y crear un efecto de elevación cuando el usuario pase el cursor sobre ella.

Aquí hay un fragmento de código de ejemplo:

<div class="isometric-card"></div>

.isometric-card {
  margin: 0 auto;
  transform: rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  background-color: #fcfcfc;
  will-change: transform;
  width: 240px;
  height: 320px;
  border-radius: 2rem;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.isometric-card:hover {
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Tarjeta Isométrica. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.