¿Alguna vez ha visto un elemento en una página con bordes transparentes? Creo que Facebook originalmente lo popularizó dando a luz a complementos de caja de luz como Facebox. No creo que Facebook tenga ese aspecto más, pero sigue siendo bastante ordenado.
Podría pensar que sería tan simple como esto:
#lightbox {
background: white;
border: 20px solid rgba(0, 0, 0, 0.3);
}Sin embargo, establecer un borde transparente en un elemento revelará el fondo del propio elemento debajo del borde.
En la captura de pantalla anterior, los bordes usan RGBa para ser transparentes, pero aparecen en gris sólido porque solo revelan el fondo blanco sólido de sí mismo debajo.
¡Afortunadamente hay una propiedad CSS3 para salvarnos! Se llama background-clip y se usa específicamente para especificar qué parte del modelo de caja se debe utilizar para mostrar el fondo. Hace lo que parece, corta el fondo en la parte especificada del cuadro. Hay tres valores que puede tener, y los prefijos de los proveedores sí se involucran. Aquí están las tres configuraciones que podría tener. No los usaría todos a la vez, esto es por conveniencia de mostrar solo:
#lightbox {
-moz-background-clip: border; /* Firefox 3.6 */
-webkit-background-clip: border; /* Safari 4? Chrome 6? */
background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: content; /* Firefox 3.6 */
-webkit-background-clip: content; /* Safari 4? Chrome 6? */
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
}Aquí están los esquemas:
Así que estoy seguro de que verá a dónde voy aquí … si configuramos el background-clip al padding-box, el fondo blanco terminará antes del borde y la transparencia se colocará sobre otros contenidos logrando el aspecto que buscamos.
Ver demostración
Relacionado: background-origin
En nuestro ejemplo de caja de luz, lo más probable es que el fondo sea de un color sólido. En ese caso, background-origin es bastante irrelevante, ya que nadie podrá saber de dónde “empezó” el color. Sin embargo, si el fondo del elemento es una imagen, puede ser muy importante dónde comienza el punto de origen del fondo.
Esto está relacionado con background-clip, porque si el background-clip es el cuadro de relleno pero el origen del fondo se deja en el valor predeterminado border-box, algunos de los background-image será cortado, lo que puede ser deseable o no.
Aquí está el esquema:
Y un ejemplo visual:
Compatibilidad del navegador
Trabaja en: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9
Solo probé estos navegadores modernos y el soporte es bueno. Puede (y probablemente lo haga) retroceder un poco más en los navegadores que no son IE.
Si desea una compatibilidad de navegador más completa, siempre puede optar por el método de doble div.
<div id="lightbox">
/* Set transparent background with PNG
add padding to push inside box inward */
<div id="lightbox-inside">
/* Set white background in here */
</div>
</div>Otra ventaja del método de doble div es que puede lograr bordes verdaderamente redondeados. Desafortunadamente, con el método de clip de fondo, el borde exterior es redondo, pero el borde del fondo permanece recto.
Lástima que no tengamos algo como background-radius arreglarlo:
#lightbox
border-radius: 16px;
padding: 8px;
/* NOT REAL */
background-radius: 8px;
}Rarezas
20px de borde estaba bien, pero cuando probé 30px, estos mini cajas de muerte apareció en Safari 5.
En Chrome, pequeñas líneas diagonales estaban presentes en cualquier ancho de borde de hasta 20 px.
Por encima del borde de 20px, las esquinas se oscurecen por completo.
Sin radio de borde, los cuadros de esquina oscurecidos siempre son visibles.
Gracias
Gracias a Alex Hall por la idea original y la ayuda.
Aquí hay una demostración simple que muestra los diferentes valores de background-clip también:
y origen de fondo: