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.
La propiedad background-clip de CSS3 especifica hasta donde se extiende el fondo ( background ) de un elemento, ya sea color o imagen.
Por defecto el fondo ( background ) se extiende hasta el limite externo del borde.
En los siguientes ejemplos utilizamos un borde discontinuo ( dashed ) muy grueso ( 20px ) verde oscuro ( #050 ).
Como que el borde es discontinuo podemos ver hasta donde se extiende el color de fondo.
.bkclip{
width:250px;
height:150px;
border:20px dashed #050;
background-color:#6ab150;
padding:20px;
margin:0 auto;
text-align:center;
}
<div class="bkclip"><p>el valor por defecto</p></div>
el valor por defecto
Sintaxis
El valor de la propiedad background-clip puede ser una de estas palabras clave:
background-clip: border-box | padding-box | content-box | text | inherit;
border-box
Si background-clip: border-box; el fondo ( background ) se extiende hasta el limite externo del borde.
.bkclip{
width:250px;
height:150px;
border:20px dashed #050;
background-color:#6ab150;
padding:20px;
margin:0 auto;
text-align:center;
}
#borderBox{background-clip:border-box;}
<div class="bkclip" id="borderBox"><p>border-box</p></div>
border-box
padding-box
Si background-clip: padding-box; el fondo ( background ) se extiende hasta el limite externo del relleno ( padding ).
.bkclip{
width:250px;
height:150px;
border:20px dashed #050;
background-color:#6ab150;
padding:20px;
margin:0 auto;
text-align:center;
}
#paddingBox{background-clip:padding-box;}
<div class="bkclip" id="paddingBox"><p>padding-box</p></div>
padding-box
content-box
Si background-clip: content-box; el fondo ( background ) aparece solo dentro del ( clipped to ) contenido de la caja.
Observación: el espacio en blanco que queda entre el contenido y el borde representa el relleno ( padding:20px ) de la caja.
.bkclip{
width:250px;
height:150px;
border:20px dashed #050;
background-color:#6ab150;
padding:20px;
margin:0 auto;
text-align:center;
}
#contentBox{background-clip:content-box;}
<div class="bkclip" id="contentBox"><p>content-box</p></div>
content-box
Crear máscaras de texto
En el CSS3, exactamente como en Photoshop, o en SVG, podemos crear mascaras de texto. O casi. De hecho Firefox todavía no nos deja hacerlo.
En el siguiente ejemplo utilizamos el titular <h1 class="panal"> para crear una mascara de texto. Para esto – ya lo sabemos – el texto tiene que ser transparente ( color:transparent; ).
El problema es que background-clip: text; no funciona en el Firefox, y como que el texto es transparente, los usuarios de este navegador verían solo el "panal" de fondo ( background-image:url(images/panal.jpg); ).
Hablemos de text-fill-color
La propiedad text-fill-color permite, exactamente como la propiedad color, especificar el color de relleno del texto. Si las dos propiedades están especificadas, la propiedad text-fill-color tendrá prioridad sobre la propiedad color.
En el siguiente ejemplo utilizamos la propiedad -webkit-text-fill-color que tiene prioridad sobre la propiedad color solo en los navegadores basados en –webkit-. Firefox en cambio ignora las propiedades que tienen el prefijo –webkit-, y toma en consideración solo la propiedad color: exactamente lo que necesitamos.
NOTA: background-clip: text no funciona en Firefox.
h1#panal {
font-family:"Arial Black", Gadget, sans-serif;
font-size:85px;
background-image:url(images/panal.jpg);
-webkit-background-clip: text;
color:Gold;
-webkit-text-fill-color: transparent;
text-align:center;
margin:0;
padding:0;
}
<h1 id="panal">ABEJA</h1>
ABEJA
Ejemplos
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
Bibliografía http://abarcarodriguez.com/ http://w3.unpocodetodo.info/
⁂