Exore LTD » CSS3 » Как придать легкий объем блоку на CSS3
Лого SiteHere.ru

Июль 3, 2014 Запись была обновлена

Время чтения: 2 мин. Прочитать позже

Как придать легкий объем блоку на 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

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

3 комментария к записи
  • ZeroXor

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

     
    Ответить
    • Юрий

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

       
      Ответить
  • Лариса

    Хороший эффект! Но…..жаль, что не все браузеры его поддерживают 🙁

     
    Ответить

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

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