Ressources en ligne pour générer des dégradés CSS3 - des nuls

La possibilité de générer des dégradés complexes est l'une des améliorations les plus spectaculaires de CSS3. Jusqu'à l'avènement de CSS3, les concepteurs utilisaient des fichiers d'image en mosaïque pour créer des arrière-plans texturés derrière les pages et les éléments de conception (comme les balises). Ces fichiers d'images ralentissaient les pages et semblaient collants lorsqu'ils étaient téléchargés lentement dans les pages ouvertes par un utilisateur.

Voilà les bonnes nouvelles.

L'inconvénient est que la définition de la syntaxe même pour un simple dégradé linéaire est un problème car les différents navigateurs ont une syntaxe différente pour définir même ces dégradés simples. Et quand il s'agit de définir des dégradés diagonaux ou radiaux, les différences entre la syntaxe du navigateur deviennent encore plus flagrantes.

Juste pour donner une idée de cela, examinez le CSS requis pour produire l'image de fond dans la figure ci-dessous:

background: -moz-radial-gradient (centre, ellipse cover, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * FF3. 6+ * / arrière-plan: -webkit-gradient (radial, centre centre, 0px, centre centre, 100%, arrêt de couleur (0%, rgba (228, 245, 252, 1)), arrêt de couleur (50%, rgba (191, 232, 249, 1)), color-stop (51%, rgba (159, 216, 239, 1)), color-stop (100%, rgba (42, 176, 237, 1)))); / * Chrome, Safari4 + * / arrière-plan: -webkit-radial-gradient (centre, ellipse couverture, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * Chrome10 +, Safari5. 1+ * / arrière-plan: -o-radial-gradient (centre, couverture d'ellipse, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * Opera 12+ * / arrière-plan: -ms-radial-gradient (centre, ellipse cover, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * IE10 + * / fond: radial-gradient (ellipse au centre, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1 51%, rgba (42, 176, 237, 1) 100%); / * W3C * /

Alors, qu'est ce qu'un pauvre designer à faire? Heureusement, il existe plusieurs générateurs de gradient CSS très utiles en ligne. Voici trois des meilleurs:

Ultimate CSS Gradient Generator de ColorZilla

Probablement le plus puissant des générateurs de dégradé CSS3, le Ultimate CSS Gradient Generator permet aux concepteurs de définir des dégradés avec des curseurs confortables pour tous ceux qui ont défini un dégradé. Illustrator, CorelDraw ou d'autres programmes de dessin, montrés ici:

Le générateur de dégradé CSS Ultimate fournit également des options pour générer des images SVG qui seront reconnues dans Internet Explorer 9 (qui a un support limité pour les dégradés CSS3).

Générateur de dégradés CSS3

Le générateur de dégradés CSS3, créé par Damian Galarza, a quelques fonctionnalités de moins que le générateur de dégradé CSS Ultimate, mais une interface très propre et accessible facilite la création de mélanges linéaires et diagonaux de base. regarder le code CSS apparaître sur l'écran.

Cette ressource est particulièrement pratique pour créer un arrière-plan dégradé pour les boutons, car la fenêtre de prévisualisation est un joli carré de taille préconfigurée et propre.

Créateur d'arrière-plan dégradé CSS

Certains mecs dans un garage près de Seattle ont mis en place un puissant générateur de dégradé CSS3 qu'ils appellent CSS Gradient Background Maker. Ils ont une autre start-up qu'ils appellent Microsoft, et les dégradés que vous générez ici fonctionnent - oui, Internet Explorer (versions 10 et ultérieures), mais aussi tous les autres navigateurs actuels.

Le CSS Gradient Background Maker est peut-être le moyen le plus rapide de créer des dégradés, car il contient plus d'une douzaine de préréglages.

Fonctionnement des générateurs de dégradés CSS3

Les trois générateurs de dégradés CSS3 répertoriés ici et d'autres génèrent des blocs de code CSS3 que les concepteurs peuvent copier et coller dans des fichiers CSS. Les générateurs ne fournissent pas beaucoup d'aide pour ce faire - ils s'attendent à ce que vous soyez capable de gérer les arrière-plans CSS3 pour les éléments et les sélecteurs de classe et div dans un fichier CSS.

Mais le processus n'est pas trop dur. Par exemple, si vous créez un style de classe et le nommez. En arrière-plan, vous pouvez copier et coller un style de dégradé dans ce sélecteur comme indiqué ici:

. background {/ * IE10 Consumer Preview * / image de fond: -ms-radial-gradient (centre, cercle le plus proche, #FFFFFF 0%, # 00A3EF 100%); / * Mozilla Firefox * / image de fond: -moz-radial-gradient (centre, cercle le plus proche, #FFFFFF 0%, # 00A3EF 100%); / * Opera * / background-image: -o-radial-gradient (centre, cercle le plus proche, #FFFFFF 0%, # 00A3EF 100%); / * Webkit (Safari / Chrome 10) * / background-image: -webkit-gradient (radial, centre du centre, 0, centre du centre, 140, arrêt de la couleur (0, #FFFFFF), arrêt de la couleur (1, # 00A3EF)); / * Webkit (Chrome 11+) * / image de fond: -webkit-radial-gradient (centre, cercle le plus proche, #FFFFFF 0%, # 00A3EF 100%); / * W3C Markup, IE10 Release Preview * / image de fond: radial-gradient (cercle le plus proche-côté au centre, #FFFFFF 0%, # 00A3EF 100%);}

Et puis, vous pouvez appliquer l'arrière-plan à tout élément dans votre fichier HTML. Ici, l'arrière-plan est appliqué à une balise:

(contenu ici)