Wie kann ich einen CSS "gut" -Effekt erzeugen, ähnlich wie BootStap, aber tiefer?

Question

Ich möchte einen Bereich auf meiner Seite erstellen, der den Bereich um ein paar Pixel etwas unterhalb der Seite aussehen lässt. Meine Seite hat derzeit einen weißen Hintergrund und einen # F5F5F5 Wannenbereich.

ich am Brunnen für twitter Bootstrap sah:

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

Für mich zumindest dies gar nicht wie gut aussieht. Vielleicht liegt es daran, dass ich weiß, dass der Schwerpunkt der späteren Version darin liegt, einen flachen Effekt zu erzeugen.

Hat jemand irgendwelche Beispiele dafür, wie ich einen gut funktionierenden Effekt hinzufügen könnte?

Answer 1

eine Kombination von Box Schatten verwenden, und eine sinnvolle Farbwahl, können Sie die Dinge sehen ganz leicht wie Brunnen machen:

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

Änderung der Boxshadow des Bootstrap gut zu:

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

siehe Beispiel hier: http://jsfiddle.net/swm53ran/199/

die ersten beiden Einsatzparameter der Schatten an den Seiten und dann oben und unten

Answer 3

Sie können einfach bootstrap well example überprüfen und zu kopieren „.nun“ -Regel

gesetzt 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>