Entendiendo background-clip para máscaras de texto con CSS3
La propiedad background-clip fue introducido originalmente por Webkit en 2008 que permite que un fondo especifico de un elemento se recorte de acuerdo al texto ingresado.
Todos los siguientes ejemplos funcionan a través de capturas de pantalla, al final del tutorial encontrarás el ejemplo en vivo.
background-clip: text;
Para este ejercicio utilizaremos el siguiente texto. Tiene estilos muy básicos; buscamos tener una fuente gruesa y grande para mostrar la imagen de fondo de una manera buena
Ahora será cuestión de aplicar un fondo en nuestro texto y aplicar la propiedad de background-clip: text; para lograr el siguiente efecto.
El código utilizado para el ejemplo anterior es el siguiente:
h1 {
color: transparent;
background: url('bgclip.jpg') repeat;
-webkit-background-clip: text;
font-family: 'Arial Black';
text-transform: uppercase;
font-size: 7em;
text-align: center;
letter-spacing: -2px;
line-height: 110px;
}
Básicamente lo que estamos haciendo es asignarle un color transparente a nuestro h1, para así después darle un fondo con un pattern de nubes que encontré y le asignamos la propiedad background-clip asignada al texto.
Las demás propiedades son puramente estéticas.
El fondo en cuestión es el siguiente:
Acepta gifs, gradients, shadows, etc, y existen otras tres propiedades que te ayudarán para mejorar este efecto.
text-stroke-width y text-stroke-color
Estas dos propiedades nos ayudarán a darle un borde al rededor de la tipografía que estemos utilizando: text-stroke-width nos dará el ancho del borde y text-stroke-color nos dará el color.
El código utilizado en el ejemplo anterior es el siguiente:
h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: gray;
color: transparent;
background: url('bgclip.jpg') repeat;
-webkit-background-clip: text;
font-family: 'Arial Black';
text-transform: uppercase;
font-size: 7em;
text-align: center;
letter-spacing: -2px;
line-height: 110px;
}
text-fill-color
Esta propiedad nos dará la posibilidad de hacer un rellenado a la tipografía, podemos utilizar nombres de color, hex, rgb, rgba, etc.
El código utilizado es el siguiente:
h1 {
-webkit-text-fill-color: rgba(255,0,0,0.5);
color: transparent;
background: url('bgclip.jpg') repeat;
-webkit-background-clip: text;
font-family: 'Arial Black';
text-transform: uppercase;
font-size: 7em;
text-align: center;
letter-spacing: -2px;
line-height: 110px;
}
Ejemplos
Para visualizar los siguientes ejemplos será necesario utilizar un navegador que soporte Webkit y que esté actualizado.
Gradients!
BURN!
Classic
Space and time
Glossy
Comentarios
Copyright © 2012-2013 AbarcaRodriguez.com