Table des matières:
Vidéo: Comment faire un fondu entre 2 images ? [TUTO PHOTOSHOP] 2025
Vous avez déjà vu un certain nombre d'autres programmes décrits qui créent des images en dégradé. Il semble que chaque site, y compris CSS3, en fournit un. Le Dynamic Image Gradient Dynamic Drive Maker est différent, cependant: Il crée en fait un fichier image, plutôt que de créer CSS qui crée finalement une image à l'écran.
La différence est importante. L'utilisation d'une image signifie que le navigateur doit uniquement prendre en charge les images - ce que tous les navigateurs actuels peuvent faire - mais lorsque vous utilisez des CSS, vous devez savoir que le navigateur hôte prend en charge le niveau requis de CSS. Vous accédez à Gradient Image Maker en cliquant sur Image de dégradé dans le menu Outils de la page principale.
Le Gradient Image Maker arbore une interface simplifiée. Il vous suffit de sélectionner le type de dégradé que vous souhaitez créer (horizontal, vertical ou diagonal), définir la taille du dégradé et choisir les couleurs que vous souhaitez utiliser.
Lorsque vous choisissez une couleur, vous pouvez soit cliquer dans une zone du sélecteur de couleur, soit saisir le code hexadécimal de la couleur que vous voulez utiliser. Il y a peu de flexibilité dans l'utilisation de cet outil. Il est spécialement conçu pour fournir un moyen simple et rapide de créer un dégradé.
Lorsque vous êtes satisfait du dégradé, choisissez un format de sortie d'image. Le format JPEG produira généralement des fichiers plus petits, tandis que le format PNG produira généralement des fichiers de meilleure qualité. Cliquez sur Obtenir l'image en taille réelle et vous voyez un autre onglet ouvert avec l'image de dégradé que vous avez demandée. Cliquez avec le bouton droit sur l'image et choisissez Enregistrer l'image sous dans le menu contextuel pour enregistrer l'image sur votre disque dur.
Il y a un truc pour utiliser l'image comme arrière-plan. HTML prend en charge un attribut d'arrière-plan pour l'étiquette. Supposément, cet attribut est obsolète et vous ne devriez pas compter sur le fait qu'il soit disponible pour toujours. Cependant, il fonctionne toujours dans tous les navigateurs (et sur toutes les plateformes). Le code suivant utilise l'attribut background et affichera une page avec le dégradé en tant qu'image d'arrière-plan dans la taille demandée.
Test d'une image de dégradéTest d'une image de dégradé
Exemple de texte
Cette technique présente l'avantage de ne pas utiliser de forme de CSS pour afficher l'image, mais risque que les modifications futures sont apportées à la façon dont le HTML fonctionne dans les navigateurs. Pour l'instant, cependant, il semble que chaque navigateur sur la planète supporte encore cette méthode particulière d'affichage d'une image d'arrière-plan (quand certains n'utiliseront pas la méthode CSS). C'est ce que le dégradé ressemble en action.
La façon actuelle d'utiliser l'image est de l'appliquer en utilisant CSS. Dans ce cas, vous l'appliquez en utilisant la propriété background pour le style de corps, comme indiqué ici.
Test d'un corps d'image de dégradé {background: url ("Gradient. JPG"); background-size: 80px 80px;}
Test d'une image de dégradé
Exemple de texte
L'avantage de cette approche est que vous pouvez contrôler la taille de l'arrière-plan, l'origine et d'autres caractéristiques. L'utilisation de CSS, dans la mesure du possible, augmente considérablement la flexibilité d'utilisation d'une image en dégradé. Cependant, si vous utilisez CSS de toute façon, il est souvent avantageux d'appliquer le dégradé lui-même en utilisant CSS.
Le principal avantage de l'utilisation d'une image par rapport à un CSS pur est que vous pouvez rapidement échanger une image pour une autre, en utilisant l'une des nombreuses techniques pour modifier l'apparence de la page, sans écrire de nouveau code.
