drop shadow only bottom css3

C’è un modo per far cadere l’ombra solo sul fondo ?. Ho un menu con 2 immagini l’una accanto all’altra. Non voglio un’ombra giusta perché si sovrappone all’immagine giusta. Non mi piace usare le immagini per questo, quindi c’è un modo per rilasciarlo solo in basso come:

box-shadow-bottom: 10px #FFF; o simili?

 -moz-box-shadow: 0px 3px 3px #000; -webkit-box-shadow: 0px 3px 3px #000; box-shadow-bottom: 5px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000'); 

AGGIORNAMENTO 4

Uguale all’aggiornamento 3 ma con css moderno (= meno regole) in modo che non sia richiesto alcun posizionamento speciale sull’elemento pseudo.

 #box { background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); } .box-shadow:after { content:""; position:absolute; width:100%; bottom:1px; z-index:-1; transform:scale(.9); box-shadow: 0px 0px 8px 2px #000000; } 
 

Usa semplicemente il parametro spread per rendere l’ombra più piccola:

 .shadow { -webkit-box-shadow: 0 6px 4px -4px black; -moz-box-shadow: 0 6px 4px -4px black; box-shadow: 0 6px 4px -4px black; } 
 
Some content

Se si dispone di un colore fisso sullo sfondo, è ansible hide l’effetto ombra laterale con due ombre di mascheramento con lo stesso colore dello sfondo e sfocatura = 0, ad esempio:

 box-shadow: -6px 0 white, /*Left masking shadow*/ 6px 0 white, /*Right masking shadow*/ 0 7px 4px -3px black; /*The real (slim) shadow*/ 

Si noti che l’ombra nera deve essere l’ultima e ha uno spread negativo (-3px) per impedirne l’estensione oltre gli angoli.

Qui il violino (cambia il colore delle ombre di mascheramento per vedere come funziona davvero ).

inserisci la descrizione dell'immagine qui

È sempre meglio leggere le specifiche . Non esiste una proprietà box-shadow-bottom e, come sottolinea Lea, dovresti sempre posizionare la proprietà un-prefissata in fondo, dopo quelle prefissate.

Così è:

 .shadow { -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; } 
 
Some content

Penso che questo sia quello che stai cercando?

 .shadow { -webkit-box-shadow: 0 0 0 4px white, 0 6px 4px black; -moz-box-shadow: 0 0 0 4px white, 0 6px 4px black; box-shadow: 0 0 0 4px white, 0 6px 4px black; } 
 
wefwefwef

Che ne dici di usare un div contenente che ha overflow impostato su hidden e qualche padding in basso? Questa sembra la soluzione più semplice.

Mi dispiace dire che non ci avevo pensato ma l’ho visto da qualche altra parte .

Usare un elemento per avvolgere l’elemento ottenendo l’ombra della scatola e un overflow: nascosto nel wrapper si potrebbe far scomparire l’ombreggiatura in più e avere comunque un bordo utilizzabile. Questo risolve anche il problema in cui l’elemento è più piccolo come sembra, a causa della diffusione.

Come questo:

 #wrapper { padding-bottom: 10px; overflow: hidden; } #elem { box-shadow: 0 0 10px black; } 

Il contenuto va qui

Ancora una soluzione intelligente quando deve essere fatta in puro CSS!

Come detto da Jorgen Evens .

Avevo anche bisogno di un’ombra, ma solo sotto un’immagine e posta leggermente a sinistra e a destra. Questo ha funzionato per me:

 .box-shadow { -webkit-box-shadow: 5px 35px 30px -25px #888888; -moz-box-shadow: 5px 35px 30px -25px #888888; box-shadow: 5px 35px 30px -25px #888888; } 

L’elemento a cui è applicato è un’immagine a livello di pagina (980 x 300 px).

Se aiuta a manipolare le impostazioni, funziona come segue:

ombra orizzontale, ombra verticale, distanza di sfocatura, diffusione (ad es. dimensione dell’ombra) e colore.

Se il tuo sfondo è solido (oppure puoi riprodurlo usando i CSS), puoi usare il gradiente lineare in questo modo:

 div { background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 5px, #fff 5px, #fff 100%) } 
 

Foobar

test

aggiorna su qualcun altro la sua risposta lati trasparenti invece di bianco, quindi funziona anche su altri sfondi a colors.

 body { background: url(http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-backgrounds_042320876_304.jpg) } div { background: url(https://www.w3schools.com/w3css/img_avatar3.png) center center; background-size: contain; width: 100px; height: 100px; margin: 50px; border: 5px solid white; box-shadow: 0px 0 rgba(0, 0, 0, 0), 0px 0 rgba(0, 0, 0, 0), 0 7px 7px -5px black; } 
 

Ombra interiore

  .shadow { -webkit-box-shadow: inset 0 0 9px #000; -moz-box-shadow: inset 0 0 9px #000; box-shadow: inset 0 0 9px #000; } 
 
wefwefwef