X
Юрий Немец

Как придать легкий объем блоку на CSS3

Возможно вы уже видели данный эффект на разных сайтах, который действительно смотрится красиво. Так вот раньше данный эффект создавался используя изображение, которое до этого было создано, например, в программе Photoshop. Сейчас CSS3 позволяет нам создать такой эффект для блока без изображений. И в этом уроке мы рассмотрим как же его можно создать.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать



HTML часть

Эта часть очень простая и содержит один блок <div> в котором находится текст. Этому блоку мы и будет придавать эффект объема:

1
2
3

<div id="box">
    <h1>Эффект объема с помощью CSS3 box-shadow</h1>
</div>


CSS часть

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

Для этого необходимо прописать следующие строки в файле стилей:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);			  
}

А затем для блока <div> установить следующие свойства:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

#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;
}


Вывод

Абсолютно ничего сложного нет. Это значительно лучше, чем использовать изображение, т.к. такие изображения будут точно немаленькими.

Браузеры, которые будут поддерживать данный эффект:

  • Internet Explorer 9/10
  • Firefox (с версии 3.5)
  • Safari/Chrome
  • Opera (с версии 10.5)

Успехов!

Источник: www.red-team-design.com

Категории: CSS3