Creazione di un box-shadow CSS3 su tutti i lati tranne uno

Question

Ho una barra di navigazione a schede in cui vorrei che la scheda aperta avesse un'ombra per distinguerla dalle altre schede. Vorrei anche che l'intera sezione delle schede avesse una singola ombra (vedi linea orizzontale inferiore) che si alza, ombreggiando la parte inferiore di tutte le schede tranne quella aperta.

Userò la proprietà box-shadow di CSS3 per farlo, ma non riesco a trovare un modo per ombreggiare solo le parti che desidero.

Normalmente coprirei l'ombra in basso della scheda aperta con l'area del contenuto ( z-index più alto), ma in questo caso l'area del contenuto stessa ha un'ombra in modo da avvolgere coprendo la scheda.

Layout della scheda

     _______    _______    _______
    |       |  |       |  |       |
____|_______|__|       |__|_______|______

Linea d'ombra.

L'ombra saliva dalle linee orizzontali e verso l'esterno delle linee verticali.

                _______
               |       |
_______________|       |_________________

Qui è un esempio dal vivo:

Qualche aiuto là fuori, geni?

Answer 1

Nel tuo esempio crea un div all'interno di #content con questo stile

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

e cambia lo stile #content (rimuovi i padding) e aggiungi l'ombra

#content {
    font-size: 1.8em;
    box-shadow: 0 0 8px 2px #888; /* line shadow */
}

aggiungi ombre alle schede:

#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

Taglialo con troppo pieno.

<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

Puoi usare più ombre CSS senza altri div per ottenere l'effetto desiderato, con l'avvertenza di nessuna ombra dietro gli angoli.

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

Nel complesso è molto poco invadente.

Answer 4

Personalmente mi piace la soluzione trovata qui migliore: http://css3pie.com/demos/tabs/

Ti permette di avere uno stato zero o uno stato al passaggio del mouse con un colore di sfondo che ha ancora l'ombra dal contenuto sottostante sovrapponendolo. Non sono sicuro che sia possibile con il metodo sopra:

UPDATE:

In realtà non ero corretto. È possibile fare in modo che la soluzione accettata supporti lo stato al passaggio del mouse mostrato sopra. Fai questo:

Invece di avere il parente positivo su a, mettilo sulla classe a.active con un indice z che è più alto del div #content sottostante (che ha l'ombra su di esso) ma è più basso dello z- indice sul tuo content_wrapper.

Ad esempio:

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

quindi con il tuo 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

Un altro modo, piuttosto creativo, per risolvere questo problema è l'aggiunta dello pseudo elemento after or: before a uno degli elementi. Nel mio caso sembra così:

#magik_megamenu>li:hover>a:after {
    height: 5px;
    width: 100%;
    background: white;
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
}

Guarda lo screenshot, reso rosso lo pseudo elemento per renderlo più visibile.

Answer 6

puoi coprire anche le ombre usando più box box.

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

Answer 7

Se hai aggiunto due span da agganciare, puoi usarne due, qualcosa del tipo:

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

su una span e

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

su un altro. Potrebbe funzionare!

Se le ombre si sovrappongono, puoi anche usare 3 ombre: una 1px a sinistra, una 1px a destra e una 1px in alto, o comunque spessa le desideri.

Answer 8

Se sei disposto a utilizzare la tecnologia sperimentale con solo supporto parziale , puoi utilizzare la proprietà clip-path .

Questo produrrà l'effetto desiderato: un'ombra a forma di scatola sui lati superiore, sinistro e destro con un taglio netto sul bordo inferiore.

Nel tuo caso useresti il ??percorso clip: inset (px px px px); dove i valori dei pixel sono calcolati dal bordo in questione (vedi sotto).

#container {
    box-shadow: 0 0 8px 2px #888;
    clip-path: inset(-8px -8px 0px -8px);
}

Questo eliminerà il div in questione su:

• 8 pixel sopra la parte superiore (per includere l'ombra)
• 8 pixel al di fuori del bordo destro (per includere l'ombra)
• 0 pixel dal basso (per nascondere l'ombra)
• 8 pixel al di fuori del bordo sinistro (per includere l'ombra)

Nota che non sono necessarie virgole tra i valori di pixel.

La dimensione del div può essere flessibile.

Answer 9

Ho fatto una sorta di hack, non perfetto, ma sembra a posto:

<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);
}