Création D'une boîte-ombre CSS3 de tous les côtés sauf un
J'ai une barre de navigation à onglets où je voudrais que l'onglet ouvert ait une ombre pour le distinguer des autres onglets. J'aimerais également que toute la section d'onglets ait une seule ombre (voir la ligne horizontale du bas), ombrant le bas de tous les onglets sauf celui ouvert.
Je vais utiliser la propriété box-shadow 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 de sorte que cela finirait par couvrir l'onglet.
Mise en page des onglets
_______ _______ _______
| | | | | |
____|_______|__| |__|_______|______
Ligne D'ombre.
L'ombre remonterait à partir des lignes horizontales, et à l'extérieur des lignes verticales.
_______
| |
_______________| |_________________
Voici un exemple en direct:
De l'aide là-bas, génies?
8 réponses
Dans votre exemple, créez un div dans #content avec ce style
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
Et modifiez le style #content (supprimez les rembourrages) et ajoutez shadow
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
Ajouter des ombres aux onglets:
#nav li a {
margin-left: 20px;
padding: .7em .5em .5em .5em;
font-size: 1.3em;
color: #FFF;
display: inline-block;
text-transform: uppercase;
position: relative;
box-shadow: 0 0 8px 2px #888; /* the shadow */
}
Coupez-le avec trop-plein.
<style type="text/css">
div div {box-shadow:0 0 5px #000; height:20px}
div {overflow:hidden;height:25px; padding:5px 5px 0 5px}
</style>
<div><div>tab</div></div>
Vous pouvez utiliser plusieurs ombres CSS sans autres divs pour obtenir l'effet désiré, avec la mise en garde de pas d'ombres autour des coins.
-webkit-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
-moz-box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
box-shadow: 0 -3px 3px -3px black, 3px 0px 3px -3px black, -3px 0px 3px -3px black;
Globalement bien que son très peu intrusif.
Personnellement, j'aime mieux la solution trouvée ici: http://css3pie.com/demos/tabs/
Il vous permet d'avoir un état zéro ou un État de survol avec une couleur d'arrière-plan qui a toujours l'ombre du contenu ci-dessous superposant. Pas sûr que ce soit possible avec la méthode ci-dessus:
Mise à jour:
En fait, j'étais incorrect. Vous pouvez faire en sorte que la solution acceptée prenne en charge l'état de survol indiqué ci-dessus. Faites ceci:
Au lieu d'avoir le positif relatif sur le a, placez-le sur la classe a. active avec un index z supérieur à votre div #content ci-dessous (qui a l'ombre dessus) mais inférieur à l'index z sur votre content_wrapper.
Par exemple:
<nav class="ppMod_Header clearfix">
<h1 class="ppMod_PrimaryNavigation-Logo"><a class="ppStyle_Image_Logo" href="/">My company name</a></h1>
<ul class="ppList_PrimaryNavigation ppStyle_NoListStyle clearfix">
<li><a href="/benefits">Benefits</a></li>
<li><a class="ppStyle_Active" href="/features">Features</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/company">Company</a></li>
</ul>
</nav>
<div id="ppPage-Body">
<div id="ppPage-BodyWrap">
content goes here
</div>
</div>
, Puis avec votre css:
#ppPage-Body
box-shadow: 0 0 12px rgba(0,0,0,.75)
position: relative /* IMPORTANT PART */
#ppPage-BodyWrap
background: #F4F4F4
position: relative /* IMPORTANT PART */
z-index: 4 /* IMPORTANT PART */
.ppList_PrimaryNavigation li a:hover
background: #656565
-webkit-border-radius: 6px 6px 0 0
-moz-border-radius: 6px 6px 0 0
border-radius: 6px 6px 0 0
.ppList_PrimaryNavigation li a.ppStyle_Active
background: #f4f4f4
color: #222
-webkit-border-radius: 6px 6px 0 0
-moz-border-radius: 6px 6px 0 0
border-radius: 6px 6px 0 0
-webkit-box-shadow: 0 0 12px rgba(0,0,0,0.75)
-moz-box-shadow: 0 0 12px rgba(0,0,0,0.75)
box-shadow: 0 0 12px rgba(0,0,0,0.75)
position: relative /* IMPORTANT PART */
z-index: 3 /* IMPORTANT PART */
Une autre façon, plutôt créative, de résoudre ce problème est d'ajouter :after ou: before pseudo élément à l'un des éléments. Dans mon cas, cela ressemble à ceci:
#magik_megamenu>li:hover>a:after {
height: 5px;
width: 100%;
background: white;
content: '';
position: absolute;
bottom: -3px;
left: 0;
}
Voir la capture d'écran, a rendu le pseudo élément rouge pour le rendre plus visible.
Si vous avez ajouté deux travées à accrocher, vous pouvez en utiliser deux, quelque chose comme:
box-shadow: -1px -1px 1px #000;
Sur une portée et
box-shadow: 1px -1px 1px #000;
Sur un autre. Pourrait fonctionner!
Si les ombres se chevauchent, vous pouvez même utiliser 3 ombres-une 1px à gauche, une 1px à droite et une 1px vers le haut,ou quelle que soit l'épaisseur que vous voulez.
Vous pouvez couvrir l'ombre en utilisant plusieurs ombres de boîte ainsi.
Boîte-ombre: 0 10px 0 # fff, 0 0 10px # ccc;
Si vous êtes prêt à utiliser la technologie expérimentale avec seulement prise en charge partielle, vous pouvez utiliser le clip-path la propriété.
Cela produira l'effet désiré: une ombre de boîte sur les côtés supérieur, gauche et droit avec une coupure propre sur le bord inférieur.
Dans votre cas, vous utiliseriez clip-path: inset( px px px px); où les valeurs de pixels sont calculées à partir du bord en question (voir ci-dessous).
#container {
box-shadow: 0 0 8px 2px #888;
clip-path: inset(-8px -8px 0px -8px);
}
Cela va couper le div en question à:
- 8 pixels au-dessus du haut (pour inclure l'ombre)
- 8 pixels à l'extérieur du bord droit (pour inclure l'ombre)
- 0 pixels du bas (pour masquer l'ombre)
- 8 pixels à l'extérieur du bord gauche (pour inclure l'ombre)
Notez qu'aucune virgule n'est requise entre les valeurs de pixels.
La taille de La div peut être flexible.