Probablemente esté familiarizado con el uso de texto para enmascarar una imagen en Photoshop; es la forma más conocida de agregar un poco de textura, o incluso un fondo de imagen, a su texto. Luego puede usar ese texto como una imagen en su sitio web; sin embargo, ¿no sería genial si pudieras aplicar el mismo efecto usando solo HTML y CSS? La buena noticia es que puedes!

CSS ha introducido propiedades como background-clip y mask-image que puede usar para crear efectos similares a los que está creando en Photoshop. Además de eso, también puedes usar SVG para recortar una imagen con texto.

Hoy veremos las opciones e incluso incluiremos algunas animaciones simples. Si desea seguir el código, puede descarga los archivos aquí

Soporte del navegador

Como era de esperar, algunas de las propiedades que utilizaremos no son universalmente compatibles, lo que significa que fallarán en navegadores como IE y Firefox. La buena noticia es que estas propiedades fallarán silenciosamente, lo que significa que estas técnicas son una mejora progresiva y adecuadas para usar en los sitios.

Recortar texto usando fondo-clip

La primera opción que veremos es la propiedad background-clip . Esta propiedad definirá si el fondo se extenderá al borde o no. Permite que el texto de un elemento definido recorte una imagen.

El HTML

Nuestro marcado es simplemente un h1 con la clase bgClip:

Clip Text

Ahora, agreguemos la magia con CSS ...

El CSS

Añadiremos textura a nuestro texto con una imagen del cielo nocturno. También nos aseguraremos de que el texto se procesa sin problemas utilizando el suavizado de fuentes. Tenga en cuenta que para que esto funcione, el color del texto debe ser transparente, por lo que también usaremos text-fill-color: transparent.

.bgClip {background:url('../images/clouds.jpg');background-repeat:repeat-x;background-position:0 0;font-size:200px;text-transform:uppercase;text-align:center;font-family:'Luckiest Guy';color:transparent;-webkit-font-smoothing:antialiased;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0;

Ahora solo queremos agregar un poco de animación para que el fondo sea más atractivo:

    -webkit-animation:BackgroundAnimated 15s linear infinite;-moz-animation:BackgroundAnimated 15s linear infinite;-ms-animation:BackgroundAnimated 15s linear infinite;-o-animation:BackgroundAnimated 15s linear infinite;animation:BackgroundAnimated 15s linear infinite;}@keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-webkit-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}@-ms-keyframes BackgroundAnimated {<     from {background-position:0 0}to {background-position:100% 0}}@-moz-keyframes BackgroundAnimated {from {background-position:0 0}to {background-position:100% 0}}

Este es el resultado:

Enmascaramiento de texto usando máscara-imagen

La última técnica que vamos a ver es texturizar texto con máscara-imagen. La funcionalidad básica de esta propiedad es que recortará el área de texto que está visible en función de la opacidad.

El HTML

Todo lo que necesitamos es un elemento h1 envuelto en un div:

Mask Text

El CSS

Para enmascarar la imagen con el texto usaremos -webkit-mask-image para especificar la imagen y también agregaremos una buena sombra de texto para una buena medida. Finalmente, quiero ver algunos efectos de desplazamiento suave para revelar todo el texto al pasar el mouse (solo porque podemos):

#maskText h1 {font-size: 200px;font-family: 'Lilita One', sans-serif;color: #ffe400;text-shadow: 7px 7px 0px #34495e;text-transform: uppercase;text-align: center;margin: 0;display: block;-webkit-mask-image: url('../images/texture.png');-webkit-transition:all 2s ease;-moz-transition:all 2s ease;-o-transition:all 2s ease;transition:all 2s ease;}#maskText h1:hover{-webkit-mask-image: url('../images/texture-hover.png');cursor: pointer;color: #ffe400;}

Este es el resultado: