Transparence CSS3 + Dégradé

286

RGBA est extrêmement amusant, et est donc -webkit-gradient, -moz-gradientet euh ... progid:DXImageTransform.Microsoft.gradient... ouais. :)

Existe-t-il un moyen de combiner les deux, RGBA et dégradés, afin qu'il y ait un dégradé de transparence alpha en utilisant les spécifications CSS actuelles / les plus récentes.

css gradient Jourkey
la source
1
Le commentaire de @ geo1701 devrait devenir le commentaire accepté, car il est plus pertinent pour les normes modernes.
Dmytro Shevchenko

Réponses:

326

Oui. Vous pouvez utiliser rgba dans les déclarations de gradient webkit et 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 )

Apparemment, vous pouvez même le faire dans IE, en utilisant une syntaxe étrange "hex étendu". La première paire (dans l'exemple 55) fait référence au niveau d'opacité:

/* 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
la source
20
Pour info, "hexadécimal étendu" est simplement ARGB 32 bits au lieu de valeurs de couleur RVB 24 bits.
Macke
2
je voudrais que ceux-ci fonctionnent également en CSS standard, mais avec l'alpha à la fin (semble plus naturel): #0001serait hex court pour «noir presque transparent» et #ffcc00ffserait le même que #ffcc00, c'est-à-dire «jaune mandarine complètement opaque»
moutons volants
56
consultez également le générateur de dégradé CSS3 sur Colorzilla qui a un tas de préréglages sympas et toutes les variantes compatibles avec plusieurs navigateurs pour atteindre le dégradé souhaité
andrhamm
donc, je l'ai vérifié, fonctionne sur tous les principaux navigateurs, mais cela ne fonctionne pas sur l'opéra, un indice?
WhoSayIn
peu importe, je viens de le trouver;)background-image: -o-linear-gradient(top,rgba(255,255,255,0),rgba(210, 230, 250,1));
WhoSayIn
101

La nouvelle syntaxe est prise en charge depuis un certain temps par tous les navigateurs modernes (à partir de Chrome 26, Opera 12.1, IE 10 et Firefox 16): http://caniuse.com/#feat=css-gradients

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

Cela rend un dégradé, allant du noir uni en haut à entièrement transparent en bas.

Documentation sur MDN .

George Filippakos
la source
7
.. crée du noir
uni en
Je suppose que c'est une suggestion et ne fonctionne pas réellement?
bart
15

Ce sont des trucs vraiment cool! J'avais à peu près la même chose, mais avec un dégradé horizontal du blanc au transparent. Et cela fonctionne très bien! Voici mon code:

.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
la source
1
pour référence, sur l'implémentation Microsoft, gradientType = 1 est horizontal, 0 est vertical.
Brooks
Les dégradés IE7 et IE8 ne spécifient aucune couleur alpha? Se fanent-ils vraiment pour devenir transparents?
KajMagnus
3

Voici mon code:

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ć
la source
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*/
}

J'ai trouvé cela dans w3schools et adapté à mes besoins pendant que je recherchais le dégradé et la transparence. Je fournis le lien pour faire référence à w3schools. J'espère que cela aide si quelqu'un recherche le dégradé et la transparence.

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

Je l'ai également essayé dans w3schools pour changer l'opacité en collant le lien pour le vérifier

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

J'espère que ça aide.

Sagar Buddhi
la source
1

Ce qui suit est celui que j'utilise pour générer un dégradé vertical de complètement opaque (haut) à 20% en transparence (bas) pour la même couleur:

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
la source
0

Je viens de tomber sur cet exemple plus récent. Pour simplifier et utiliser les exemples les plus récents, en donnant au CSS une classe de sélection de «grad», (j'ai inclus la compatibilité descendante)

.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 */
}

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

davidrynn
la source