CSS3 Transparencia + Gradiente

286

RGBA es muy divertido, y también lo es -webkit-gradient, -moz-gradienty uh ...progid:DXImageTransform.Microsoft.gradient ... sí. :)

¿Hay alguna manera de combinar los dos, RGBA y gradientes, para que haya un gradiente de transparencia alfa usando las especificaciones CSS actuales / más recientes?

css gradient Jourkey
fuente

1

El comentario de @ geo1701 debería ser aceptado, ya que es más relevante para los estándares modernos.

Dmytro Shevchenko

326

Si. Puede usar rgba tanto en webkit como en declaraciones de gradiente de moz:

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

( src )

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

( src )

Aparentemente, incluso puede hacer esto en IE, utilizando una sintaxis extraña "hex extendido". El primer par (en el ejemplo 55) se refiere al nivel de opacidad:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 uses -ms-filter for whatever reason... */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

( src )

Owen
fuente

20

Para su información, "hexadecimal extendido" es solo ARGB de 32 bits en lugar de valores de color RGB de 24 bits.

Macke

2

Me gustaría que estos funcionen también en CSS estándar, pero con el alfa al final (parece más natural): #0001sería un hexadecimal corto para "negro casi transparente" y #ffcc00ffsería igual a #ffcc00, es decir, "amarillo mandarina completamente opaco"

ovejas voladoras

56

También echa un vistazo a la Gradiente generador CSS3 encima en Colorzilla que tiene un montón de buenas posiciones predeterminadas y todas las variaciones compatibles cruz navegador para lograr su gradiente deseada

andrhamm

así que lo he comprobado, funciona en todos los principales navegadores, pero no funciona en la ópera, ¿alguna pista?

WhoSayIn

no importa, lo acabo de encontrar;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));

WhoSayIn

101

La nueva sintaxis ha sido admitida por un tiempo por todos los navegadores modernos (a partir de Chrome 26, Opera 12.1, IE 10 y Firefox 16): http://caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

Esto genera un degradado, comenzando desde negro sólido en la parte superior, hasta totalmente transparente en la parte inferior.

Documentación sobre MDN .

George Filippakos
fuente

77

.. crea un negro sólido en la parte superior y totalmente transparente en la parte inferior

commonpike

Supongo que esto es una sugerencia y en realidad no funciona.

Bart

15

¡Esto es algo realmente genial! Necesitaba más o menos lo mismo, pero con un gradiente horizontal de blanco a transparente. ¡Y está funcionando bien! Aquí está mi código:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%
        );

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }

Misha
fuente

1

como referencia, en la implementación de Microsoft, gradientType = 1 es horizontal, 0 es vertical.

Brooks

¿Los gradientes IE7 e IE8 no especifican ningún color alfa? ¿Realmente se desvanecen a transparente?

KajMagnus el

3

Aquí está mi código:

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

Miloš Miljković
fuente

3

#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

Encontré esto en w3schools y satisfacía mis necesidades mientras buscaba degradado y transparencia. Estoy proporcionando el enlace para referirme a w3schools. Espero que esto ayude si alguien está buscando degradado y transparencia.

http://www.w3schools.com/css/css3_gradients.asp

También lo intenté en w3schools para cambiar la opacidad pegando el enlace para comprobarlo

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Espero eso ayude.

sagar buddhi
fuente

1

El siguiente es el que estoy usando para generar un gradiente vertical desde completamente opaco (arriba) hasta 20% de transparencia (abajo) para el mismo color:

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */
background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */

Riccardo Volpe
fuente

0

Acabo de encontrar este ejemplo más reciente. Para simplificar y usar los ejemplos más recientes, dando al CSS una clase de selector de 'grad' (he incluido compatibilidad con versiones anteriores)

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

de https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

davidrynn
fuente

CSS3 Transparencia + Gradiente

Respuestas: