Cours de (X)HTML / CSS

CSS - 2 Techniques CSS

Page de départ
Page d'arrivée

Technique 1 : Une image pour du texte

Par choix esthétique, on peut souhaiter vouloir utiliser une image plutôt que du texte stylé avec des CSS.

Dans notre notre exemple, nous souhaitons utiliser un titre-image pour l'élément titre principal <h1>. 4 étapes :

  1. On dimensionne la hauteur du bloc en correspondance avec la hauteur de l'image. 
    h1{
	height: 52px;
}
  2. On positionne l'image en arrière-plan en empêchant sa répétition. 
    h1{
	height: 52px;
	background: url(lorem.png) left top no-repeat;
}
  3. Dans le document (X)HTML, on place le contenu textuel de l'élément <h1> dans un sous-élément <span>. 
    <h1> <span>Site Lorem Ipsum</span> </h1>
  4. Dans la CSS, on désactive l'élément <span> contenu dans l'élément <h1>. 
    h1 span{
	display:none;
}

Dans l'élaboration du design et l'intégration de sites web, la question du remplacement de textes par des images est récurrente. Cela peut toutefois des problèmes en termes d'accesibilité (par exemple, une image en arrière-plan ne peut avoir de texte alternatif). La méthode que nous avons choisie pour notre exemple est simple à mettre en œuvre mais n'est pas satisfaisante du point de vue de l'accessibilité (l'utilisation de display:none devant être ici évitée). D'autres techniques existent.
Pour en savoir plus sur les techniques de remplacement de texte par des images (lien externe - page en anglais)

Voir la page
Voir la css

Haut de page

Technique 2 : Effet de survol

Les effets de survol ou effets roll-over sont omniprésents dans les pages web. Outre l'intérêt esthétique, cela aide à la compréhension de la page et de la navigation.

Un exemple en 2 étapes :

  1. Transformation des éléments <a> du menu de sommaire en bloc. Ansi, ils prennent toute la largeur du contenant (ici le bloc sommaire) moins les marges. Dans le même temps, ajoute des marges internes dans ces nouveaux blocs pour les aérer. 
    #sommaire a{
	display:block;
	padding:5px 0 5px 5px;
}
  2. Utilisation des pseudos-classes CSS pour les liens, avec les propriétés background-color et color. 
    #sommaire a:link{
	background-color:#cccccc;
	color:#333333;
}
#sommaire a:visited{
	background-color:#cccccc;
	color:#333333;
}
#sommaire a:hover{
	background-color:#333333;
	color:#cccccc;
}
#sommaire a:active{
	background-color:#333333;
	color:#cccccc;
}
    Résumable ainsi : 
    #sommaire a:link, #sommaire a:visited{background-color:#ccc;color:#333;}
#sommaire a:hover, #sommaire a:active{background-color:#333;color:#ccc;}

Voir la page
Voir la css

Haut de page