Entendiendo background-clip para máscaras de texto con CSS3

palabras / Facebook / Twitter / Enlace / Comentar

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