Tworzenie częściowego cienia pudełka na przekrzywionym dziale

Question

Próbuję utworzyć częściowy cień na przekrzywionym dziale, tak blisko, jak to tylko możliwe.

Teraz Próbowałem to zrobić z elementami pseudo (przed specjalnie), ale okazało się, że te elementy zachowują się dziwnie, kiedy ja pochylić element ich wniosek. Pseudo element pojawia się na górze mojego div, mimo że indeks Z jest ustawiony na -1. Bez względu na to, co zrobię z indeksem Z, pozostanie na nim. Chcę, żeby była za divem, do którego się stosuje, i przed divem, jak w twórczości.

Oto moja :: przed kodem i link do 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 rodzic następnie unskew dziecka w tym samym stopniu.

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

próbowałem, to nie jest idealne, ale jest to bliżej pożądanego wyglądu, imho:

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

Dodałem więc nowy element html (shadow), zamiast używać pseudoelementów ... Teraz ustawiłem z-indeksy i pozycje poprawnie, aby ukryć obrócony cień div za pierwszym div i dodano tego 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

można grać z rotacją, box-shadow, położenie, wysokość ... ale, może to być dobry początek (być może). P.S. Podobną logikę można zastosować do drugiego elementu div.

Answer 3

Łatwiejszym podejściem byłoby umieszczenie cienia u góry każdego pudełka po pierwszym. To rozwiąże wszystkie rodzaje problemów z indeksem Z, ponieważ każde pole znajduje się o 1 poziom wyżej niż pole nad nim .. i pozwala cienie siedzieć wewnątrz kontenera, a nie poza nim.

Zmieniłem także styl cienia, aby użyć gradientu promieniowego * zamiast cienia pudełka, ponieważ jest on nieco łatwiejszy do kontrolowania w tej sytuacji, a także jest bliższy Twojemu projektowi. Zrobiłem też trochę pozycjonowania, aby wyglądać nieco lepiej też i uzyskać oddzielne strony dla skew1 i skew2

Zmieniłem swój ostatni zestaw reguł do tego:

.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

* uwaga: możesz chcieć sprawdzić/dodać dodatkowe wsparcie dla przeglądarki na gradientu, który umieściłem przed jego użyciem.

Answer 4

próbować cień skrzynki do drugiego elementu za pomocą :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>