soy Kseso y esto EsCSS

El valor "transparent" de Css que no lo es en bordes diagonales y gradientes. Solución.

El valor "transparent" de Css que no lo es en bordes diagonales y gradientes. Solución.

·Por Kseso ✎ 1

Si eres usuario de Firefox y alguna vez has creado un borde con valor transparent para que surja una diagonal en el lado adyacente, por ejemplo para hacer un triángulo, posíblemente hayas observado el efecto tan feo del remate en el lado que forma la diagonal.
Aparece una línea con un color ajeno de resalte en él.
Este efecto no se manifiesta en otros navegadores, como Chrome, Opera, Webkit ni tampoco en IE9.

Este ¿bug? se vuelve más notorio cuanto más diferencia exista entre los border-width implicados en el efecto.
La imagen de la derecha te da una idea del efecto al que me refiero. Y como se puede observar en ella, un vistazo con firebug a los estilos generados no da pistas sobre lo que está ocurriendo.

Ampliación*↓:
Este problema también se manifiesta en Chrome con los gradientes css.

Para verlo en vivo, recuerda hacerlo con Firefox, vamos a crear el borde con el siguiente código:

border-right: 100px solid transparent; border-top: 100px solid #F3F3A1;

Y esta una imagen del resultado obtenido, ampliada la zona donde coinciden los 2 bordes

El origen del píxel espontáneo

La especificación*↓ define al valor transparent como el valor rgba(0, 0, 0, 0), esto es, el negro totalmente transparente.
Una suposición mía para ese px es que Firefox crea un degradado desde el color de un borde hasta el negro transparente del otro. Y lo dibuja más grueso o menos, el degradado, en función de las anchuras de los bordes.

Solución al pixel espontáneo

La forma que he encontrado como solución para que no aparezca ese píxel o píxeles en Firefox es no utilizar el valor transparent. En su lugar basta con cambiarlo por el valor en RGBA del mismo color del otro borde y con el valor de la opacidad/transparencia (canal alpha) a 0. Tal que así:

border-right: 100px solid rgba(243,243,161,0); border-top: 100px solid #F3F3A1;

Esta es la imagen resultante, compárala con la anterior:

Transparent sucio en gradientes Css

*↑ Este comportamiento y su efecto tan poco estético también se manifiesta en Google Chrome además de en Firefox al usar el valor transparent en los gradientes. Fíjate en los dos div de abajo:

Gradiente sucio
Gradiente limpio

La imagen de abajo te ayuda a visualizar el efecto grisáceo en el gradiente. El origen es el mismo: utilizar la palabra clave transparent. El efecto se corrige cambiando, como en el borde, dicho valor por el color del gradiente, rojo, en notación rgba con el valor de la transparencia en cero: rgba(255,0,0,0)

Produce el grisáceo background: linear-gradient(to right, #f00 0%,transparent 100%); Gradiente limpio background: linear-gradient(to right, #f00 0%,rgba(255,0,0,0) 100%);

Definición del valor transparent

*↑ Lo que dice la especificación sobre el valor transparent:

The computed value of the keyword ‘transparent’ is the quadruplet of all zero numerical RGBA values, e.g. rgba(0,0,0,0).

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso