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.
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.
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; }
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; }
Para visualizar los siguientes ejemplos será necesario utilizar un navegador que soporte Webkit y que esté actualizado.
Gradients!
BURN!
Classic
Space and time
Glossy
Copyright © 2012-2013 AbarcaRodriguez.com