28172 sujets

CSS et mise en forme, CSS3

Qualité de rendu d'un arrière plan en dégradé

Bonjour,

Je m'en remets à votre entraide si quelqu'un aurait une explication ou une piste parce que là Smiley rolleyes ...

Mon cas est très simpliste, j'applique à un élément un arrière plan de type dégradé horizontal avec deux tons de couleurs. Jusque là rien de bien compliqué...

.banner-gradient {
      background-image: linear-gradient(90deg,#0d968a 0,#1b3a37);
  height: 380px;
}


Mais mon problème survient au niveau du rendu dans le navigateur. Comment se peut-il que j'obtienne un dégradé avec une qualité de rendu graphique différent. Dans ma page il ne parait pas lisse, on distingue les différentes "étapes" du dégradé, alors que ce même code testé sur codepen me donne un meilleur rendu ( plus lisse, plus propre ). Je vous joint une capture d'écran pour illustrer ( PS: ne pas prêter attention à l'ombre portée de la fenêtre développeur projetée sur le haut du premier dégradé ).

Lien vers la capture d'écran en taille réelle

Aperçu :
upload/1501231923-66781-render-linear-gradient.png

En haut on constate que le rendu graphique du dégradé est meilleur que sur la fenêtre du bas. Alors peut-être qu'il existe une propriété css pour améliorer le lissage des dégradés... Mais je n'ai rien trouvé à ce sujet. Alors je suis preneur de toutes informations Smiley cligne

Lien codepen :
https://codepen.io/anon/pen/oejGRZ

Merci d'avance
Modifié par tkbim_03 (28 Jul 2017 - 11:04)
Modérateur
Est-ce que si tu déplaces le <div> qui contient ton gradient au plus haut niveau du DOM (directement dans body), tu obtiens une différence ?

Il me semble avoir déjà eu ce genre de chose, mais je ne me souviens plus si c'est lié a une position absolute, un z-index, ou autre...
Il me semble que c'était lié à une propriété (anodine) parente.
Merci pour ta réponse Yordi.

Malheureusement çà ne change rien d'après mes tests. J'ai même fait une nouvelle tentative avec cette fois-ci un dégradé radial.

Nouvelle capture d'écran en taille réelle

Nouvel exemple sur codepen

Sur codepen le rendu est impeccable, j'exporte le rendu et rassemble tout ca dans un fichier .html
J'ouvre le fichier dans les navigateurs ( chrome / firefox / safari / opera ) et hop le rendu est une nouvelle fois "altéré". Il semblerait vraiment manquer d'une propriété ou d'une surcharge de "lissage".

Code html testé :
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Test gradient</title>
        <style>
            .banner-radial-gradient{
            height:380px;
            background: #282537;
            background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
            background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
            background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
            background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
        }
        </style>
    </head>

    <body>
        <div class="banner-radial-gradient"></div>
    </body>

</html>
Modérateur
Ok, je viens de faire le test aussi en local avec les 2 possibilités (Chrome 59) et ça fonctionne parfaitement chez moi...
Modifié par Yordi (28 Jul 2017 - 13:31)
Pour moi le rendu n'est pas impeccable dans codepen. Sur firefox et safari je vois les cercles alors que sur chrome non. Et je pense que tu ne peux rien faire pour ça car cela est relatif au rendu de chaque navigateur.
Administrateur
Hello,

Il me semble également que ce souci est potentiellement lié à plein de causes possibles : OS, carte graphique, navigateur, etc.
Bizarrement sous chrome quand je clique sur le lien codepen la page se rafraîchit sans arrêt et je ne peux visualiser quoique se soit. Sous Firefox ça marche impec. Quelqu'un sait pourquoi?
Raphael a écrit :
Hello,

Il me semble également que ce souci est potentiellement lié à plein de causes possibles : OS, carte graphique, navigateur, etc.


En effet sur mon PC perso avec firefox, je n'ai pas de soucis.
Sujet clos
Aller à