2016-05-16 8 views
9

Tôi đang cố tạo bóng một phần trên div lệch, gần với quảng cáo này.Tạo một bóng hộp một phần trên div bị lệch nghiêng

enter image description here

Ngay bây giờ tôi đã cố gắng để làm điều này với các yếu tố giả (trước cụ thể) nhưng tôi phát hiện ra rằng những yếu tố có biểu hiện lạ mỗi khi tôi nghiêng yếu tố chúng được áp dụng để. Phần tử giả tiếp tục xuất hiện trên đầu div của tôi, mặc dù chỉ mục z được đặt thành -1. Bất kể tôi làm gì với chỉ mục z, nó sẽ ở trên đỉnh của nó. Tôi muốn nó nằm phía sau div nó được áp dụng cho, và trước div bên dưới, như trong quảng cáo.

enter image description here

Dưới đây là :: của tôi trước khi mã và một liên kết đến 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

Trả lời

9

Skew phụ huynh sau đó unskew đứa trẻ ở cùng một mức độ.

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

+1

Chà, điều này thật hoàn hảo. Cảm ơn! –

+0

Bạn được chào đón :) –

0

Tôi đã thử, nó không phải là hoàn hảo, nhưng, nó là gần hơn với giao diện mong muốn, imho:

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

Vì vậy, tôi đã thêm phần tử html mới (bóng), thay vì sử dụng các phần tử giả ... Bây giờ, tôi đã đặt z-index và vị trí đúng cách, để ẩn bóng xoay div sau div đầu tiên và thêm css này:

#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

Bạn có thể chơi với luân chuyển, hộp bóng, vị trí, chiều cao ... nhưng, điều này có thể là một khởi đầu tốt (có thể). P.S. Logic tương tự có thể được áp dụng cho div thứ hai.

2

Cách tiếp cận dễ dàng hơn là đặt bóng thả ở đầu mỗi hộp sau hộp đầu tiên. Điều này sẽ giải quyết tất cả các loại vấn đề z-index, vì mỗi hộp ngồi 1 cấp cao hơn hộp phía trên nó .. và nó cho phép bóng nằm bên trong container thay vì bên ngoài nó.

Tôi cũng đã thay đổi kiểu dáng bóng của bạn để sử dụng một gradient xuyên tâm * thay vì bóng hộp, vì nó dễ kiểm soát hơn trong tình huống này và cũng gần với thiết kế của bạn hơn. Tôi cũng đã làm một chút vị để làm cho nó trông tốt hơn một chút quá, và nhận được bên riêng biệt cho skew1skew2

Tôi đã thay đổi ruleset cuối cùng của bạn như thế này:

.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

* lưu ý: Bạn có thể muốn kiểm tra/thêm hỗ trợ trình duyệt bổ sung trên gradient mà tôi đưa vào trước khi sử dụng nó.

+0

Đó là khá tốt đẹp! –

0

cố gắng làm cho hộp bóng cho phần tử thứ hai sử dụng :before giả 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>

Các vấn đề liên quan