Code-Web.org - design

(Encore) Une nouvelle charte

Thierry Geindre — Wed, 26 Mar 2008 18:39:00 +0000

Code-Web.org fait une nouvelle fois peau neuve. Cette fois-ci c'est propre et clair. Par ailleurs, le site ne change pas seulement sur la forme, mais aussi dans le moteur qui le fait fonctionner. En effet, il est passé sous Dotclear 2 Beta 7, version très prometteuse du soft que je recommande à tout les bloggeurs désireux de tester quelques solutions.

La coloration syntaxique des code source n'est plus, et pour cause, le plugin qui s'en chargeait n'est actuellement pas disponible pour Dotclear 2. Cela-dit, on peut espérer qu'il sera porté à l'avenir sur cette version ou qu'un autre viendra le remplacer. J'envisage également de le créer moi même, après tout j'aimerais bien apporter ma modeste contribution à cette communauté.

Enfin, vous avez peut-être remarqué la petite publicité qui se cache en bas de la partie droite du site. Je vous conseille de visiter le site qui offre ce service, j'ai nommé Blogbang.com. Le concept est sympa et prometteur.

Bon allez, je retourne aux rédactions de contenus sérieux.

Un arrière plan étirable

Thierry Geindre — Fri, 15 Feb 2008 22:32:00 +0000

Les propriétés CSS permettant d'appliquer une image d'arrière plan aux éléments d'une page, ou à la page elle même, ne permettent de couvrir toute la surface disponible que par répétition de l'image. Je vous propose ici une méthode permettant détirer l'image en hauteur et/ou en largeur en fonction de l'espace disponible. A noter qu'à l'inverse de beaucoup de solutions proposées sur la toile, celle que je vous propose n'utilise pas de java script.

Le principe

Les propriétés CSS ne satisfaisant pas nos exigences, nous allons devoir utiliser une autre technique. Pour cela, nous utiliserons une classique image (balise <img ... />). La méthode consistera en fait à lui donner des dimensions à 100%. Elle s'étirera donc automatiquement en fonction des éventuels changements de dimensions.

Puisqu'il s'agit d'un arrière plan, nous allons devoir placer du contenu par dessus. Pour cela, nous allons devoir modifier le mode de positionnement de ce contenu en fonction du contexte.

L'arrière plan d'une page

Pour cela nous allons d'abord supprimer les éventuelles marges du corps de la page. Nous lui donnerons également des dimensions à 100% sans quoi cette astuce ne fonctionnera pas sous certaines versions d'Internet Explorer.

Nous placerons ensuite note image de fond dans la première ligne de contenu de l'élément <body>. Les dimensions de cette images seront définies à 100%.

Enfin, pour que le contenu se place par dessus cette image, on pourra le placer dans un élément de type <div> (ou tout autre conteneur) que nous positionnerons en absolute.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 <head>
 <title>Un exemple</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
 
   body,html
   {
     /* Indispensables pour certain navigateurs */
     width:100%;
     height:100%;
     /* On retire les marges éventuelles */
     margin:0;
     padding:0;
    }
 
    #background
    {
     width:100%;
     height:100%;
    }
 
    #content
    {
     position:absolute;
     left:0;
     top:0;
    }
  </style>
 </head>
 <body>
   <img src="images/background.png" alt="" id="background" />
   <div id="content">
     <p>Le contenu de la page se place dans ce div!</p>
   </div>
 </body>
</html>

Vous pouvez vérifier le bon fonctionnement de cette astuce grâce à l'aperçu que je vous propose. Redimensionnez la fenêtre et observez l'image prendre les bonnes dimensions. Vous remarquerez en passant que les proportions de l'image ne sont pas forcément respectées. Si vous souhaitez conserver les bonnes proportions, il vous suffira de ne préciser la dimension 100% que pour la hauteur ou la largeur de l'image.

Vous remarquerez peut être que cette page n'est pas valide. En effet, une balise <img ... /> ne peut normalement pas apparaître dans ce contexte, il faudrait logiquement qu'elle soit placé entre des éléments <h1> ou <p> par exemple. Cependant, en plus d'être impossible à justifier à cette endroit, l'utilisation de ces balises ne permet pas d'obtenir le comportement attendu sur certain navigateurs.

Remarquez enfin que nous avons laissé le texte alternatif de l'image vide. Ceci s'explique simplement : aucun texte alternatif n'aurait de sens à cette endroit. De plus, si pour une raison ou une autre il apparaissait, il pourrait nuire à la bonne lecture de la page par le visiteur (superposition de texte).

Conclusion

Il est probablement préférable d'utiliser cette astuce avec modération. Je n'ai pas eu l'occasion de la tester sur beaucoup de navigateurs. Alsacreations nous indique que cette technique fonctionne sur les navigateurs suivant : sur Windows IE5, IE5.5, IE6, Mozilla Firebird 0.7, Mozilla Firefox 0.8 et Opera 7.23. Pour ma part, j'ai pu vérifier avec les versions Linux de Firefox 2.0 et Opera.

Vous pourrez également appliquer cette méthode à d'autre éléments de votre page. La technique restant rigoureusement la même.

Trouver les bonnes couleurs

Thierry Geindre — Mon, 04 Feb 2008 13:46:00 +0000

L'une des étapes de la production d'une charte graphique, et non des moindres, est le choix des couleurs qui seront utilisés. Une première couleur pourra assez facilement être déterminée en fonction du thème abordé ou selon les goûts et les couleurs du designer. Cependant, il n'est pas toujours aisé de trouver les couleur qui se marieront bien avec la première.

Heureusement, il existe sur la toile des outils destinés à faciliter cette tâche. Parmi les meilleurs, on citera colormatch.dk mais il existe d'autres. Une recherche sur le web vous en donnera la liste. A noter que ce genre d'outils n'est pas exclusivement destiné au Web Design, il pourrait très bien être employé pour le choix des couleurs de votre future salon par exemple.

A propos des couleurs, citons un dernier site, pourpre.com où vous pourrez trouver bon nombre d'informations à propos des couleurs et notamment de bons moyens pour calibrer correctement votre écran.

Nouvelle charte graphique pour Code-Web.org

Thierry Geindre — Mon, 28 Jan 2008 09:52:00 +0000

Code-Web.org fait peau neuve avec cette nouvelle charte graphique nommée BlueNight. Pour l'heure, elle a été testée sous les navigateur suivant :

Mozilla Firefox 2.0
Opera 9.24
Konqueror 3.5
Dillo 0.8

Quelques bug subsiste sous Internet Explorer 6. Sous la version 7, on observe des marges un peut trop grandes au niveau des formulaires. Ces problèmes seront réglés sous peu.

Comme pour la précédente charte, vous pouvez télécharger BlueNight ou simplement en avoir un aperçu dans un autre contexte.

La production de cette charte graphique a demandé un certain temps de travail. Elle vous est gracieusement offerte. La seule contrepartie demandée aux utilisateurs de cette charte, sans pour autant être obligatoire, est de laisser le lien vers Code-Web.org déjà présent dans la charte.

Centrage vertical et horizontal

Thierry Geindre — Thu, 22 Nov 2007 17:09:00 +0000

S'il est simple de centrer horizontalement un bloque dans une page, il moins simple de le centrer verticalement. Nous verrons dans cette article une technique qui fonctionne uniquement grâce aux CSS et sur tous les navigateurs. Le tout en respectant les normes!

Le code HTML

Il est on ne peut plus simple :

<div id="centre">
   <p>Je suis un bloque toujours centr&eacute;! Essayez de redimensionner la fen&ecirc;tre!</p>
</div>

Rien de très compliqué, un simple bloque contenant un peu de texte.

Le code CSS

On commence d'abord avec un hack pour Internet Explorer, rien de bien surprenant finalement.

html, body
{
   height:100%;
}

Ensuite nous allons pouvoir modifier l'apparence du bloque que nous avons créé plus haut :

#centre
{
   /* On lui donne des dimensions */
   width: 200px;
   height: 200px;
 
   /* On centre le texte qu'il contient*/
   text-align: center;
 
   /* Une petite bordure noire */
   border: 1px solid #000;
 
   /* Une couleur de fond bleue */
   background-color: #5fa3ff;
 
   /* Et enfin du texte en blanc */
   color: #fff;
}

Rien de très utile finalement puisque notre bloque restera toujours placé en haut et à gauche de la page avec ce seul code CSS. Nous allons donc devoir y ajouter quelques propriétés.

Premièrement nous définirons sont positionnement à absolute, car il est ensuite possible d'utiliser les propriétés left et top avec comme valeurs 50%. Cependant, même après cela, notre bloque ne sera pas vraiment centré. En effet, seul le coin supérieur gauche du bloque sera centré sur la page. Pour remédier à cela, nous allons utiliser des marges négatives qui feront "reculer" le bloque de la moitié de sa hauteur et de sa largeur. Il sera ainsi parfaitement centré horizontalement et verticalement.

Ce qui nous donnera donc le code CSS suivant :

#centre
{
   /* Positionnement absolu */
   position:absolute;
 
   /* Positionnement du coin supérieur gauche au centre */
   left:50%;
   top:50%;
 
   /* On donne des dimensions au bloque */
   width: 200px;
   height: 200px;
 
   /* On le fait "reculer" la la moitié de ces dimensions */
   margin-left:-100px;
   margin-top:-100px;
 
   /* Les mises en formes */
   text-align: center;
   border: 1px solid #000;
   background-color: #5fa3ff;
   color: #fff;
}

Et le tour est joué : vous obtiendrez un bloque parfaitement centré.

Un petit mot sur la technique consistant à utiliser un tableau de hauteur 100% pour le centrage vertical : bannissez la! Ce n'est absolument pas la place d'un tableau.

Nous allons terminer cette article sur un exemple d'utilisation de cette technique. Je vous invite d'ailleurs à redimensionner votre fenêtre pour admirer le centrage automatique.

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.

Télécharger la charte de CodeWeb!

Thierry Geindre — Sun, 11 Nov 2007 00:14:00 +0000

Afin de marquer une bonne fois pour toute l'esprit de liberté de réutilisation du contenu de ce site, je vous propose ici de télécharger la charte graphique de CodeWeb pour la réutiliser comme bon vous semble. Naturellement, il serait grandement apprécié que codeweb.free.fr soit cité comme auteur de la charte graphique dans vos réalisations!

Cette charte respecte la norme XHTML 1.0 Strict et a été testée sur de nombreux navigateurs avec succès.