Voldemorth
No recomendado
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola, primero que nada este tutorial no es mio, se treta de una publicacion de Zura Guerra (@grafofilia) en el sitio de platzi (ex mejarando.la) El resulado es enmascarar una imagen (incluso un gift) con un texto para que el texto tenga como relleno partes de la imagen.
Ejemplo
Explicado lo anterior, comencemos:
Para empezar debemos crear un html como el del ejemplo, tener en cuenta que esta es la estructura minima necesaria, y que pueen sumarle cosas, pero no quitarle.
La imagen steven.gif que se menciona la pueden bajar aqui:
dentro de nustro css definiremos estas propiedades para #platzi:
En resumen esto significa:
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.
Eso es todo, si gustan pueden descargar de github el codigo ejemplo y demas archivos para poder testearlo mejor https://github.com/ZuraGuerra/-webkit-mask-demo .
Saludos!
Ejemplo
Explicado lo anterior, comencemos:
Para empezar debemos crear un html como el del ejemplo, tener en cuenta que esta es la estructura minima necesaria, y que pueen sumarle cosas, pero no quitarle.
Insertar CODE, HTML o PHP:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<center>
<img id="platzi" src="steven.gif">
</center>
</body>
</html>La imagen steven.gif que se menciona la pueden bajar aqui:
dentro de nustro css definiremos estas propiedades para #platzi:
Insertar CODE, HTML o PHP:
#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;
}En resumen esto significa:
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.
Eso es todo, si gustan pueden descargar de github el codigo ejemplo y demas archivos para poder testearlo mejor https://github.com/ZuraGuerra/-webkit-mask-demo .
Saludos!
