13 techniques CSS avancées

Sommaire

1. Le menu déroulant
2. Image pop-up pour zoomer sur une image
3. Un background transparent
4. Une image entourée de texte.
5. Une bulle popup tout en CSS
6. Les colonnes de même hauteur (3 méthodes)
7. Créer une double bordure.
8. Des titres numérotés
9. Une lightbox en CSS
10. Un spoiler pur CSS
11. Aligner un élément verticalement.
12. Astuce Bonus : un antispam ! (3 méthodes + 1 avec javascript)
13. Quelques liens avec des trucs en CSS.

Sommaire

Dans ce tuto, je vous donnerais le code CSS et xHTML pour faire des choses que l'on fait normalement en JavaScript, comme des menus déroulants ou des lightbox.

J'ai indiqué la compatibilité suivant les navigateurs. Les versions testés sont : Firefox 4.0/3.6, Internet Explorer 9,8, Opera 11.10, Safari 4, Chrome 10 ainsi que Konqueror 4.2.2.

Ce que cette page est censé apporter, ce sont des bouts de codes, quelques explications ainsi que des exemples à chaque fois.

Sauf mention contraire, les astuces visibles ici ne font appel qu'à du CSS. Aucun code JavaScript, ni d'images animés ou autres ne sont nescéssaires.

Sommaire

le menu déroulant

Compatibilité :

xHTML

Les menus sont souvent faits avec des listes <ul>, <li>. Ici je ferais de même.

On fait une liste ou chaque <li> contient lui même une liste. La liste extérieur contiendra les liens à survoller, et les listes intérieurs seront la partie qui se déroule :

<ul class="menu">

   <li><a href="#">un</a>
     <ul>
       <li><a href="#">1.un</a></li>
       <li><a href="#">1.deux</a></li>
       <li><a href="#">1.trois</a></li>
       <li><a href="#">1.quatre</a></li>
     </ul>
   </li>

   <li><a href="#">deux</a>
     <ul>
       <li><a href="#">2.un</a></li>
       <li><a href="#">2.deux</a></li>
       <li><a href="#">2.trois</a></li>
       <li><a href="#">2.quatre</a></li>
     </ul>
   </li>

   <li><a href="#">trois</a>
     <ul>
       <li><a href="#">3.un</a></li>
       <li><a href="#">3.deux</a></li>
       <li><a href="#">3.trois</a></li>
       <li><a href="#">3.quatre</a></li>
     </ul>
   </li>

   <li><a href="#">quatre</a>
     <ul>
       <li><a href="#">4.un</a></li>
       <li><a href="#">4.deux</a></li>
       <li><a href="#">4.trois</a></li>
       <li><a href="#">4.quatre</a></li>
     </ul>
   </li>

</ul>
	

CSS

Grace à des float: left; et une largeure fixe on placera les élements de la liste principale les un à coté des autres. On supprime aussi les puces et on le met en position absolue pour que le déroulement des listes se fasse par dessus le reste du texte (c'est obligatoire).

ul.menu {
   list-style-type: none;
   position: absolute;
   }

ul.menu > li {
   float: left;
   width: 80px;
   border: 1px black solid;
   }
	

Ensuite, on va cacher les sous listes, et à l'aide d'un hover, on les affiche uniquement quand ils sont survolés.

ul.menu > li {
   float: left;
   width: 80px;

   height: 30px;
   overflow: hidden;
   }

ul.menu > li:hover {
   height: auto;
   }
	

Finalement, il ne suffit que de rajouter une bordure et un fond aux éléments de listes et une petite marge pour les séparrer. On obtient finalement :

ul.menu {
   list-style-type: none;
   text-align: center;
   position: absolute;
   }

ul.menu ul {
   list-style-type: none;
   text-align: left;
   }

ul.menu > li {
   float: left;
   width: 80px;
   border: 1px black solid;
   margin: 1px;
   height: 30px;
   overflow: hidden;
   background-color: #faa;
   }

ul.menu > li:hover {
   height: auto;
   }

ul.menu ul li {
   margin-left: -20px; /*On corrige un décalage de la liste intérieure*/
   }
	

Essayer

Voilà. Normalement vous savez comment ça marche. Il vous suffit d'arange tout ça comme bon vous semble avec des décorations en tout genre.
Le menu du la page d'accueil utilise exactement ce principe

D'autres exemples :

• Un menu avec plusieurs sous menus.
• sur jankoatwarpspeed.com
• Une menu CSS en accordéon. En voici un autre

Sommaire

l'image popup

Compatibilité :
(IE 8,9)

xHTML

Dans le principe, c'est vraiment très simple : une section div avec une image dedans.

<div class="popup">
   <img src="mon_image" alt="texte_alternatif" title="Cliquez pour voir en grand !" />
</div>

CSS

L'image est affiché en petit sur le page : il aura 100% de la taille d'un petit div :

div.popup {
   height: 140px;
   width: 120px;
   }

div.popup > img {
   height: 100%;
   width: 100%;
   }

Et ce n'est que lorsque l'on maintient le clic (avec la pseudo-classe "active") sur l'image que l'on l'affiche en grand (taille auto).
Pour éviter que la page se déforme, on place l'image en "relative" :

div.popup > img:active {
   height: auto;
   width: auto;
   position: relative;
   }

En ajoutant un peu de styles là dessus, comme une bordure sur l'image, et un curseur de souris incitant au clic (la petite main), on arrive à ça :

div.popup {
   height: 140px;
   width: 120px;
   }

div.popup > img {
   height: 100%;
   width: 100%;
   cursor: pointer;
   }

div.popup > img:active {
   height: auto;
   width: auto;
   position: relative;
   border: black solid 1px;
   }

Essayer

Sommaire

le fond transparent

Solution Css3 : RGBA

Compatibilité :
(3+) (10) (IE 9 seulement)

RGBA signifie Red, Green, Blue, Alpha. Où "Alpha" singifie le canal de la transparence.

En Css3, la nouvelle propriété rgba(xxx, xxx, xxx, .x) permet, comme vous le devinez, d'utiliser directement la transparence.

Cette solution marche avec la plupart des navigateurs. Le problème c'est que si vous affichez votre page dans un navigateur qui ne prend pas, le rgba() sera ignoré ! Transparence totale donc. On doit donc mettre deux fonds :

background-color: rgba(255,255,0,0.5)!important;
background-color: rgb(255,250,0);

Cela forcera le navigateur à utiliser le alpha si possible, sinon il utilisera la couleur sans transparence.

Utiliser l'opacité.

Compatibilité :

Cette technique compliquée permet à IE de surporter les fonds transparents. L'inconvénient, c'est qu'il faut intervenir sur le HTML.

xHTML

On crée un premier <div> contenant le texte. Au début de ce <div> on va placer un autre <div> qui sara vide :

<div class="main">
   <div class="transparent"></div>
       <<  Votre contenu (texte, image…) içi  >>
</div>

CSS

C'est le div vide qui est important ici : c'est lui à qui on donnera la couleur de fond et l'opacité :

div.transparent {
   background-color: #00f;
   filter:alpha(opacity=40);
   }

Le div est vide. On va l'étirer à la taille du div conteneur, et on va le placer derière, avec un z-index et un positionnement absolu. Il sera nescéssaire de placer le div conteneur en relative avec un z-index supérieur.

Au final : le texte ne sera pas transparent, mais la couleur de fond sera semi-transparente (elle est assurée par le div placé dérière) :

div.transparent {
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   }

En fait, c'est tout !
Ça marche comme ça.
Je vous donne le code CSS en entier :

div.main {
   position: relative;
   z-index: 10;
   }

div.transparent {
   position: absolute;
   z-index: -1;
   background-color: #00f;
   filter:alpha(opacity=40);
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   }
	

Essayer

Pour les puristes, sachez que la propriété "filter:alpha()" n'est pas officielle mais qu'elle est propre à IE.
Si vous voulez, la propriété CSS3 "opacity" est officielle, déjà suportée par tous les bon navigateurs et est officielle :

   filter:alpha(opacity=40);

   opacity: 0.4;

Sommaire

Solution simple pour tous

Utiliser une image semi transparente pour image de fond. (comme si personne n'y avait pensé :D)

Une image entourée de texte

Compatibilité :

Je ne sait pas si le titre de ce paragraphe est assez clair, donc je vous propose directement mon exemple pour comprendre de quoi je parle.

En fait, si on a une image ronde, on voudrait que le texte entoure l'image de façon circulaire, et non carrée. Cette astuce simplissime permet cela.

Principe : il suffit de découper l'image en plusieurs parties et de les recoller manuellement.
Chaque morceau d'image à donc une largeur différente qui fait que le texte s'adaptera à chaque image et non à l'image de départ.

Le code est super simple : il suffit de mettre chaque image en float d'un coté et de leurs donner une marge nulle en haut et en bas :

<img src="image_part1.png" class="coupe" alt="image"/>
<img src="image_part2.png" class="coupe" alt="image"/>
<img src="image_part3.png" class="coupe" alt="image"/>
<img src="image_part4.png" class="coupe" alt="image"/>
<img src="image_part5.png" class="coupe" alt="image"/>
<img src="image_part6.png" class="coupe" alt="image"/>

img.coupe {
   float: right;
   margin: 0 0 0 15px;
   clear: right;
   }

Essayer

Un autre exemple ici.

Sommaire

Une bulle popup

Compatibilité :

Inspiré de commentcamarche.net/[…]popup-en-css-sans-javascript

xHTML

On fait deux <span> l'un dans l'autre. Celui à l'intérieur ne sera affiché que lorsque le souris passe au dessus de celui qui la contient :

<span class="bulle"> Texte à survoler <span> Texte à afficher au survol </span></span>
	

CSS

Le span intérieur est caché. Il n'est visible que lors du hover sur le span extérieur :

.bulle span {
   display: none;
   }

.bulle:hover span {
   display: block;
   }
	

On a dores et déjà l'effet du hover.

Il suffit de mettre le span caché en position absolue lors du survol et on le décore un peu avec un fond coloré.
Le span extérieur sera aussi mis en positionnement relative, pour permettre à la bulle de se placer au bon endroit.

span.bulle {
   position: relative;
   }

span.bulle:hover span {
   left: 0px;
   display: block;
   position: absolute;
   border: 1px black solid;
   background-color: teal;
   }

Au final, on ajoute le petit curseur et voilà le code complet :

span.bulle {
   position: relative;
   cursor: pointer;
   }

span.bulle span {
   display: none;
   }

span.bulle:hover span {
   left: 0px;
   width: 200px;
   display: block;
   position: absolute;
   border: 1px black solid;
   background-color: teal;
   }
	

Essayer

Évidement, si c'est pour faire ça, autant utiliser l'attribut "title", qui fait le même chose.
Mais le popup que j'ai fait ici est autrement plus personalisable, et ont peut faire ce que l'on veut :comme ici.

Sommaire

Les colonnes de même hauteur

Alors celle là… Un vrai casse tête !
Ce ne sont pourtant pas les techniques qui manquent, mais chacune d'elles ont des avantages et des inconvénients. À ce jour, seule l'utilisation d'un tableau permet d'avoir un design hautement personnalisable et très bien supporté par les navigateurs. Mais… Les tableaux ne sont pas recommandés par le W3C pour le design.

Voici donc plusieurs alternatives :

• Les colonnes factices
• Variante des colonnes factices ou l'utilisation ingénieuse des bordures
• Simuler un tableau
• Mon astuce : étirer la petite colonne à la hauteur de la grande. (mais pas l'inverse)

Les colonnes factices

Compatibilité :

Principe. Cette technique est connue : on met la petit colonne en flottant à gauche, sans bordure, largeur fixe.
On ajoute une colonne de droite à largeur variable avec une marge à gauche de la taille de la petite colonne.

Ensuite, on met le tout dans une autre boîte <div> (elle contient donc la colonne et la partie principale). Cette boite aura une image de fond, mais seulement sur le coté gauche !et c'est cette image qui simulera le fond et la décoration de la petite colonne.

Pourquoi ça marche ?Cette astuce marche car on applique une image de fond au <div> contenant les deux colonnes. Or, ce <div> là prendra toujours la hauteur de la colonne la plus grande (à condition de mettre un petit <br/> avec un clear: right; à cause de la colonne flottante). Or n'est-ce pas ce que nous voulons ?

Le code, je ne le donnerais pas ici, cette astuce est si connue que le web regorge de tutoriels pour celle là. De même que d'exemples.

Sommaire

La colonne fait d'une bordure…

Compatibilité :
(IE toutes versions)

Principe : cette technique est directement inspirée de http://woorkup.com/[…]height-columns/. Elle utilise la bordure de la grande colonne comme fond de la petite. Pas besoin d'image. Il faut mettre le fond de la petite colonne de la même couleur que le bord de la grande. Le bord de la grande est de même dimension que la largeur de la petite colonne.

Le code est fourni sur le lien, mais je la remet ici, en entier :

(ici la colonne de gauche n'a pas exactement la même largeur que la bordure car il faut compter en plus les marges (margin & padding))

<div class="conteneur">
   <div class="principal">
       Contenu de la partie principale.
   </div>
   <div class="colonne_gauche">
       la colonne de gauche.
   </div>
</div>
	

.conteneur {
   margin: 0 auto;
   width: 600px;
   text-align: justify;
   }

.colonne_gauche {
   background-color: white;
   margin-right: 400px;
   position: absolute;
   width: 180px;
   padding: 10px;
   }

.principal {
   border-left: solid 200px white;
   position: absolute;
   width: 400px;
   padding: 10px;
   }
	

Essayer

Sommaire

Simuler un tableau

Compatibilité :
(IE 8,9 seulement)

Principe :On sait que les tableaux permettent une personnalisation très puissante et ont justement des colonnes de même hauteurs. Cependant, le W3C préfère qu'on ne les utilise pas pour la mise en page.
Bon, ils ne veulent pas de tableau en html ? Très bien : fessons-les en CSS !
On utilise des <div> : un que l'on transformera en tableau et les autres en cellules du tableau à l'aide des display: table et display: table-cell. Ça peut paraître minable comme solution, mais elle existe.

<div class="conteneur">
   <div class="colonne_gauche">
       la colonne de gauche.
   </div>
   <div class="principal">
       la partie principale.
   </div>
</div>
	

.conteneur {
   display: table;
   border-spacing: 10px;
   border: 1px black solid;
   margin: 10px;
   }

.collone_gauche {
   display: table-cell;
   border: 1px black solid;
   width: 180px;
   padding: 10px;
   }

.principal {
   display: table-cell;
   border: 1px black solid;
   padding: 10px;
   }
	

Essayer

Sommaire

Étirer la plus petite colonne jusqu'en bas

Compatibilité :

Principe : On utilise, un positionnement absolu pour la petite colonne, et une marge sur le côté pour la grande. Le tout est placé dans une <div> afin que le haut des deux soit commune. La suite ? Étirer la colonne la plus petite jusqu'en bas graçe à un bottom: 0; top: 0;. La colonne possède également une largeur fixe.

<div class="conteneur">
   <div class="colonne_gauche">
       la colonne de gauche.
   </div>
   <div class="principal">
       la partie principale.
   </div>
</div>
	

.conteneur {
   position: relative;
   }

.colonne_gauche {
   position: absolute;
   top: 0px;
   bottom: 0px;
   width: 200px;
   }

.principal {
   position: relative;
   margin-left: 220px;
   }
	

Essayer

Sommaire

Créer une double bordure.

Compatibilité :
(IE 8,9)

Principe : On utilise une double bordure : l'une formée par la propriété border, et l'autre par la propriété mal connue “outline”. Cette dernière permet d'afficher une bordure supplémentaire à l'élément.

<div class="entoure">
       Le contenu du <div> ici
</div>
	

.entoure {
   border: 1px solid gray;
   outline: 1px solid silver;
   }
	

Essayer

Attention, si vous utilisez une bordure arrondie, il faut aussi mettre l'outline en arrondi. Pour le moment, seul Firefox permet cela. Il suffit d'utiliser -moz-border-radius: 15px;, et -moz-outline-radius: 17px; pour arrondir le “outline”.
On pourra remarquer que j'ai mis 17px pour l'outline, et non 15. Pour un effet optimal, la rayon de l'outline doit être égale au rayon du border + 2 × l'épaisseur du bordure (ceci afin de compenser le fait que l'outline doit entourer 2px de plus : ceux de la bordure !)

Sommaire

Une astuce pour des titres numérotés.

Compatibilité :
(IE 8,9 seulement)

Un titre pour ses paragraphes, c'est simple à faire, il existe les balises <h1>, <h2> jusqu'à <h6> exprès pour cela. Mais comment les numéroter sans avoir à écrire les chiffres à la main ?

Je vais vous montrer une astuce très peu connue mais qui existe ! Elle est facilement compréhensible.

Le CSS permet d'appliquer un compteur sur chaque élément. Chaque fois que l'élément apparaître à l'écran, le compteur s'incrémentera. La valeur de compteur peut ensuite être affichée à l'écran si on le veux. Nous placerons ce numéro devant chaque titre. Ainsi, votre numérotation sera faite de manière automatique !

<h1>Chapitre</h1>
<h2>Chapitre</h2>
      […]
<h2>Chapitre</h2>
      […]
<h2>Chapitre</h2>
      […]
<h1>Chapitre</h1>
<h2>Chapitre</h2>
      […]
<h2>Chapitre</h2>
      […]
	

body {
   counter-reset: count0;
   }

h1:before {
   counter-increment: count0;
   content: counter(count0,upper-roman)" - ";
   }

h1 {
   counter-reset: count1;
   }

h2:before {
   counter-increment: count1;
   content:counter(count1) " - ";
   }
	

Essayer

Les compteurs sont nommés comme on veut. Je les ait nommé count0 et count1. Voici le code expliqué rapidement ligne par ligne :

1. body : La mise à zéro du compteur initial. On l'applique à body car il faut une référence 0 pour toute la page.
2. h1:before : on incrémente le compteur 0 à chaque <h1> dans la page. Dans la propriété css content() on met la valeur du compteur. Les nombres seront en chiffres romains majuscules (upper-roman)
3. h1 : le titre 1 est aussi le moment où il faut remettre le compteur des titres 2 à zéro.
4. h2:before : on incrémente le compteur 2, et on le place devant.

On peut mettre autant de compteurs que l'on veut. Il suffit de ne pas se perdre. Mieux : on peut même faire des listes comme « II.A.1 » en mettant tous les niveaus des puces en même temps. Par exemple, voilà le CSS et un exemple (même HTML que ci dessus)

body {
   counter-reset: count0;
   }

h1:before {
   counter-increment: count0;
   content: counter(count0,upper-roman)" - ";
   }

h1 {
   counter-reset: count1;
   }

h2:before {
   counter-increment: count1;
   content:counter(count0) ". " counter(count1) " - ";
   }

Essayer

Je vous ai dit que l'on mettait ce que l'on voulait dans content() : on peut très bien mettre les deux compteurs.

Essayer

Sommaire

Lightbox CSS

Compatibilité :
(IE 9 seulement)

Faire une light box pour ses images, c'est beau, c'est class. En général, on fait ça en JavaScript, mais celle-ci fait tout en HTML/CSS et très simplement. Elle utilise la pseudo-class peu connue ":target". (je sais pas si c'est CSS2.1 ou 3).

Principe : Pour faire des ancres (des liens internes à une page) on peut utiliser l'attribut ID qui sert de cible à l'ancre. Ainsi, un lien du genre "#chap1" vous enverra directement sur l'élément de la page portant l'id "chap1".

Lorsque l'on se trouve sur cet élément (après avoir cliqué sur l'ancre), l'élément en question est dit "la cible". Or, cette situation correspond à la pseudo class "target". (le CSS avec le ":target" ne sera effectif que lorsque l'élément en question est la clible.)

Pour la light box :
On créera un lien-image qui pointera sur une ancre. Nous allons masquer cette cible (display: none;), et ne l'afficher en avant plan, centré et fixe que lorsqu'il est ciblé (avec ":target").

La cible ne sera donc affiché que quand on clic sur le lien. Pour revenir et fermer la light-box, on mettre dans la cible un lien qui nous fera revenir à une ancre0. L'ancre 1 ne sera alors plus la cible, donc elle redeviendra invisible, et l'ancre 0 nous fera revenir à la galerie d'image.

La principe est compliqué, mais le code est super simple :

<a href="#macible1">lien cible 1</a>

      […]

<div class="lightbox" id="macible1">
   <a href="#"><img src="tux_2.png" alt="tux"/> </a>
</div>

	

div.lightbox {
   display: none;
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
   }

div.lightbox:target {
   display: block;
   position: fixed;
   z-index: 20;
   background-color: rgba(100,100,100,.8);
   text-align: center;
   padding-top: 150px;
   }

div.lightbox:target img {
   border: solid white 10px;
   }

Essayer

Sommaire

Un Spoiler

Compatibilité :
(IE 9 seulement)

Principe : il s'agit d'utiliser la technique ci-dessus : avec des :target.

On met un lien : pointant vers l'ancre #id. Quand on clic dessus, le #id est ciblé : on utiliser un height:auto; et un height:0; s'il n'est pas ciblé. On prend soin d'ajouter un lien retour, pour décibler le #id et le cacher à nouveau.
On applique ce système également aux deux liens (cacher/afficher) afin de n'afficher que celui qui nous faut.

Ci dessous, l'élément ciblé est le #container. L'élément qui devient spoiler, c'est le #content

<div id="container">
	<a id="hide" href="#show" class="button">Cacher</a><a id="show" href="#container" class="button">Montrer</a>
	<p id="content">Texte caché ici.</p>
</div>
			

/* code minimum. */
#container #content {
   height: 1px;
   overflow: hidden;
   border: 1px solid silver;
}

#container:target #content {
   height: auto;
}

/* ci-dessous : pour cacher les liens. */
#container:target #hide, #container #show {
   display: inline;
}

#container:target #show, #container #hide {
   display: none;
}
			

Il est possible (et recommandé, si vous ne voulez pas d'un truc trop moche) d'améliorrer tout ça. Notamment avec des CSS3 tel que la transition, puisqu'il y'a une variation de la hauteur.

L'exemple ci dessous présente deux spoilers : un simple et l'autre amélioré (transition pour la hauteur ; gradient pour les liens).

Inconvéniant : il n'est pas possible d'ouvrir deux spoilers à la fois.

Essayer

Sommaire

Une image avec légendes

(soon)

Sommaire

Centrer verticalment

Compatibilité :

Pour centrer un élement horizontalement, on lui donne une largeur fixe, et une marge extérieure "automatique" sur les cotés. Le navigateur fera en sorte que les marges sur les cotés seront de même taille, donc de façon à center l'élément.

Pour le centrage vertical, c'est une autre histoire. Biensûr, on connait la propriété vertical-align, mais elle ne marche pas pour centrer par exemple un dans un autre >div< (elle ne marche que dans les tableaux et dans les éléments de type inline quand une hauteur de ligne est déclarée).

Alors comment faire ?
Ce que l'on veut, c'est centrer un bloc, par exemple un >div<. Pour être plus précis, on veut que le point central du bloc (l'intersection des diagonales) soit au milieu de la fenêtre du navigateur.
Or, ce que l'on fait quand on met un margin: 50% auto auto 50%;, c'est placer le coin supérieur du bloc au centre de la page :
Maintenant, observez le point central du bloc bleu : la distance centre-du-bloc-blue / centre-de-la-page est exactement égale à la moitié du bloc bleu : Alors ?
Alors on va mettre une marge négative au bloc bleu : une marge en haut et à gauche qui vaut exactement la moitié de la taille du bloc bleu :

En terme de code, c'est très simple :

<div class="bloc">
       Contenu du bloc
</div>
	

bloc {
   position: absolute;
   top: 50%;
   left: 50%;
   height: 256px;
   margin-top: -128px;
   width: 512px;
   margin-left: -256px;
   }
	

Essayer

D'autres techniques (plus propres) sont montrés ici : www.alsacreations.com/xmedia/tuto/exemples/vertical/demos.html

Sommaire

Astuce bonus l'antispam

Compatibilité :

Cet astuce vous permet de mettre votre adresse E-mail dans une page web sans risquer de vous faire spammer !

J'ai trouvé les deux premières techniques sur la page http://techblog.tilllate.com/[…]-compared/. Il y en a deux en CSS.

Solution 1

Celle-ci est super simple : par exemple on écrit « ruojnoB » et ça affiche « Bonjour ». En CSS on peut inverser l'ordre des lettres : à l'écran, le texte sera visible correctement, mais un robot ne verra que le texte à l'envers.

<span class="inverse"> ruojnoB </span>
	

span.inverse {
   unicode-bidi: bidi-override;
   direction: rtl;
   }
	

Essayer

Le fait d'avoir écrit « ruojnoB » permettra de voir « Bonjour » à l'écran. En revanche, un robot qui explore le code source ne verra que le texte à l'envers. Si l'on applique cela à une adresse E-mail, le robot ne trouvera pas votre adresse et vous ne risquez absolument rien !

Solution 2

Simple aussi : on écrit le début de notre adresse Mail, on insère quelques lettres bidons puis la fin de l'adresse. En CSS, on cache le texte bidon, fessant en sorte de n'afficher que notre adresse, qui, encore une fois ne se retrouve jamais tel quel dans le code source.

toto<span class="cache">NonNonNon</span>@crétin.org
	

span.cache {
   display: none;
   }
	

Essayer

Ici le texte à l'intérieur du span n'est pas affiché à l'écran, il sert juste à scinder notre E-mail en deux, pour qu'il ne soit pas affiché en clair dans le code source !

Solution 3

Compatibilité :
(IE 8,9 uniquement)

Il s'agit ici d'afficher le code, pas en html mais en CSS à l'aide de la propriété “content”.

Dans le HTML, on ouvre un <span>, on met un arobase dedans et en CSS, à l'aide des pseudo classes :before et :after on affiche ce qui manque :

<span class="mail">@</span>
	

span.at:before {
   content: "timovneerden";
   }

   span.at:after {
   content: "gmail.com";
   }
	

Essayer

Sommaire

Notes

Sommaire

Quelques liens

Voici des liens utiles quand on fait des CSS : le validateur CSS du W3C, ou des sites d'apprentissage comme Alsa Creations. Mais surtout, voici tout un tas de liens avec des effets plus ou moins beaux :

• Comment faire une galerie photo. J'ai tenté un truc ici. Je vous assure que tout est en CSS.
• Sélectionner du texte mais en couleur ! totalement inutile, donc indispensable… Seulement pour Firefox.
• Un effet de paralaxe 3D là, y'a que des CSS.