Médiaforma

All posts tagged transparent

Pour définir une image GIF avec un fond transparent, l’application Paint, livrée avec Windows, n’est pas suffisante. Je vous suggère d’utiliser l’application Photofiltre, librement téléchargeable sur la page http://www.photofiltre.com.

Ouvrez l’image pour laquelle vous voulez définir un arrière-plan transparent. Lancez la commande Couleur de transparence dans le menu Image. Un message vous indique que la transparence n’est utilisable que sur des images qui contiennent 256 couleurs. Cliquez sur Oui pour continuer. Une boîte de dialogue intitulée Couleur de transparence est affichée. Dans l’image, cliquez sur la couleur que vous voulez rendre transparente, puis validez en cliquant sur OK. Il ne vous reste plus qu’à enregistrer l’image au format GIF.

Pour vérifier que l’arrière-plan de l’image est bien transparent, nous allons afficher l’image originale et l’image rendue transparente dans une page qui contient une image d’arrière-plan.

La ligne 4 définit l’arrière-plan de la page. Ici, il s’agit de l’image “fond-neige.jpg”. L’attribut style demande que l’image d’arrière-plan ne soit pas répétée.

Les lignes 5 et 6 affichent l’image originale et l’image rendue transparente.

Voici le résultat :


Dans cette rubrique, je vous propose d’ajouter un peu d’interactivité au code de la rubrique précédente en permettant à l’utilisateur de choisir l’épaisseur des bordures gauche et droite et donc, la pente du trapèze. Pour cela, nous allons utiliser une balise <input> de type range. Pour le moment, seuls les navigateurs Safari 5 et supérieur, Chrome 8 et supérieur et Opera 11 et supérieur représentent cette balise en utilisant un curseur. Dans un autre navigateur, cette balise se comportera comme uns simple zone de texte. Voici le rendu dans Google Chrome :

Voici le code utilisé :

Le code HTML contient une balise <div> pour représenter le trapèze et une balise <input type=”range”> pour représenter le curseur. Les attributs min, max, value et step permettent de définir (respectivement) la valeur minimale, la valeur maximale, la valeur par défaut et le pas de progression du curseur.

Le code CSS est identique à celui de la rubrique précédente. Nous n’y reviendrons pas.

Le code JavaScript est exécuté lorsque le curseur est modifié. La valeur transmise est this.value, c’est-à-dire la valeur courante du curseur, entre 0 et 200. Cette valeur sera manipulée sous le nom largeur dans la fonction JavaScript. Pour accéder aux bordures gauche et droite de la balise <div>, nous utilisons les propriétés JavaScript borderLeft et borderRight appliquées à l’élément trapeze. La valeur affectée à ces deux propriétés est identique. Elle est égale à la largeur transmise par le curseur complétée par l’aspect solide et transparent de la bordure.

C’est aussi simple que cela !


Cette rubrique est la suite logique d la précédente. Elle va vous montrer comment tracer un trapèze en affectant des bordures épaisses à une balise <div> vide de tout contenu et en masquant certaines de ces bordures. Dans un premier temps, nous allons tracer un carré de 100 pixels de côté et définir ses bordures pour obtenir le résultat suivant :

Voici le code utilisé :

Le code HTML définit une balise d’identifiant trapèze.

Le code CSS fixe la largeur de la balise <div> à 100 pixels et sa hauteur à 0 pixel. Si la hauteur n’avait pas été nulle, le tracé aurait eu une tout autre allure. Ici par exemple, nous fixons la hauteur à 100 pixels. Voici le résultat :

Cette zone correspond à la balise <div>, celle-ci à sa bordure inférieure et celles-ci à ses bordures gauche et droite. En fixant la hauteur à 0 pixel, le tracé donne un trapèze.

Il suffit maintenant d’affecter la valeur transparent aux bordures gauche et droite pour obtenir le résultat attendu.

Voici le code final :


Cette rubrique s’inspire de la précédente. Elle va vous montrer comment tracer des triangles en affectant des bordures épaisses à une balise <div> vide de tout contenu et en masquant certaines de ces bordures. Dans un premier temps, nous allons tracer un carré de 100 pixels de côté et définir ses bordures pour obtenir le résultat suivant :

triangles css3

Voici le code utilisé :

triangles css3

Le code HTML définit quatre balises <div> d’identifiants tr-bas, tr-haut, tr-gauche et tr-droite.

Examinons le code CSS.

La largeur de la balise d’identifiant #tr-bas est fixée à 0. Ainsi, le <div> corespondant aura une largeur fixe, indépendante de la taille de la fenêtre du navigateur.

En affectant la valeur 100px à la propriété border-top et la valeur 50px aux propriétés border-left et border-right, la balise <div> a une dimension de 100 pixels sur 100 pixels, et la bordure supérieure est deux fois plus grande que la bordure gauche ou que la bordure droite.

Pour transformer ce carré en une flèche orientée vers le bas, il suffit d’utiliser une couleur transparente pour les bordures gauche et droite, en affectant la valeur transparent aux propriétés border-left et border-right :

triangles css3

Les bordures gauche et droite disparaissent et seul un triangle orienté vers le bas est affiché :

triangles css3

En utilisant une technique similaire, il est facile de définir des triangles orientés vers le haut, vers la gauche ou vers la droite :

triangles css3

Voici le résultat :

triangles css3


Les formats d’image GIF et PNG permettent de définir une couleur de transparence. Vous pourrez ainsi superposer deux images en faisant en sorte que celle qui se trouve en avant-plan s’intègre parfaitement à celle qui se trouve en arrière-plan. Dans cette rubrique, je vais vous montrer comment obtenir cet effet :

Si le logiciel Photofiltre n’est pas encore installé sur votre ordinateur, rendez-vous sur la page http://www.photofiltre-studio.com/download.htm et installez-le.

Lancez Photofiltre en tapant photofiltre dans la zone de texte Rechercher du menu Démarrer. Ouvrez le fichier pour lequel vous voulez créer une couleur de transparence. Assurez-vous que ce fichier est au format GIF ou PNG, sans quoi, vous ne pourrez pas définir une couleur de transparence. Sélectionnez l’outil Baguette magique et cliquez sur la zone blanche qui entoure l’image. Cette zone est maintenant sélectionnée. Déroulez le menu Image, pointez Transparence automatique et cliquez sur Région intérieure à la sélection. Cette simple commande rend l’arrière-plan de l’image transparent. Sauvegardez l’image ainsi modifiée en lui donnant un autre nom. Ici, nous choisissons le nom chat-transparent.png.

Il ne reste plus qu’à écrire quelques lignes de HTML pour superposer le chat et l’arrière-plan.

La ligne 8 met en place l’image d’arrière-plan et l’affiche en haut et à gauche de la fenêtre du navigateur.

La ligne 9 affiche le chat au-dessus de l’arrière-plan. Pour ceux qui n’auraient pas suivi les rubriques précédentes, l’attribut z-index définit l’ordre de superposition des éléments. Plus sa valeur est grande, plus l’élément se trouve en avant-plan. Ici, le z-index du chat vaut 2 et celui de l’arrière-plan vaut 1 : le chat se trouve dont devant l’arrière-plan. Les coordonnées top et left sont initialisées à 80px et 40px pour centrer le chat sur l’arrière-plan.