CSS3 Box Ombra in primo piano, a sinistra ea destra Solo

Question

Saluti,

Sto cercando di applicare un'ombra scatola CSS3 al solo la parte superiore, a destra, e la sinistra di un DIV con un raggio che corrisponde al risultato della seguendo CSS (meno l'ombreggiatura inferiore)

#div { 
    -webkit-box-shadow: 0px 0px 10px #000; 
    -moz-box-shadow: 0px 0px 10px #000; 
    box-shadow: 0px 0px 10px #000; 
} 

Quale sarebbe il modo migliore per realizzare questo?

Grazie!

UPDATE Questa ombra sarà applicata ad una barra di navigazione su una pagina, la barra è posizionato sulla parte superiore del contenitore principale DIV. Quello che sto cercando di realizzare è di continuare l'ombra del box del DIV principale sulla barra di navigazione, che si trova sopra di esso, ma senza un'ombra in basso sulla barra di navigazione. Dai uno sguardo allo site itself per vedere di cosa sto parlando, più facile che aggiungere tutto l'HTML e il CSS qui.

UPDATE 2 Dal momento che il DIV sto lavorando con è singolare, piuttosto che cercare di mettere un'ombra su ogni nav Li, ho deciso di cambiare al seguente:

-webkit-box-shadow: 0px -4px 7px #e6e6e6; 
    -moz-box-shadow: 0px -4px 7px #e6e6e6; 
    box-shadow: 0px -4px 7px #e6e6e6; 

Questo rende il la parte superiore dell'ombra è molto evidente ma è quello che sto cercando di realizzare - se qualcuno conosce un modo per mantenere l'ombra nello stesso aspetto del contenitore DIV, per favore fatemelo sapere. Grazie!

Answer 1

È meglio se coprite solo la parte inferiore con un altro div e otterrete un'ombreggiatura coerente su tutta la scheda.

#servicesContainer { 
    /*your css*/ 
    position: relative; 
} 

ed è corretto! come per magia!

Answer 2

Aggiunta di una risposta separata perché è radicalmente diversa.

È possibile utilizzare rgba e impostare il canale alfa basso (per ottenere la trasparenza) per rendere meno evidente l'ombreggiatura.

provare qualcosa di simile (giocare con il .5)

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5); 

Spero che questo aiuti!

Answer 3

utilizzare il valore diffusione ...

box-shadow ha i seguenti valori

box-shadow: x y blur spread color; 

così si potrebbe usare qualcosa come ..

box-shadow: 0px -10px 10px -10px black; 

UPDATE: sto aggiungendo un jsfiddle

Answer 4

Si può dare più valori di box-shadow proprietà
esempio

-moz-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
-webkit-box-shadow: 0px 10px 12px 0px #000, 
        0px -10px 12px 0px #000; 
box-shadow: 0px 10px 12px 0px #000, 
      0px -10px 12px 0px #000; 

è ombra di sinistra e solo solo, si c un adattarlo alle proprie esigenze

Answer 5

ho trovato un modo per coprire l'ombra con ": dopo", qui è il mio codice:

#div:after { 
    content:""; 
    position:absolute; 
    width:5px; 
    background:#fff; 
    height:38px; 
    top:1px; 
    right:-5px; 
} 

Answer 6

Il codice seguente ha fatto per me fare un inserto ombra del lato destro:

-moz-box-shadow: inset -10px 0px 10px -10px #000; 
-webkit-box-shadow: inset -10px 0px 10px -10px #000; 
box-shadow: inset -10px 0px 10px -10px #000; 

Spero che possa essere d'aiuto !!!!

Answer 7

Stavo avendo lo stesso problema e stavo cercando una possibile idea per risolvere questo.

ho avuto qualche CSS già in vigore per le mie schede e questo è ciò che ha funzionato per me:

(noti in particolare la padding-bottom: 2px; all'interno #tabs #selected a { che nasconde il fondo box-shadow ordinatamente e ha lavorato molto per me con il seguente CSS..)

#tabs { 
    margin-top: 1em; 
    margin-left: 0.5em; 
} 
#tabs li a { 
    padding: 1 1em; 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
} 
#tabs #selected { 
    /* For the "selected" tab */ 
    box-shadow: 0 0 3px #666666; 
    background: #FFFFFF; 
} 
#tabs #selected a { 
    position: relative; 
    top: 1px; 
    background: #FFFFFF; 
    padding-bottom: 2px; 
} 
#tabs ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
#tabs li { 
    float: left; 
    border: 1px solid; 
    border-bottom-width: 0; 
    margin: 0 0.5em 0 0; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px; 
} 

Pensavo che l'avrei messo lì come un'altra possibile soluzione per chiunque avesse bisogno di SO per questo.

Answer 8

So che questo è molto vecchio, ma nessuna di queste risposte mi ha aiutato, quindi sto aggiungendo la mia risposta. Questo, come la risposta di @ yichengliu, utilizza l'elemento Pseudo ::after.

#div { 
    position: relative; 
} 



#div::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1px; 
    height: 100%; 
    z-index: -1; 

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1); 
} 

/*or*/ 

.filter.right::after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    background: white; 
    z-index: -1; 

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)); 
} 

Fiddle

Se si decide di cambiare la X del ombra (misurazione primo pixel del drop-shadow o box-shadow), modificando la larghezza contribuirà in modo non sembra che ci sia un bianco gap tra il div e l'ombra.

Se si decide di cambiare la Y dell'ombra discendente (seconda misurazione pixel di drop-shadow o box-shadow), la modifica dell'altezza aiuterà per lo stesso motivo di cui sopra.

Answer 9

#div:before { 
content:""; 
position:absolute; 
width:100%; 
background:#fff; 
height:38px; 
top:1px; 
right:-5px; 
}