Niveau
..........
En rapport...

Le tuto sur la transparence d'ido m'a donner envie de créer un bouton avec un fond uni qui deviendrai transparent lors du passage de la souris et tous ça uniquement en CSS.
Voici un Tuto qui vous expliquera la méthode.
Il faut tous d'abord savoir que lorsqu'on applique la transparence sur un élément tous les éléments enfants de ce dernier seront affectés par la transparence. Dans notre cas seul le fond du bouton devra être transparent. Il nous faudra donc créer deux boutons pratiquement identique et les placer l'un sur l'autre.

Voici le CSS:

css
 
.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
	background-color:#00F;
}
.navigation {
	position:absolute;
	text-decoration:none;
	padding:1px;
	margin:5px;
	font-weight:bold;
	border:1px solid #000;
	color:#FFF;
}
.navigation:hover {
	background-color:#00F;
}

Nous avons ici besoin de deux class:
- La premiere (transparent) permet d'appliquer la transparence(voir le tuto d'ido sur le sujet) à notre bouton ainsi qu'un fond bleu.
- La seconde (navigation) permet de définir l'aspect de notre bouton, on remarquera le “position:absolute” qui nous permettra de superposer les deux liens.
- On applique également à “navigation” la pseudo-class hover qui nous permettra d'afficher le fond bleu, sans transparence, sur notre bouton lorsqu'il sera survolé.

Voici le code HTML:

html4strict
<a href="#" class="transparent navigation">Accueil</a>
<a href="#" class="navigation">Accueil</a>

- On créer un premier lien et on lui applique les deux class navigation ET transparent. Ce qui nous donnera un bouton avec un cadre noir, un fond bleu, et le texte “Accueil” à l'intérieur le tous avec une transparence de 50%.

Accueil

- On créer ensuite un deuxieme lien identique et on lui applique la class navigation. Ce qui nous donnera un bouton avec un cadre noir, PAS de fond bleu, et le texte “Accueil” à l'intérieur le tous SANS trasparence.

Accueil

- Comme les deux liens se superpose, on obtien un bouton avec un cadre noir 100% visible, un fond bleu visible à 50% et un texte Accueil visible à 100%.

Résultat : Accueil Accueil La couleur oiginale étant le bleu foncé, le bleu clair que vous voyez est le bleu foncé en transparent sur notre fond clair