Efecto de texto grabado | Técnicas de estilo CSS

Introducción

En este laboratorio, aprenderemos a crear un efecto de texto "Grabado" o grabado utilizando CSS. Este efecto puede agregar un toque único y elegante a tus diseños web, y sorprendentemente es fácil de lograr. Al ajustar la sombra, el fondo y el color del texto, podemos crear la ilusión de que el texto está tallado en el fondo. Únete a nosotros mientras exploramos esta técnica divertida y creativa.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/fonts("Fonts") css/BasicStylingGroup -.-> css/text_styling("Text Styling") subgraph Lab Skills css/selectors -.-> lab-35195{{"Creando efectos de texto grabado con CSS"}} css/colors -.-> lab-35195{{"Creando efectos de texto grabado con CSS"}} css/fonts -.-> lab-35195{{"Creando efectos de texto grabado con CSS"}} css/text_styling -.-> lab-35195{{"Creando efectos de texto grabado con CSS"}} end

Texto grabado

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

Para crear un efecto "grabado" o tallado en relieve para el texto sobre un fondo, utiliza las siguientes propiedades CSS:

.etched-text {
  text-shadow: 0 2px white;
  font-size: 1.5rem;
  font-weight: bold;
  color: #b8bec5;
}

La propiedad text-shadow crea una sombra blanca desplazada 0px horizontalmente y 2px verticalmente desde la posición de origen. Asegúrate de que el fondo sea más oscuro que la sombra para que el efecto funcione. Además, el color del texto debe estar ligeramente desvanecido para que parezca que ha sido tallado del fondo. Finalmente, aplica la clase etched-text al elemento HTML deseado, como un párrafo, para lograr el efecto.

<p class="etched-text">I appear etched into the background.</p>

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