Лого www.SiteHere.ru

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

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

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

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

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

HTML часть

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

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

CSS часть

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

Тень для 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

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
Комментарии (2) к записи
  • ZeroXor

    Настоящий ад начинается, когда для сайта есть требование — корректное отображение в Internet Explorer. Здесь тоже есть вариант, хотя бы тот же PIE использовать, правда он неслабо нагружает браузер и при слабом компе и большом количестве CSS3-эффектов сайт будет едва-едва ворочаться. Сам буквально на днях с таким столкнулся.

     
    • Юрий

      Да, вы правы. Со старыми браузерами, а в частности с IE проблемы есть постоянно.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *