Un onglet à longueur variable : une balise
février 21st, 2010
Présentation
Au cours d’une formation html/css, nous devions réaliser une copie conforme d’un site web (dont je tairais le nom), celui-ci comportait un onglet actif.
Dans une recherche de la moindre balise, j’ai voulu n’utiliser aucun artifice et laisser cette simple balise dessiner un onglet à largeur modifiable.
La solution
Voici la solution:
test de lien
lien2
Et le code css pour la faire fonctionner:
a.onglet{text-decoration: none; text-transform: capitalize; color: #4d4d4d; text-shadow: 5px 5px 5px #bfbfbf;} a.onglet:hover {color: #0000ff;} a.onglet:after {content: url("http://dev.art.free.fr/wordpress/wp-content/2010/02/top_corner_ne.png"); vertical-align: -5px;} a.onglet{ background: url("http://dev.art.free.fr/wordpress/wp-content/2010/02/top_corner_nw.png") no-repeat; padding-left: 20px; padding-top: 7px; line-height: 30px; padding-bottom: 5px; font-size:16px;}
Compatibilité
Cette astuce fonctionne avec :
- Firefox
- Opéra
- IE8
- Chrome
L’ombre dernière le texte, idem sauf IE.
Pour les autres navigateurs, vos commentaires sont les bienvenus.
Bon développement.