[RISOLTO] Bootstrap e Box-shadow

[mau_develop]

due div al 100%...

quello superiore contiene un menu e un fondo colorato

quello sotto altre cose e un immagine/pattern di sfondo ripetuto x y

se al div sopra aggiungo il bordo inferiore shadow lo vedo solamente se il div sotto non ha un immagine di background, altrimenti sembra non applicarlo o non stare sullo stesso livello e quindi coprirlo... in qs ultimo caso non saprei ..è come vedere la luce spenta quando chiudi il frigo

why? ... cosa non so?

[SimoR]

Dimensioni in percentuali entrambi ? Possibile che la shadow aumenti la dimensione ed non rietra più nel 100% ? Prova a darle una dimensioni più bassa in percentuale.


Posta un pò di codice così ho qualcosa da provare.

[mau_develop]

bhe non è che c'è da fare esempi... mi sembra banale e chiaro..

fai un div con un bg colorato al 100%
ne fai un altro sotto con un img di background e a quello sopra imposti uno shadow al bordo inferiore così che l'ombra sormonti il background del div sotto.

quello che succede col box shadow è in pratica la duplicazione del box in una posizione sottostante che io davo per scontato sovrastasse il div sottostante, magari forzando lo z-index di uno e dell'altro... invece non è così

[SimoR]

Ok.. penso di aver capito cosa chiedevi.. Se è come la foto allegata io ho scritto questo:


HTML

Codice: [Seleziona]


<div class="inferiore">
   <div id="superiore" class="superiore-shadow"><>


<>


CSS

Codice: [Seleziona]


.inferiore{
      width: 100%;
      background: url(/MWC/img.jpg);
      height: 150px;
      z-index: -2;
      position: fixed;
      left: 0;
      top: 0;
   }
   
   #superiore {
      background-color: rgb(194, 182, 151);
      width: 100%;
      height: 90px;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
   }


   .superiore-shadow:after {
      content: "";
      width: 100%;
      height: 1px; /*se metti 0px non ti viene il rigo bianco, come ti piace  */
      margin-top: 88px;
      display: block;
      position: absolute;
      left: 0;
      z-index: 0;
      -webkit-box-shadow: 0px 0px 20px 4px rgb(0, 0, 0);
      -moz-box-shadow: 0px 0px 20px 4px #000000;
      box-shadow: 0px 0px 20px 4px rgb(0, 0, 0);
   }


Non so perchè ma il [ code ] non mi chiude i div..

[allegato eliminato automaticamente dopo un anno]

[mau_develop]

caspita funziona!

gli z-index li avevo provati .. a dir la verità credo di aver provato di tutto tranne :after che ora vado a vedermi

grazie

[SimoR]

Perfetto, è  stato un piacere 

[giusebos]

non sapevo che l'attributo shadow può anche diventare una pseudoclasse.
Questi css sono sempre più potenti, forse ci vuole un buon libro da studiare.