Jak mogę utworzyć "dobrze" CSS podobny do bootstap, ale głębiej?

Question

Chciałbym utworzyć obszar na mojej stronie, który sprawi, że obszar będzie wyglądał nieco poniżej strony o kilka pikseli. Moja strona ma obecnie białe tło i obszar # F5F5F5.

Spojrzałem na studzienkę przez twitter bootstrap:

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

przynajmniej dla mnie to nie wygląda dobrze w ogóle. Może dlatego, że wiem, że celem późniejszej wersji jest stworzenie płaskiego efektu.

Czy ktoś ma przykłady, w jaki sposób mogę dodać działający efekt dobrze?

Answer 1

Za pomocą kombinacji cieni skrzynkowych i rozsądny wybór koloru, można dokonać rzeczy wyglądają jak studnie dość łatwo:

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

zmienić Boxshadow od bootstrapu do:

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

patrz przykład tutaj: http://jsfiddle.net/swm53ran/199/

pierwsze dwa parametry wpuszczane są cień na bokach, a następnie górny i dolny

Answer 3

Można po prostu wglądu bootstrap well example i kopiowania „.Dobrze” regułę określoną

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>