Enjoliver la balise H1 en pur CSS

Avec une seule règle CSS et sans balise ajoutée, ainsi toutes les pages du sites peuvent être modifiées à la fois.

Toutes les démonstrations de cette page utilisent une seule propriété CSS et une image de fond.

Deux modes d'affichage seront possible.

La propriété display:inline aligne la taille du conteneur, à savoir la balise H1, à celle du contenu. Donc la taille de l'image de fond dépendra de la taille de la police et de la longueur du texte. Avec le mode inline on peut contrôler les dimensions avec les propriétés width et height, mais on peut déterminer la hauteur avec padding, tandis que line-height permet de donner une marge avec le texte environnant.

Avec la propriété display:block, la largeur du conteneur dépendra de la taille de la page, cela convient donc mieux avec une texture qu'avec une image, car le motif est répété pour remplir le fond quand on agrandit la page. Dans ce mode le titre peut aussi être centré dans la page.

Le titre de cette page est réalisé avec display:block alors que les démonstrations suivantes utilisent le mode inline, sauf l'effet 3D qui requiert que l'on contrôle précisement la largeur et la hauteur du fond.

Le code CSS:

h1
{
  font-size: 32px;
  text-shadow: -1px -1px #0c0, 1px 1px #060, -3px 0 4px #000;
  font-family:Arial, Helvetica, sans-serif;
  color: #090;
  padding:16px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:block;
  margin:16px;
  background-image:url(images/background-h1-wood.jpg);  
}

Utiliser une image pour le fond

Utiliser une image pour toutes les balises H1 du site est possible si l'image est assez large pour convenir à des titres dont la longueur change selon la page (ce n'est pas le cas dans cet exemple).

Pour utiliser une image différente sur chaque page, il faut surcharger la propriété background de H1 comme ci-dessous:

<h1 style="background-image:url(images/background-h1-city.jpg)">
    Démonstration de Balise H1
</h1>

Le code CSS:

h1
{
  font-size: 32px;
  line-height: 150px;
  text-shadow: -1px -1px #fb6, 1px 1px #d60, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color: #FF9933; 
  padding:32px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:inline;
}

Titre en caractères moyens

Le fond se réduit en fonction de la taille du texte, grâce à la propriété display:inline. Il faut que l'image choisie pour le fond s'y prête.

Code CSS:

h1
{
  font-size: 24px;
  text-shadow: -1px -1px #eee, 1px 1px #888, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color:#ccc;
  padding:16px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:inline;
  line-height:92px;
  background-image:url(images/background-h1-metal.jpg);
}

Titre en grands caractères

Nous avons choisi une image très large pour s'accorder avec le texte. La propriété line-height permet de contrôler la hauteur et afficher correctement l'image.

Code CSS pour une grande police:

h1
{
  font-size: 48px;
  text-shadow: -1px -1px #9df, 1px 1px #49d, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color:#6bf;
  padding:24px 32px 32px 32px;
  font-weight:lighter;
  -moz-box-shadow: 2px 2px 6px #888;  
  -webkit-box-shadow: 2px 2px 6px #888;  
  box-shadow:2px 2px 6px #888;  
  text-align:center;
  display:inline;
  line-height:150px;
  background-image:url(images/background-h1-wide.jpg);
}

Effet 3D

La hauteur et la largeur du conteneur, la balise H1 sont ici fixes. L'image de fond à en fait une marge blanche à gauche et à droite, pour permettre un titre plus large que l'image, mais c'est un choix qui dépend de l'image présente, elle aurait pu être plus large.

Code CSS pour l'effet 3D:

h1
{
  font-size: 48px;
  text-shadow: -1px -1px #f00, 1px 1px #a00, -3px 0 4px #000;
  font-family:"Segoe print", Arial, Helvetica, sans-serif;
  color: #dd0000;
  padding:64px 0 0 0;
  margin:16px auto;
  font-weight:lighter;
  -moz-box-shadow:none;  
  -webkit-box-shadow: none;  
  box-shadow:none;  
  text-align:center;
  display:block;
  min-height:172px;
  min-width:800;
  max-height:172px;
  max-width:800px;  
  background-image:url(images/background-h1-tesla.jpg);
}

L'image de fond est réalisée avec The Gimp qui dispose d'une fonction de transformation dans le plan en trois dimensions. Si le titre est plus large que l'image de fond, celle-ci sera répétée et utilisée comme une tuile, n'oubliez pas d' ajouter une marge blanche à l'image pour lui donner la taille du conteneur.

En conclusion, le mode block semble préférable, mais il vaut mieux utiliser une texture ou comme dans l'exemple ci-dessus, ajouter des marges blanches à l'image, sinon on devra choisir pour chaque page une image en fonction de la longueur du titre ou ajuster les propriétés pour accorder le titre et le fond. En outre, contrairement au mode inline, il permet de centrer la balise au milieu de la page.

Note: Pour faire cohabiter plusieurs démonstrations dans la même page, nous avons remplacé les balises H1 par des div avec une classe de style, sauf pour le titre de la page. Cela ne fait pas de différence dès lors que toutes les propriétés de la balise sont surchargées.