Здесь с помощью стиля и blockquote вы можете вывести как цитату или описание в красивом виде для светлого сайта, где прописаны тени. Здесь нужно в CSS прописать стили и потом в blockquote установить то описание или что вы хотите вывести в таком стили, что явно будет заметно. Но и под описание сайта также отличное решение, так как сейчас много есть материала с тенями и здесь этот дизайн будет не исключением в построение сайта.
Смотрим демонстрацию
Установка:
HTML код
Код
<blockquote>
Вы можете поставить такой вид на комментарий, а точнее на цитаты, что на светлом сайте будет красиво смотреться.
С уважением администратор сайта ZorNet.Ru
</blockquote>
CSS:
Код
blockquote p {
font-size: 16px;
font-weight: bold
}
blockquote {
position: relative;
width: 85%;
padding: 1em;
margin: 2em 10px 4em;
background: #FFF;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-border-radius: 4px
}
blockquote:before,
blockquote:after {
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg)
}
blockquote:after {
right: 10px;
left: auto;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg)
}
