LabEx
EntrarÚnete

Creando efectos de texto grabado con CSS

Beginner

This tutorial is from open-source community. Access the source code

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.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 92% por parte de los estudiantes.

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.