Sombras dinámicas con CSS | Tutoriales de diseño web

Introducción

En este laboratorio, exploraremos cómo crear sombras dinámicas utilizando CSS. Aprenderás a utilizar el pseudo-elemento ::after y varias propiedades CSS como background, filter, opacity y z-index para crear un efecto que imite una sombra de caja, pero que se basa en los colores del propio elemento. Al final de este laboratorio, serás capaz de agregar una capa adicional de profundidad y dimensionalidad a tus diseños.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35194{{"Creación de sombras dinámicas con CSS"}} css/colors -.-> lab-35194{{"Creación de sombras dinámicas con CSS"}} css/width_and_height -.-> lab-35194{{"Creación de sombras dinámicas con CSS"}} css/positioning -.-> lab-35194{{"Creación de sombras dinámicas con CSS"}} css/backgrounds -.-> lab-35194{{"Creación de sombras dinámicas con CSS"}} css/pseudo_elements -.-> lab-35194{{"Creación de sombras dinámicas con CSS"}} end

Sombra dinámica

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear una sombra que se basa en los colores de un elemento, siga estos pasos:

Utilice el pseudo-elemento ::after con position: absolute y width y height establecidos en 100% para llenar el espacio disponible en el elemento padre.
Herede el background del elemento padre utilizando background: inherit.
Desplace ligeramente el pseudo-elemento utilizando top. Luego, utilice filter: blur() para crear una sombra y establezca opacity para que sea semi-transparente.
Coloque el pseudo-elemento detrás de su padre estableciendo z-index: -1. Establezca z-index: 1 en el elemento padre.

A continuación, se muestra un ejemplo de código HTML y CSS:

<div class="dynamic-shadow"></div>

.dynamic-shadow {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}

.dynamic-shadow::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

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 Sombra dinámica. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.