Creazione di un'ombra di casella parziale su un div obliquo

Question

Sto provando a creare un'ombra parziale su un div inclinato, il più vicino possibile a questa creatività.

In questo momento ho provato a fare questo con elementi pseudo (prima in particolare) ma ho trovato che tali elementi si comportano stranamente ogni volta che inclinare l'elemento che essi vengano applicati. Lo pseudo elemento continua ad apparire sopra il mio div, anche se lo z-index è impostato su -1. Non importa cosa faccio con z-index, rimarrà al di sopra di esso. Voglio che sia dietro il div a cui è applicato, e davanti al div in basso, come nella creatività.

Ecco la mia :: prima di codice e un link al codepen

CSS

/*! Shadows */ 
#test-title { 
    position: relative; 
} 

#test-title:before { 
    z-index: -1; 
    position: absolute; 
    content: ""; 
    bottom: 15px; 
    left: 10px; 
    width: 50%; 
    top: 80%; 
    max-width:300px; 
    box-shadow: 0 15px 10px #777; 
    -webkit-transform: rotate(-3deg); 
    -moz-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    -ms-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

http://codepen.io/kathryncrawford/pen/WwWEma

Answer 1

Skew genitore poi unskew il bambino allo stesso grado.

* { 
 
    box-sizing: border-box 
 
} 
 
body { 
 
    padding: 40px 0 
 
} 
 
section { 
 
    width: 60vw; 
 
    clear: both; 
 
    overflow: hidden; 
 
    min-height: 100px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    background: #035076 
 
} 
 
section article { 
 
    width: 60%; 
 
    padding: 20px; 
 
    color: white; 
 
    margin: 0 auto 
 
} 
 
section:nth-child(even) { 
 
    transform: skew(-45deg) translate(5vw); 
 
    box-shadow: inset 0 0 2px 0 black; 
 
} 
 
section:nth-child(odd) { 
 
    transform: skew(45deg); 
 
} 
 
section:nth-child(even) article { 
 
    transform: skew(45deg) translate(5vw); 
 
} 
 
section:nth-child(odd) article { 
 
    transform: skew(-45deg); 
 
} 
 
section:before, 
 
section:after { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
section:nth-child(even):before { 
 
    width: 100%; 
 
    height: 0; 
 
    bottom: 100%; 
 
    left: 0; 
 
    z-index: 6; 
 
    opacity: 1; 
 
    transform: rotate(-10deg) translateY(-30px); 
 
    box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8); 
 
} 
 

 
section:nth-child(odd):not(:first-child):before { 
 
    width: 100%; 
 
    height: 0; 
 
    bottom: 100%; 
 
    right: 0; 
 
    z-index: 6; 
 
    opacity: 1; 
 
    transform: rotate(10deg) translateY(-30px); 
 
    box-shadow: 0px 0px 64px 30px rgba(0, 0, 0, 0.8); 
 
}

<section> 
 
    <article>What our clients say About Us</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section> 
 
<section> 
 
    <article>Read More!</article> 
 
</section>

Answer 2

ho provato, non è perfetto, ma è più vicino al look desiderato, imho:

<div id="test-title"> 
      <h3>What our clients say about us</h3> 
     </div> 
     <div id="shadow1"></div> 

Quindi, ho aggiunto un nuovo elemento html (shadow), piuttosto che usare pseudo-elementi ... Ora, ho impostato z-index e posizioni correttamente, per nascondere il div shadow ruotato dietro il primo div e aggiunto questo css:

#shadow1 { 
    position:absolute; 
    width:50%; 
    height:150px; 
    background:black; 
    top:50px; 
    left:11%; 
    z-index:6; 
    opacity:1; 
transform: rotate(-5deg); 
box-shadow: 15px 56px 50px -12px rgba(0,0,0,0.80); 

} 

Demo: http://codepen.io/anon/pen/vGwNqY

Si può giocare con la rotazione, box-shadow, la posizione, l'altezza ... ma, questo potrebbe essere un buon inizio (forse). Post scriptum Una logica simile potrebbe essere applicata al secondo div.

Answer 3

L'approccio più semplice sarebbe quello di mettere l'ombreggiatura nella parte superiore di ogni scatola dopo la prima. Questo risolverà tutti i tipi di problemi z-index, dal momento che ogni casella si trova ad un livello superiore rispetto al riquadro sopra di esso .. e consente all'ombra di sedersi all'interno del contenitore anziché all'esterno di esso.

Ho anche modificato lo shadow design per utilizzare un gradiente radiale * invece di un'ombra di riquadro, in quanto è un po 'più facile da controllare in questa situazione, ed è anche più vicino al tuo progetto. Ho anche fatto un po 'di posizionamento per farlo sembrare un po' meglio anche, e ottenere i lati separati per skew1 e skew2

ho cambiato il tuo ultimo set di regole a questo:

.test-info:before { 
    position: absolute; 
    content: ""; 
    width: 100%; 
    left: 0; 
    top: 0; 
    height: 30px; 
} 

.test-info.skew1:before { 
    background: radial-gradient(ellipse farthest-side at 30% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); 
} 
.test-info.skew2:before { 
    background: radial-gradient(ellipse farthest-side at 70% top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); 
} 

See Demo

* nota: potresti voler controllare/aggiungere ulteriore supporto browser sul gradiente che ho inserito prima di usarlo.

Answer 4

cercare di rendere scatola ombra per il secondo elemento utilizzando :before pseudo https://jsfiddle.net/0andpzsp/

.cont { 
 
    width: 1000px; 
 
    height: 500px; 
 
} 
 

 
div[class^="d"] { 
 
    width: 70%; 
 
    height: 50%; 
 
    position: relative; 
 
    margin-left: 40px; 
 
    margin-top: 50px; 
 
} 
 

 
.d0 { 
 
    background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);; 
 
    transform: skew(20deg) 
 
} 
 

 
.d1 { 
 
    background: linear-gradient(to right, #005f8a 0%,#00486c 50%,#003a59 100%);; 
 
    overflow: hidden; 
 
    top: -50px; 
 
    left: 20%; 
 
    transform: skewX(-20deg); 
 
    z-index: -1 
 
} 
 

 
.d1:before { 
 
    content: ''; 
 
    border-radius: 30%; 
 
    position: absolute; 
 
    display: block; 
 
    width: 600px; 
 
    height: 70px; 
 
    z-index: 9999; 
 
    top: -100px; 
 
    left: -70px; 
 
    box-shadow: -50px 60px 90px 0px #000; 
 
    transform: rotate(-5deg) 
 
}

<div class="cont"> 
 
    <div class="d0"></div> 
 
    <div class="d1"> 
 
    </div> 
 
</div>