28172 sujets

CSS et mise en forme, CSS3

Box-sizing et qualité d'image

Bonsoir les Alsacréateurs !

J'intègre un fond jpg comportant des nuances de gris :

- Lorsque celui-ci est affiché et redimensionner sur mon mac via Aperçu les tons continus sont respectés
- Lorsque celui-ci est affiché et redimensionner avec un navigateur (ici Chrome) les tons continus ne sont pas respectés (le rendu est moche Smiley bawling ).

Voici un aperçu (à afficher en 100%) :
upload/59909-degrade.png

Savez-vous s'il est possible d'améliorer le rendu ?

D'avance mille mercis !

dA
C'est peut être une question de résolution de l'image, trop réduite, mais quoi qu'il en soit il vaux effectivement mieux passer par linear-gradient ou dans ce cas précis par radial-gradient (cf. support).
Modifié par Olivier C (27 Jan 2016 - 07:55)
Merci Olivier C et Felipe pour vos contribution !

Je vous fait part de mes recherches Smiley cligne

Il s'agit d'un cas particulier car je pars d'un gris très foncé vers un noir presque total : donc peu d'étapes entre les deux. Les bandes sont inévitables sans application d'un filtre de "dithering".

Ce filtre semble être appliqué automatiquement -ou non- par le navigateur / os en fonction de la source du dégradé (CSS, SVG ou bitmap).

J'ai pensé pouvoir forcer un pseudo dithering en ajoutant du "bruit" via http://www.mightymeta.co.uk/css-noise/ (le résultat n'est pas convaincant).

J'ai essayé :
- le gradient CSS (mais IE et Edge ne supporte pas les dégradés multiples)
- le dégradé encapsulé dans un SVG depuis Illustrator*
- le dégradé généré sur Photoshop et exporté en bitmap (jpg)**

*Note : pour le SVG depuis Illustrator il est important d'utiliser une couleur de départ et de fin
**Note : un effet de bruit (gaussien monochromatique de 5) a été ajouté pour mieux "fondre" le dégradé

Version SVG :
http://codepen.io/dasys/pen/pgLMYp

Version Bitmap :
http://codepen.io/dasys/pen/qbYWKb

Voici les résultats :

Windows 7 :
Edge > ? bitmap / ? SVG
Chrome > ? bitmap / ? SVG
Firefox > ? bitmap / ? SVG

Mac OS X (10.10) :
Safari > ? bitmap / ? SVG
Chrome > ? bitmap / ? SVG
Firefox > ? bitmap / ? SVG

Au niveau rendu le bitmap gagne sur SVG (même si j'aurais préféré ce dernier)

Bien à vous.
Et un truc comme ceci (à adapter selon vos besoins) :
body {
  min-height: 100vh; /* il faut une hauteur minimum */
  background-image: -webkit-radial-gradient(50% 50%, circle cover, #777, #000 50%);
  background-image: radial-gradient(50% 50%, circle cover, #777, #000 50%);
}

Cela ne conviendrait pas ?

Voir en ligne
Merci Olivier C !

J'avais écarté le radial-gradient car j'ai besoin d'en avoir plusieurs et IE/Edge ne supporte pas à priori les gradients multiples.
Sujet clos
Aller à