Тінь css для створення ефекту обсягу

Можливо ви вже бачили цей ефект на різних сайтах, який дійсно виглядає красиво. Так ось раніше даний ефект створювався використовуючи зображення, яке до цього було створено, наприклад, в програмі Photoshop. Зараз CSS3 дозволяє нам створити такий ефект для блоку без зображень. І в цьому уроці ми розглянемо як же його можна створити.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

HTML частина

Ця частина дуже проста і містить один блок в якому знаходиться текст. Цьому блоку ми і буде надавати ефект обсягу:

123	lt;div id="Box"gt;lt;h1gt; Ефект обсягу за допомогою CSS3 box-shadowlt;/h1gt;lt;/divgt;

Відео: Як додати об`єм волоссю

CSS частина

Для ще більш красивого ефекту додамо для body внутрішню тінь зверху як на зображенні нижче:

alt = "Тінь для body" width = "400" height = "204" class = "aligncenter size-full wp-image-1245" / gt;

Для цього необхідно прописати наступні рядки у файлі стилів:

1234567891011121314151617

body {background: # b3b4b7-text-align: center-}body: before {content: ""-position: fixed-top: -10px-left: 0-width: 100%-height: 10px-z-index: 100--webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8)--moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8)-box-shadow: 0px 0px 10px rgba(0,0,0,.8)-}

А потім для блоку встановити наступні властивості:

Відео: Як зробити об`ємні укладання волосся Як надати волоссю об`єм

12345678910111213141516171819202122232425262728293031323334353637383940414243

#box {position: relative-width: 20%-background: #ddd--moz-border-radius: 4px-border-radius: 4px-padding: 2em 1.5em-color: rgba(0,0,0, .8)-text-shadow: 0 1px 0 #fff-line-height: 1.5-margin: 60px auto-}#box: before, #box: after {z-index: -1-position: absolute-content: ""-bottom: 15px-left: 10px-width: 50%-top: 80%-max-width:300px-background: rgba(0, 0, 0, 0.7)--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)--o-transform: rotate(-3deg)--ms-transform: rotate(-3deg)-transform: rotate(-3deg)-}#box: after {-webkit-transform: rotate(3deg)--moz-transform: rotate(3deg)--o-transform: rotate(3deg)--ms-transform: rotate(3deg)-transform: rotate(3deg)-right: 10px-left: auto-}