J'ai une barre de navigation à onglets dans laquelle j'aimerais que l'onglet ouvert ait une ombre pour le distinguer des autres onglets. J'aimerais également que toute la section des onglets ait une seule ombre (voir la ligne horizontale du bas) qui monte, ombrageant le bas de tous les onglets à l'exception de celui ouvert.
Je vais utiliser la box-shadow
propriété de CSS3 pour le faire, mais je ne peux pas trouver un moyen d'ombrer uniquement les parties que je veux.
Normalement, je couvrirais l'ombre inférieure de l'onglet ouvert avec la zone de contenu (plus haut z-index
), mais dans ce cas, la zone de contenu elle-même a une ombre, ce qui finirait par couvrir l'onglet.
Disposition des onglets
_______ _______ _______ | | | | | | ____ | _______ | __ | | __ | _______ | ______
Ligne d'ombre.
L'ombre remonterait à partir des lignes horizontales et à l'extérieur des lignes verticales.
_______ | | _______________ | | _________________
Voici un exemple en direct:
Avez-vous de l'aide là-bas, génies?