Làm cách nào để tạo hiệu ứng "tốt" CSS tương tự như bootstap nhưng sâu hơn?

Question

Tôi muốn tạo một khu vực tốt trên trang của mình làm cho khu vực trông giống như một chút bên dưới trang bằng một vài pixel. Trang của tôi hiện có nền trắng và khu vựC# F5F5F5.

tôi nhìn vào cũng cho twitter bootstrap:

http://getbootstrap.com/components/#wells 

Đối với tôi ít nhất này không giống như tốt ở tất cả. Có lẽ đó là vì tôi biết trọng tâm của phiên bản sau là tạo ra hiệu ứng phẳng.

Có ai có bất kỳ ví dụ nào về cách tôi có thể thêm hiệu quả hoạt động tốt không?

Answer 1

Sử dụng một sự kết hợp của bóng hộp, và một sự lựa chọn màu sắc hợp lý, bạn có thể làm cho mọi việc trông giống như giếng khá dễ dàng:

Demo:

div { 
 
    height: 100px; 
 
    width: 200px; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    border-radius: 10px; 
 
    box-shadow: inset 0 0 10px black, 0 0 10px black; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    margin: 15px; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 
html, 
 
body { 
 
    background: gray; 
 
} 
 
.second { 
 
    box-shadow: inset 1px 1px 10px black, 0 0 30px black; 
 
} 
 
.third { 
 
    box-shadow: inset 0px 0px 10px black, 0 0 20px black; 
 
} 
 
.forth { 
 
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px black; 
 
}

<div>this is deep</div> 
 

 
<div class="second">I'm slightly different. But still look deep</div> 
 

 
<div class="third">Don't fall down me!</div> 
 

 
<div class="forth">Do you, like, wells?</div>

Answer 2

thay đổi các boxshadow của bootstrap cũng đến:

box-shadow: inset 2px 2px 1px rgba(0,0,0,.05); 

xem ví dụ ở đây: http://jsfiddle.net/swm53ran/199/

hai tham số hình chữ nhật đầu tiên là cái bóng ở hai bên và sau đó đầu và đáy

Answer 3

Bạn chỉ có thể kiểm tra bootstrap well example và sao chép ".well" quy tắc thiết

Demo:

.well { 
 
    min-height: 20px; 
 
    padding: 19px; 
 
    margin-bottom: 20px; 
 
    background-color: #f5f5f5; 
 
    border: 1px solid #e3e3e3; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 
 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05); 
 
}

<div class="well"> 
 
    Some Text 
 
</div>