{ . . . }
Snippets

Mascara de texto con CSS

Sin Comentarios

con css y sus mejoras podemos hacer muchos efectos interesantes, esos que solo conseguíamos anteriormente con algún programa de edición de imágenes. en este tips te enseñare como hacer una máscara de recorte con texto, es decir colocar algún tipo de fondo o imagen dentro de algún texto, teniendo en cuenta que con SVG podemos hacer exactamente lo mismo.

Que vamos a hacer: utilizaremos las siguientes propiedades con los siguientes valores:

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

Nota: (la opción de text-fill funciona hasta el momento solo en Chrome, Safari y Opera)

también utilizaremos jugaremos con la propiedad background y sus posiciones. Veamos el resultado:

See the Pen Mascara de Texto con CSS by frontend (@tutosytips) on CodePen
20550

Otra opción es utilizar el metodo con la propiedad mix-blend-mode que nos permite mezclar el contenido del elemento con el que está atras de el como fondo del elemento contenedor, como vemos en el siguiente ejemplo:

See the Pen Text Clipping Masks with Blend CSS Blend Modes by Dudley Storey(@tutosytips) on CodePen
20550

Pen de: Dudley Storey

Nota: (mix-blend-mode no se ejecuta en IExplorer ni Opera mini)

Comentar

avatar