Code-Web.org - css

Effet encadrement photo avec ombre sur vos images

Thierry Geindre — Thu, 15 Nov 2007 10:56:00 +0000

Je vous propose de découvrir dans cet article comment donner à vos images un encadrement blanc, un contour gris et enfin une ombre. L'objectif est de leur donner l'apparence d'une photo papier surélevée par rapport à votre page. La technique qui sera présenté ici ne nécessitera aucune modification de vos images, et pourra donc s'appliquer à n'importe laquelle de façon automatique.

Notre objectif est de créer un système qui mettra en place, sur vos images, le cadre et l'ombre sans modifier l'image originale. Nous n'utiliserons ici que du CSS et une image.

Le principe

Il est possible d'afficher une image dans un bloque. On peut donc très facilement appliquer à ce bloque une marge interne (padding) de plusieurs pixels. Ceci créer une première bordure de la couleur de fond de notre bloque. Nous pouvons alors exploiter la propriété CSS border pour ajouter une seconde bordure d'un pixel de large et grise par exemple. Il ne nous manquera alors plus que l'ombre.

Impossible en CSS de générer une ombre. C'est pourquoi nous allons simplement utiliser une image en PNG. C'est le seul format adapté au web qui gère très bien la couche alpha (transparence). Cette image nous fournira une ombre à droite et en bas (à adapter pour des ombres orientés différemment). Finalement, on essaiera simplement de fusionner deux images.

Une image quelconque :

Et l'image qui nous fournit l'ombre :

Mise en œuvre

Pour que les images puissent se superposer, l'une d'entre elles doit être placée en arrière plan d'un bloque. Nous exploiterons l'arrière plan du bloque de l'image (pour obtenir une bordure blanche). Nous devrons donc placer autour de l'image un autre bloque chargé de contenir l'ombre. Nous utiliserons alors le code html suivant :

<p><span class="shadowImage"><img src="montagnes.png" alt="montagnes" /></span></p>

Le span encadrant l'image n'a pas d'autre but que de créer le second bloque dont nous aurons besoin pour placer l'image générant l'ombre en arrière plan. Dans notre fichier CSS, on utilisera le code suivant :

.shadowImage
{
  /* On met notre span en bloque */
  display:block;
 
  /* On lui applique un float left, il sort ainsi du flux standard
  et n'occupera pas toute la largeur disponible comme il l'aurait
  fait normalement */
  float:left;
 
  /* On place notre ombre en arrière plan en bas à droite */
  background: url('images/shadowAlpha-mini.png') no-repeat bottom right;
 
  /* Quelques marges pour le style... */
  margin: 10px 0 0 10px;
}
 
.shadowImage img
{
  /* On fixe notre image en format bloque */
  display: block;
 
  /* On définit sa position à relative pour plus de liberté */
  position: relative;
 
  /* Son fond est blanc pour obtenir une bordure de cette couleur*/
  background-color: #fff;
 
  /* Une autre bordure */
  border: 1px solid #a9a9a9;
 
  /* Les marges positives servent à aficher les ombres,
     les marges négative sortent l'image de son coteneur */
  margin: -6px 6px 6px -6px;
 
  /* Marge interne pour la bordure blanche */
  padding: 4px;
 
}

Notez qu'il faudra utiliser une image assez grande pour produire une ombre sur des images de plus grande taille. Vous pouvez maintenant admirer le résultat.

Conclusion

Le seul problème que pose vraiment la méthode utilisée, c'est qu'il est impératif d'ajouter un conteneur supplémentaire à l'image. L'article dont je me suis inspiré pour ma rédaction proposait de l'encadrer d'un div. Je pense que pour respecter la valeur sémantique des éléments de la page, il est préférable d'utiliser le span. D'autre part, si vous utilisez cet effet sur une image encadrée par un lien, vous pouvez utiliser ce lien comme conteneur supplémentaire.

Sources

Cet article est inspiré d'un article sur alistapart.com. Si l'anglais ne vous pose pas de problème, je vous invite à le lire pour plus de détails sur la méthode utilisée.

Je profite de l'occasion pour signaler l'existence du site freemages.fr qui propose des tonnes d'images sous Licence Art Libre. C'est de là que vient la photo de montagnes utilisée en exemple dans cet article.

Un min-height pour tous les navigateurs

Thierry Geindre — Wed, 07 Nov 2007 15:58:00 +0000

Parfois, certaines chartes graphiques requièrent que certains bloques d'une pages aient une hauteur minimale. Ce comportement peut être obtenu grâce à la propriété CSS min-height. Malheureusement, Internet Explorer ne reconnaît pas cette propriété... A cause de quoi, il faudra ruser pour obtenir le même comportement partout!

Cas général

Pour tous les navigateurs modernes et respectueux des standards, il est possible de préciser une hauteur minimale pour les éléments de type bloques. On utilisera pour cela la proprièté CSS min-height. De la façon suivante par exemple :

#monBloque
{
      /* monBloque ne fera donc jamais moins de 50px de haut */
      min-height:50px;
}

Le cas d'Internet Explorer

Comme je le disais plus haut, ce cher IE ne connaît pas la propriété min-height. Cependant, le comportement de IE pour un bloque dont le height (hauteur) est définit est le même que pour un min-height. Comprenez par là que IE agrandira un bloque si le contenu est trop grand, et ce même avec un height fixé. Nous allons pouvoir exploiter cette faiblesse!

La solution!

Nous allons devoir définir le height à une hauteur particulière pour IE, et le laisser en auto pour les autres navigateurs. Nous définirons également le min-height à cette valeur particulière, il sera ignoré par IE et correctement interprété par les autres navigateurs.

En fin de compte, l'objectif est donc de définir une propriété supplémentaire pour IE, et seulement pour IE.

Pour cela, il existe différentes solutions :

Syntaxe CSS non comprise par IE

#monBloque
{
      /* min-height pour tous, ligne ignorée par IE */
      min-height:50px;
 
      /* Height pour IE */
      height:50px;
}
 
/* Syntaxe non comprise par IE, bloque ignoré */
html>;#monBloque
{
      /* Seul IE ne tiendra pas compte de cette ligne*/
      height:auto;
}

Les commentaires conditionnels

Si vous ne souhaitez pas avoir de feuille CSS supplémentaire, oubliez cette solution. Cela-dit, il est parfois pratique d'avoir une seconde feuille CSS dans laquelle vous pourrez placer toutes les modifications ou ajouts de propriétés spécialement destinés à IE. Libre à vous de choisir.

Nous allons exploiter ici ce que l'on appel les commentaires conditionnels. C'est un système proposé par Internet Explorer et permettant d'ajouter du code spécifiquement pour IE. Ce code sera considéré comme commentaire html par les autres navigateurs.

La syntaxe à utiliser est la suivant :

<!--[if IE]>

   ..ici, code HTML réservé à IE...
<![endif]-->

Je ne détaillerais pas plus la syntaxe de ces commentaires. Sachez cependant qu'il est possible de les préciser avec les version d'IE. Je vous laisse consulter l'article qui en parle en détail.

Il nous est maintenant possible de spécifier une feuille CSS supplémentaire spécifiquement pour IE de la façon suivante :

<!-- debut de votre page -->
      <head>
            <!-- Ci dessous, votre feuille CSS normale -->
            <link rel="StyleSheet" type="text/css" href="style.css />
            <!--[if IE]>
                  <!-- Et ici celle pour IE -->
                  <link rel="StyleSheet" type="text/css" href="style-ie.css />
            <![endif]-->
      </head>
<!-- suite de votre page -->

Ainsi dans style.css vous aurez les définition suivantes :

#monBloque
{
      min-height:50px;
}

et dans style-ie.css :

#monBloque
{
      /* Resta à auto pour les autres */
      height:50px;
}

Conclusion

Cette solution devrait également fonctionner pour width et min-width. À tester.

J'espère que tout le monde aura vu dans cette article une raison de plus pour utiliser un navigateur respectueux des standards!