Cet exercice consiste a créer une galerie d’images pas à pas.
Consignes de l’exercice
Téléchargez la totalité des fichiers de travail (.html, .css et images) afin de réaliser l’exercice.
Pour télécharger un fichier, faites un clic droit sur le fichier désiré et choisissez l’option Télécharger.
Pour télécharger plusieurs fichiers, sélectionnez les fichiers désirés puis cliquez sur Télécharger les sélectionnés. Les fichiers seront téléchargés sous la forme d’une archive .zip. Veillez à bien extraire le contenu de l’archive avant de commencer à travailler.
La première étape est de configurer la couleur d’arrière-plan de la page et la police par défaut.
Quel est l’élément HTML qui contient tous les autres ?
Positionnez les éléments de la galerie. Les conteneurs des images div doivent être positionnés pour s’afficher côte à côte. Observez bien le code HTML pour trouver le sélecteur CSS adapté.
Vous devez modifier les éléments div qui se trouvent dans l’élément avec l’id galerie.
Une fois le bon sélecteur trouvé, vous pouvez utiliser du positionnement flottant ou une flexbox.
Positionnement les titres sur les images. Pour cela, positionnez les éléments de paragraphe afin qu’ils se retrouvent par dessus les images.
Un élément positionné en absolu sera positionné par rapport à son ancêtre le plus proche qui a été positionné…
Mettez en forme les étiquettes, elles sont mises sur un fond avec une opacité de 60%.
Il existe plusieurs méthodes pour coder les couleurs en CSS : hexadécimal, rgb et rbga.
Mettez en forme des vignettes de la galerie. Le trait gris visible sur la partie zoomée est une bordure. Ce trait blanc peut être obtenue soit avec une bordure, soit avec une marge.
Ajoutez des icônes. En utilisant les éléments inline span, ajoutez une icône en haut à droite des vignettes. L’icône est fournie dans l’archive. Tout doit être fait en CSS, il n’y a aucune modification à apporter au HTML. Utilisez la propriété background pour mettre l’image dans le span.
Ajout des effets au survol, au passage de la souris sur les div, les bordures doivent changer de couleur et les éléments p doivent être masqués.
Sauf mention contraire*, l'article Positionnement en CSS : Galerie d’images [CSS06] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.
Bonjour, merci beaucoup pour ce tuto ! ça m’a bien aidée 🙂