miércoles, 2 de enero de 2013

background (Recortar) en CSS: Aprendiendo sus secretos: Parte 5 - background-clip

background-clip es una de las nuevas propiedades con soporte nativo y pseudo-nativo como el llamado -webkit-background-clip en el caso de Safari. Con CSS 3 debemos ser cautos, pero arriesgados, su uso dependerá de que entorno desea, ya no es el tiempo de esperar que usuarios con IE 6 a IE8 decidan actualizarse, hay que olvidarse de esas personas debido a que ya estamos en una época donde nada justifica seguir con navegadores obsoletos.

Advertencia estas propiedades CSS3 son compatibles con navegadores recientes IE9 soporta esta instrucción, en navegadores anteriores se debe usar el prefijo -webkit y -moz para mozilla y webkit, esto no incluye ninguna versión de Internet Explorer a la 9.

Anterior artículo, 4: background-attachment
Siguiente artículo, 6: background-origin (próximamente)

Las propiedades de recorte de la propiedad background-clip son tres, pero una es el valor por defecto que nunca usamos salvo que haya herencia en los hijos:
  • border-box - Con este valor el fondo se pega al inicio del borde de la caja.
  • padding-box - Con este valor el fondo inicia "despues" del ancho del borde.
  • content-box - Con este valor el fondo rodea al contenido con un padding asignado.
A que nos referimos con propiedades de recorte, bueno, hablamos en términos reales del corte del fondo de color o imagen, esto es que el fondo se adecuará al padding, al contenido de una caja y al borde.

1. border-box
Básicamente el navegador hace lo mismo que siempre, ocupar todo el ancho y alto de una contenedor podemos apreciarlo porque su asignamos un borde de puntos ocupa todo el espacio, si lo aplicásemos directamente sobre un DIV sería:
<div id="fondonormal" style="background-clip: border-box; background-color: red; border: 20px dotted white;">
</div>
Usando una regla CSS asignado por ID sería:
.fondonormal
{
background-clip: border-box;
background-color: red;
}
Pero como dije, esto lo hace por defecto el navegador.


2. padding-box
Este valor lo único que hace, es que si se define un borde con CSS (border) en el contenedor, el fondo inicie con el despues del grueso del mismo border-width, esto no lo podemos apreciar cuando usamos una línea solida, sino de puntos para este caso dotted.

Ejemplo de abajo aplicado directamente (recuerde que en estos ejemplos se retira el ancho, alto y otros valores que deben tomarse en consideración):
<div style="background-clip: padding-box; background-color: red; border: 40px dotted blue;">
</div>
Usando una regla CSS asignado por ID que llamásemos, por ejemplo "fondoalborde" sería:
.fondoalborde
{
background-clip: padding-box;
background-color: red;
border: 40px dotted blue; /* ojo, esta regla está resumida */
}
Como pueden apreciar, la linea azul es el borde pero en el fondo empieza despues dejando espacio sin fondo de color.


3. content-box
Esta propiedad hace que el borde se genere donde el contenido está puesto, si es un texto, este seguirá las dimensiones asignado a los límites de ese texto, pero no es lo mismo que cuando se asigna como fondo a un texto, en el que un fondo de color solo rellena el contorno del texto en sí, pues en este caso se ocupa todo el ancho y alto disponible para el mismo.

Si usan la propiedad Padding de espaciado de relleno, este definirá el inicio de background respecto al borde del contenedor.

Aplicado directamente a un div:
<div style="background-clip: content-box; background-color: red; padding:50px;">Texto</div>
Como una regla CSS aplicado al ID llamado, por ejemplo "fondoalacaja"
.fondo a la caja
{
background-clip: content-box;
background-color: red;
padding: 50px;
}
Esto es un texto con el fondo pegado al mismo. Este valor depende del valor padding o la separación propia de un contenido.

¿Es útil, sirve para algo? Eso es decisión suya, como siempre, no todas las propiedades CSS son necesarias, pero ningún mal hace que estén allí, hasta que alguien descubra que hacer con ella.

Seguimos con background-origin propiedad CSS3 (próximamente)

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com