Cómo darle textura a tus textos con CSS3

Si quieres personalizar imágenes, logotipos o textos con CSS3, la propiedad webkit-mask te permitirá realizar un efecto similar a las máscaras de recorte de Photoshop e Illustrator. Es decir, usando dos imágenes, una se vuelve la textura de la otra. Esta característica se vuelve aún más interesante si usamos PNGs, GIFs o SVGs, que soportan transparencias. Para este demo usé el logotipo de Platzi y una escena de la caricatura Steven Universe en GIF. Inicialmente, nuestro HTML se ve así: [html] <link rel=“stylesheet” type=“text/css” href=“main.css”>

<center></center>

[/html] El único contenido es la imagen steven.gif con el id platzi. El id platzi contiene estas propiedades en nuestro CSS. Aquí podemos definir el ancho y la altura de nuestro elemento en las primeras líneas. En este caso, se refiere al steven.gif. [css]#platzi { width: 60%; height: 60%; -webkit-mask-image: url(‘platzi.png’); -webkit-mask-position: center, center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; -webkit-mask-attachment: fixed; } [/css]

• webkit-mask-image: con esta propiedad especificamos la ruta de la imagen que queremos usar como máscara.
• webkit-mask-position: se refiere a la posición de la máscara con respecto a la de la imagen de abajo. Aquí, por ejemplo, center, center; las alinea por el centro.
• webkit-mask-repeat: por defecto, el navegador crea un mosaico de la máscara. Con no-repeat evitamos eso.
• webkit-mask-size: controla el tamaño de la máscara con respecto a la imagen de abajo. Con 100% obtenemos un fit perfecto.
• webkit-mask-attachment: esto define el comportamiento al hacer scroll.

Después, agregué un encabezado con texto y también le puse una imagen de textura. Aquí la lógica se invierte: lo que agregamos en el CSS es la textura y la máscara de recorte es el texto que ponemos en el HTML. Justo después de donde comienza, añadí lo siguiente:

<div>[html]

<div id=“universe”>

Demo de -webkit-mask para

</div>

[/html] Nuestro CSS para el id universe se ve así: [css]#universe { background: url(‘universe.jpg’); background-repeat: no-repeat; background-position: center, center; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }[/css]

• background: aquí ponemos la ruta a la imagen que usaremos de textura.
• background-repeat: igual que en el primer ejemplo, sirve para que no cree un mosaico por defecto.
• background-position: también como en el primer ejemplo, define la posición de la textura con respecto a la de su contenedor (que en este caso es el < div >, no el < h1 >).
• webkit-text-fill-color: funciona igual que color (especifica un color para la fuente), pero nos permite usar transparent como valor.
• webkit-background-clip: como su valor es text, entiende que esa va a ser la máscara de recorte.

Para que se apreciaran las estrellas de la imagen universe.jpg, busqué una fuente lo suficientemente gruesa. Encontré una en Google Fonts. Para usarla, agregué esto justo debajo de donde agrego la hoja de estilo, dentro de < head >, en el HTML: [html]<link href=“http://fonts.googleapis.com/css?family=Chango” rel=“stylesheet” type=“text/css”>[/html] En el CSS estilicé más el texto: [css]#universe { font-family: Chango, sans-serif; text-transform: uppercase; text-align: center; } [/css]

• text-transform: transforma el texto según parámetros como uppercase (todas mayúsculas), lowercase (todas minúsculas) o capitalize (cada palabra empieza en mayúscula).
• text-align: alinea el texto.

Al final, nuestro HTML quedó así: [html] <link rel=“stylesheet” type=“text/css” href=“main.css”><link href=“http://fonts.googleapis.com/css?family=Chango” rel=“stylesheet” type=“text/css”>

<div id=“universe”>

Demo de -webkit-mask para

</div>

<center></center>

[/html] Y el CSS así: [css]html { background-color: #fff4f5; } #platzi { width: 60%; height: 60%; -webkit-mask-position: center, center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100%; -webkit-mask-image: url(‘platzi.png’); -webkit-mask-attachment: fixed; } #universe { font-family: Chango, sans-serif; text-transform: uppercase; text-align: center; background: url(‘universe.jpg’); background-repeat: no-repeat; background-position: center, center; -webkit-text-fill-color: transparent; -webkit-background-clip: text; }[/css] En Github puedes encontrar el código del demo. Si tienes alguna duda al implementarlo, no dudes en preguntarme por Twitter o comentando acá abajo. Y si lo que buscas es ir más allá de CSS3 y aprenderlo todo de las tecnologías que contemplan ser un Front-end profesional; apúntate al Curso de Front-end en Platzi.</div>