+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Gradient (Dégradés) CSS -vs- Images (/showthread.php?tid=7651)
Gradient (Dégradés) CSS -vs- Images - @lucard - 23-05-2016
Voilà j'ouvre un débat - sujet de discussion - pour savoir ce que vous utilisez, et quel avantage cela vous apporte ?
Les gradient en CSS 3 - vs - Gradient Images.
Avantages :
Gradient Images
- Possibilité de faire des formes de dégradé particuliers(courbes et forme complexes)
- Rapidité d’exécution (via Photoshop par exemple).
- Compatible avec tous les navigateurs
CSS 3
- Animation très simple
- Permet des opacités aussi complexe qu'une image .png
- Rapide à modifier (pas besoin de refaire d'image)
- Rapide à charger [?*]
*Sérieusement j'en sais rien, j'ai jamais fais de chrono sur les "chargements" des gradients entre image et css... mais c'est une impression.
Et vous ? Qu'utilisez-vous ?
RE: Gradient (Dégradés) CSS -vs- Images - Xenos - 23-05-2016
CSS Gradients fonctionne sur tout navigateur.
Perso, si un élément sert de décoration, alors je le fais en CSS. De là, soit le CSS crée son propre gradient si c'est possible, soit le CSS utilise une ressource (interne en data URI ou externe via une URI), qu'elle soit SVG (parfaitement adapté aux gradients complexes) ou PNG (adaptés pour du raster). Les illustrations (HTML figure) sont toujours des images externes, PNG ou SVG, même s'il s'agit juste d'un dégradé.
Niveau rapidité de chargement, je n'ai pas non plus testé, mais ce qui est certain, c'est qu'un dégradé simple CSS sera plus léger à transférer qu'une image PNG ou SVG de ce même dégradé. Mais ce genre de considération est hyper-marginal quand on veut choisir entre l'un ou l'autre.
RE: Gradient (Dégradés) CSS -vs- Images - Argorate - 23-05-2016
Pour les dégrader simple, qu'on peut faire avec CSS, je choisis CSS
RE: Gradient (Dégradés) CSS -vs- Images - Prélude - 24-05-2016
Par principe : si ça peu être réalisé en CSS, alors CSS.
Donc, hormis le cas de dégradés dans des formes, impossible à réalisé (aujourd'hui) en CSS, il faut prendre les CSS.
- compatible avec tous les navigateurs (sauf IE --, mais bon...)
- léger puisque quelques lignes de textes et rapide à exécuter (même si ça prend un peu de temps, ce sera toujours moindre par rapport à une image)
- facile à modifier : rien que pour cette raison, je prends les CSS.
- tu peux obtenir de la transparence en utilisant les couleurs RGBA : rgba(0, 0, 255, 0.5) => bleu à 50% d'opacité
RE: Gradient (Dégradés) CSS -vs- Images - Xenos - 24-05-2016
(sauf IE --, mais bon...)
Compatible IE11, et Microsoft ne fait plus le support que pour IE11 depuis Janvier (je n'ai plus le lien exact, mais c'est sur leur site); donc les autres versions sont officiellement obsolètes.
RE: Gradient (Dégradés) CSS -vs- Images - Prélude - 24-05-2016
Oui, quand j'indiquais "IE --" c'était pour dire des version "moins moins", anciennes.
RE: Gradient (Dégradés) CSS -vs- Images - Sôbi - 24-05-2016
Personnellement, je suis plutôt CSS. Du moins, pour les dégrader simples.
Il me semble avoir pu voir ( il y a TRES longtemps ) une petite différence de chargement ( surement du au réseau ).
RE: Gradient (Dégradés) CSS -vs- Images - @lucard - 24-05-2016
@ Xenos :
Effectivement je ne parle pas de HTML figure, mais je voulais savoir s'il y avait des "graphistes" qui faisaient encore leur "webdesign" avec des dégradés (simples) en png/jpg ou gif... (genre pour Netscape)
Après si on veux faire un élément comme celui-ci...
![[Image: titre_encart_droite.png]](http://www.starwars-universe.com/images/interface/v6/titre_encart_droite.png)
c'est chiant à faire simplement en css3
RE: Gradient (Dégradés) CSS -vs- Images - Xenos - 24-05-2016
(24-05-2016, 02:17 PM)@lucard a écrit : Après si on veux faire un élément comme celui-ci...Tu peux toujours embarquer le SVG, avec lequel on peut facilement faire ce genre de forme, dans le document CSS