Créer une ombre de type CSS3 sur tous les côtés sauf un

Question

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 d'onglets ait une seule ombre (voir la ligne horizontale du bas) qui monte et ombrage le bas de tous les onglets à l'exception de celui qui est 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 souhaite.

Normalement, je couvrirais la zone d'ombre inférieure de l'onglet ouvert par la zone de contenu ( supérieur ), mais dans ce cas, la zone de contenu elle-même comporte une ombre en couvrant 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 concret:

Avez-vous de l'aide, génies?

Answer 1

Dans votre exemple, créez une div dans #content avec ce style

#content_over_shadow {
    padding: 1em;
    position: relative; /* look at this */
    background:#fff;    /* a solid background (non transparent) */
}

et changez le style #content (enlevez les rembourrages) et ajoutez des ombres

#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 */
}

Answer 2

Coupez-le avec un débordement.

<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>

Answer 3

Vous pouvez utiliser plusieurs ombres CSS sans autre div pour obtenir l’effet souhaité, sans toutefois omettre les 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;

Dans l'ensemble, c'est très peu intrusif.

Answer 4

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 conserve l’ombre du contenu situé en dessous de la superposition. Pas sûr que ce soit possible avec la méthode ci-dessus:

MISE À JOUR:

En fait, je me suis trompé. 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 relatif positif sur le a, placez-le sur la classe a.active avec un z-index supérieur à votre div #content ci-dessous (qui a l'ombre dessus) mais inférieur au z- index 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 */

Answer 5

Une autre façon, plutôt créative, de résoudre ce problème consiste à ajouter: pseudo-élément after ou: before à 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 pour rendre le pseudo-élément en rouge afin de le rendre plus visible.

Answer 6

vous pouvez également masquer une ombre à l'aide de plusieurs ombres de boîte.

box-shadow: 0 10px 0 #fff, 0 0 10px #ccc;

Answer 7

Si vous avez ajouté deux portées à accrocher, vous pouvez en utiliser deux, par exemple:

box-shadow: -1px -1px 1px #000;

sur une travée et

box-shadow: 1px -1px 1px #000;

sur un autre. Pourrait travailler!

Si les ombres se chevauchent, vous pouvez même utiliser 3 ombres: une à 1 pixel à gauche, une à 1 pixel à droite et une autre en hauteur, ou quelle que soit leur épaisseur.

Answer 8

Si vous souhaitez utiliser une technologie expérimentale avec uniquement le prise en charge partielle , vous pouvez utiliser propriété clip-path .

Ceci produira l'effet souhaité: une ombre sur la boîte en haut, sur les côtés gauche et droit avec une coupure nette sur le bord inférieur.

Dans votre cas, vous utiliseriez clip-path: inset (px px px px); où les valeurs de pixel 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);
}

Ceci coupera la div en question à:

• 8 pixels au-dessus du haut (pour inclure l'ombre)
• 8 pixels en dehors du bord droit (pour inclure l'ombre)
• 0 pixel à partir du bas (pour masquer l'ombre)
• 8 pixels en dehors 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.

Answer 9

J'ai fait une sorte de bidouille, pas parfait, mais ça a l'air correct:

<ul class="tabs">
<li class="tab active"> Tab 1 </li>
<li class="tab"> Tab 2 </li>
<li class="tab"> Tab 3 </li>
</ul>

<div class="tab-content">Content of tab goes here</div>

SCSS

 .tabs { list-style-type: none; display:flex;align-items: flex-end;
  .tab {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid $vivosBorderGrey2;
    background-color:$vivosBorderGrey2;
    color: $vivosWhite;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom: 0;
    margin-right: 2px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
    transition: 0.2s;
    &.active {
      padding-bottom: 10px;
      background-color: #ffffff;
      border-color: #eee;
      color: $vivosMedGrey;
      border-bottom-color: transparent;
      box-shadow: 0px -3px 8px -3px rgba(0, 0, 0, 0.1);
    }
    &:hover {padding-bottom: 10px;
    }
   } 

.tabContent {
  border: 1px solid #eee;
  padding:10px;
  margin-top: -1px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}