Создайте окно визуально перед фоном

Question

Я попытался реализовать контейнер, например shown in the picture below, чтобы держать сообщение в блоге. Белый контейнер в передней части фона.

я, хотя, если я изменить цвет фона, как белый, это будет похоже, что это. Но это не сработало, потому что похоже, что оба фона и мой белый boz одинаковый.

Как создать поле, чтобы сохранить сообщение в блоге, которое выглядит как перед фоном?

(Я занимаюсь разработкой веб-страницы блога)

Answer 1

Вы должны использовать другой исключительно деление с постов в блоге, так что вы можете стиль его легко.

This должно выглядеть так, как вы хотите достичь в действительно более простой форме.

HTML Образец Содержание:

<div id="main-container"> <!-- A main container div, for the whole webpage --> 
    <h3>Posts</h3> 
    <div class="post"> 
    <h4>Post Title</h4> 
    Blog post text here, Blog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text hereBlog post text here 
    </div> 
</div> 

И это, как ваш CSS код должен выглядеть следующим образом:

#main-container { 
    background-color: lightGray; 
} 

.post { 
    margin: 5em; 
    margin-bottom: 2em; 
    background-color: white; 
    border: 2px solid gray; 
    text-align: center; 
    box-shadow: 0px 0px 7px gray; 
} 

.post h4 { 
    text-align: center; 
} 

Вы должны иметь окна тени, чтобы включить этот 3D-эффект. Я бы рекомендовал использовать тени с несколькими ящиками, вы можете прочитать больше here.

Answer 2

Там может быть много проектов, которые можно использовать для этой цели. Но я рекомендую вам использовать border и border-radius свойства inline css. Это может немного поднять ваш контент. Еще одним встроенным свойством css будет border-style, с помощью которого вы можете определить такие стили, как: dashed, solid, double, groove, ridge, inset, outset.

Все зависит от вас, который вы хотите использовать. Если вам нужен пример, просто сообщите мне. Надеюсь, вы понимаете.

EDIT

<div class = "" style = "border-radius: 2px; border-style:dashed;"> 
<!--Text here--> 
</div> 

Answer 3

Чтобы применить эффект «зависания», вы можете использовать box-shadow для визуального отображения элемента перед фоном (по z-индексу). JSBin

#bg { 
    background-color: #ddd; 
    width: 130px; 
    height: 130px; 
    padding: 20px; 
} 

#fr { 
    background-color: #eee; 
    width: 130px; 
    height: 130px; 
    box-shadow: 2px 2px 5px #454545; 
    border-radius: 500px 
}