La propiedad background-clip

Los navegadores interpretan las propiedades CSS como se les da la gana, algunos de una forma, otros de otra; con el tiempo, esto ha mejorado bastante aunque siguen habiendo diferencias. Para colmo, a esas propiedades les agregan extensiones, funciones o caracterísitcas propias que no son parte de los estándares o que son experimentales.

Si bien es cierto que no se aplicarán a todos, nada impide que las usemos siempre y cuando chequeemos nuestro sitio y verifiquemos que se ve de manera más o menos razonable en cualquiera de ellos.

Por ejemplo, Mozilla las identifica con el prefijo -moz- y Chorme/Safari con el prefijo -webkit-

Una de ellas es la llamada background-clip que acepta dos valores: border y padding:

-moz-background-clip en Firefox (más información)
-webkit-background-clip en Chorme/Safari (más información)

Esta propiedad, controla la forma en que se muestran los bordes y los fondos de cualquier elemento. Por defecto, el valor que tiene es border y lo mejor es verlo en acción. Colocamos entonces una etiqueta con un borde exagerado para que el detalle sea bien visible:
<div style="background-color:#456;border: 10px dashed #ABC;">
....... cualquier contenido .......
</div>

Phasellus tellus eros, aliquet sit amet vehicula sit amet, sodales non tortor. Ut venenatis luctus nunc nec mattis. Cras mollis semper adipiscing. Nunc adipiscing ullamcorper lacus amet.

Lo mismo ocurrirá con una imagen o con cualquier otro contenido:


Así se ve por defecto, tenga o no tenga agregado -moz-background-clip: border; -webkit-background-clip: border; el fondo se extiende por debajo del borde cuando este tiene partes transparentes. Ahora, cambiemos ese valor por padding:
<div style="background-color:#456;border: 10px dashed #ABC; -moz-background-clip: padding; -webkit-background-clip: padding;">
....... cualquier contenido .......
</div>

Phasellus tellus eros, aliquet sit amet vehicula sit amet, sodales non tortor. Ut venenatis luctus nunc nec mattis. Cras mollis semper adipiscing. Nunc adipiscing ullamcorper lacus amet.

El resultado es diferente, el fondo ya no se extiende debajo del borde.


En Internet Explorer y Opera, esto no tendrá ningún tipo de efecto por lo que podemos usarla sin problemas.

0 comentarios:

Publicar un comentario