formateur informatique

Aspect carte de visite sur des images avec les styles CSS

Accueil  >  Technique  >  CSS  >  CSS Astuces  >  Aspect carte de visite sur des images avec les styles CSS
Livres à télécharger


Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


    Inscription Newsletter
Sujets que vous pourriez aussi aimer :


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.

Galerie photos Html dans des cartes de visite grâce aux styles Css

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. Nous réceptionnons le fichier de la page Web, nommé index.htm. Les photos sont stockées dans le sous dossier img tandis que les feuilles de styles sont placées dans le sous dossier css.
  • Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
Photos placées les unes sous les autres dans la page Web Html

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++,
En entête de la structure Html, vous notez la présence de la déclaration de deux feuilles de styles. Comme l'indiquent les chemins relatifs, elles sont toutes deux placées dans le sous dossier local css.

...
<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++,
Nous accédons ainsi au code Css de la seconde feuille de styles. Le moins que l'on puisse dire est qu'elle est dépouillée à ce stade. Deux styles existent déjà néanmoins. Tous deux se chargent uniquement de fixer la largeur à 250 pixels. Le premier concerne les calques contenant les images. La syntaxe du second est intéressante (carte img). Le nom du style est rappelé mais il est suivi de l'élément Html img. Ses réglages ne concernent donc pas toutes les images mais seulement celles contenues dans les calques affectés à la classe carte.
  • Dans le premier style (carte), ajouter l'instruction Css suivante :
.carte
{
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.

Placer les images les unes à côté des autres sur une page Web Html grâce au style Css float

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 :
.carte
{
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.

Espacer les images à l-horizontale sur une page Web Html grâce à l-attribut Css Margin

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 :
.carte
{
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.

Bordures d-encadrement des photos en forme de cartes de visite sur page Html avec les styles Css



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 :
.carte
{
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.

Eloigner les images Html des bordures avec l-attribut Css padding

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 :
.carte
{
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.

Modifier la couleur de fond des cartes de visite avec les styles Css pour album photos Html

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 :
.carte
{
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.

Ombres portées Css sur les images de l-album photos Html

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 :
.carte img
{
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.

Bordures sur les images grâce aux attributs Css background-color et padding

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



Abonnement à la chaîne Youtube
Partager la formation
Partager sur Facebook
Partager sur Twitter
Partager sur LinkedIn