Aspect carte de visite sur des images avec les styles CSS
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Carte Image en Css
Dans ce nouveau volet sur les astuces Css, nous laissons un temps de côté les effets d'animation. Ici, il est question d'enjoliver la présentation des galeries photos en enrobant les images dans des cartes de visite.
Dans l'exemple illustré par la capture, chaque photo est intégrée en vignette dans sa carte de présentation. Et nous allons le voir, ceseffets se réalisent avec quelques très simples réglages en Css.
Structure Html et Css
Pour la démonstration de cette astuce, nous suggérons de récupérer quelques sources offrant notamment les images et une page Web structurée.
- Télécharger le fichier compressé cartes-images-css.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
A l'affichage de la page Web, la surprise est de taille. Les trois photos sont bien présentes mais disposées les unes sous les autres, sans aucun artifice de présentation. Nous sommes a priori très loin du résultat à atteindre. Pourtant non et nous le verrons grâce à la magie des styles Css.
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel qui s'invite, choisir de l'ouvrir avec un éditeur comme le Notepad++,
...
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<link rel='stylesheet' href='css/mes-styles.css'>
<link rel='stylesheet' href='css/les-styles.css'>
<body>
...
La première gère l'organisation globale de la page Web. C'est la seconde que nous allons implémenter pour créer ces effets de cartes de visite. Avec des codes Css séparés, nous y verrons plus clair.
Plus bas dans le code Html et plus précisément dans la balise d'identifiant auCentre, vous trouvez la présence des trois images.
...
<div id='auCentre'>
<!--
Implémentation
-->
<div class='carte'>
<img src='img/photo1.jpg' alt='Route Napoléon'>
<strong>La route Napoléon</strong><br />
Sur la route des vacances
</div>
<div class='carte'>
<img src='img/photo2.jpg' alt='Village de Seillans'>
<strong>Seillans</strong><br />
Village du haut Var
</div>
<div class='carte'>
<img src='img/photo3.jpg' alt='Le Claps à Luc-en-Diois'>
<strong>Le Claps</strong><br />
En Drôme Provençale
</div>
</div>
...
Elles sont toutes encapsulées dans un calque (Balise div) affecté à la même classe nommée carte. C'est ce style Css que nous allons retravailler pour produire ces effets visuels.
Disposition flottante
Le premier objectif est de remonter ces images sur la même ligne afin de les présenter côte à côte.
- A la racine du dossier de décompression, double cliquer sur le sous dossier Css,
- Dès lors, cliquer droit sur le fichier les-styles.css,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
- Dans le premier style (carte), ajouter l'instruction Css suivante :
{
width:250px;
float:left;
}
Avec l'attribut float réglé à left, nous rendons ces calques flottants. En d'autres termes, nous les autorisons à se placer les uns à côtés des autres, tant que la largeur disponible le permet.
Si vous rafraîchissez le cache du navigateur (CTRL + F5), vous constatez en effet que les photos se présentent désormais sur la même ligne.
Espacer les images
Il est maintenant question d'aérer la présentation en espaçant les images. Pour cela, nous allons simplement jouer sur les marges qui les entourent.
- A la suite du style, ajouter l'instruction Css suivante :
{
width:250px;
float:left;
margin:5px;
}
Comme nous ne précisons pas le côté concerné, avec l'attribut margin général, ce sont toutes les marges qui sont ciblées, aussi bien celle du dessus ou du dessous que celles des côtés. De fait, entre deux images, la marge de droite de la première se cumule avec la marge de gauche de la deuxième. L'espace s'étend donc à 2x5 soit 10 pixels.
Si vous enregistrez les modifications et que vous actualisez le cache du navigateur (CTRL + F5), vous constatez l'effet produit.
Les photos sont désormais décollées et à coups de légères instructions Css, notre présentation prend forme petit à petit.
Bordures des calques photos
Nous souhaitons matérialiser les cadres de ces calques avec des bordures. Et bien entendu, il existe un attribut dédié avec les styles Css.
- A la suite du style, ajouter l'instruction Css suivante :
{
width:250px;
float:left;
margin:5px;
border:#ccc 1px solid;
}
Nous exploitons l'attribut border, là encore dans sa forme générale, sans préciser le moindre côté. Ce sont donc toutes les faces qui sont ainsi concernées. Nous précisons d'abord la couleur (#CCC). Il s'agit d'un gris plutôt clair pour plus de sobriété. Nous définissons une épaisseur fine à 1 pixel, là aussi pour plus de sobriété. Enfin, nous définissons le style de la bordure avec la valeur solid. De cette manière, nous obtiendrons un trait d'encadrement continu.
Une fois encore, il convient d'enregistrer les modifications et de rafraîchir le cache du navigateur (CTRL +F5). Les bordures apparaissent. Elles encadrent bien l'ensemble du calque, soit la photo avec son texte descriptif. Ces petites cartes commencent à prendre forme peu à peu. Mais pour que l'illusion soit meilleure, nous avons besoin d'espacer les bords de la carte de la photo.
Décalage interne
Pour que les photos ne soient pas collées aux bordures des calques qui possèdent exactement les mêmes dimensions, nous devons repousser les images vers le centre et ce par les quatre côtés. En Css, c'est l'attribut padding qui permet de réaliser ces décalages internes.
- A la suite du style, ajouter l'instruction Css suivante :
{
width:250px;
float:left;
margin:5px;
border:#ccc 1px solid;
padding:10px;
}
Là encore nous exploitons cet attribut dans sa version générale. Sans autre précision, il repousse l'image par les quatre côtés, donc vers le centre.
Après enregistrement et actualisation du cache du navigateur, vous pouvez apprécier l'effet produit.
Le fond de la carte de visite
Pour un aspect plus tranchant, il apparaît opportun de différencier la couleur des cartes de celle du fond de la page. Nous proposons tout simplement de leur appliquer un arrière-plan blanc.
- A la suite du style, ajouter l'instruction Css suivante :
{
width:250px;
float:left;
margin:5px;
border:#ccc 1px solid;
padding:10px;
background-color:#fff;
}
C'est bien l'attribut background-color qui permet de fixer la couleur d'arrière-plan. Avec cette valeur hexadécimale, nous la fixons sur le blanc.
Une fois les modifications enregistrées et le cache du navigateur actualisé, vous pouvez apprécier l'impact de ce petit réglage. Plus que jamais, nos cartes de visite prennent vie. Mais ce n'est pas terminé.
L'ombre portée
Le relief est intéressant pour dégager ces cartes de l'arrière-plan. Et ce relief, nous pouvons l'obtenir en appliquant une légère ombre portée à ces calques.
- A la suite du style, ajouter cette dernière instruction Css :
{
width:250px;
float:left;
margin:5px;
border:#ccc 1px solid;
padding:10px;
background-color:#fff;
box-shadow:5px 5px #ccc;
}
C'est l'attribut Css box-shadow qui permet de créer une ombre portée. Il est possible de lui passer de nombreux paramètres. Ici, nous l'exploitons dans sa version simple. En premier paramètre, nous définissons le décalage horizontal de l'ombre. En second paramètre, nous fixons le décalage vertical. Enfin, en troisième paramètre, nous réglons la couleur de l'ombre sur un gris assez clair.
Comme toujours après avoir enregistré les modifications et actualisé le cache du navigateur, vous pouvez apprécier le rendu.
Les vignettes d'images prennent vie.
Bordures des images
Pour peaufiner la présentation de ces cartes, nous souhaitons attribuer une légère bordure aux photos. Pour appliquer une bordure aux images, l'astuce consiste premièrement à définir une couleur de fond, non visible par défaut puisque masquée par l'image. Ensuite, un décalage interne, comme celui que nous avons opéré précédemment, contraint la photo vers son centre. De fait, l'arrière-plan surgit sur les quatre côtés et donne l'illusion d'une bordure.
- A la suite du style carte img cette fois, ajouter les deux instructions Css suivantes :
{
width:250px;
background-color:#ccc;
padding:1px;
}
Avec l'attribut background-color, nous fixons l'arrière-plan sur un gris clair. Avec l'attribut padding, nous contraignons légèrement l'image pour créer une bordure d'un pixel.
Après enregistrement et actualisation du cache, vous notez que nous sommes parvenus au résultat final. L'effet de bordure sur les images est volontairement discret, une fois encore pour une présentation sobre.
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
