Бэкграунды и фоны для сайта

С помощью стилей CSS3 можно творить чудеса в вэб-дизайне. Картинки пока еще не взлетают, но приподняться над поверхностью и зависнуть над бэкграундом могут. Для чего можно использовать эффект приподнятости, а точнее эффект тени, создающей впечатление оторванности тела сайта или картинки от бэкграунда?

Основные решаемые задачи, это - красота и конечно, чтобы обратить внимание посетителя сайта на выделенный тенью (приподнятый) блок или изображение. Дизайн сайта fonforsite.ru использует тень и является наглядным примером.

Тень можно присвоить как блоку (параграфу, блоку div, комментарию или картинке). В примере ниже, рассмотрен универсальный пример использования box-shadow.

.shadow {
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
}

Первые три строчки это описание одного и того же свойства тени для разных браузеров. Пока что разработчики браузеров не пришли к согласию и единому способу представления данного свойства, поэтому приходится учитывать это в описании.

Далее рассмотрим состав свойств тени. Как я говорил выше они одинаковые в первых трех строках стиля класса .shadow, поэтому если вы меняете цифры и цвет в первой строке, то делайте те же изменения и в последующих двух.

Итак в box-shadow: 0 0 10px rgba(0,0,0,0.5), первая цифра "0" - это отступ по оси X, второй ноль "0" - это отступ по оси Y, а 10px - это сглаживание или точнее, радиус размытия тени. Цвет rgba(0,0,0,0.5) может быть задан любой и, любым способом используемым в CSS (black, #000 или #000000).

Чтобы тень появилась в том месте где вам нужно, все эти свойства нужно применить к классу, а класс к картинке или блоку div

<div class="shadow">Как заставить взлететь картинку на сайте </div>

Подробнее о тонкостях настройки тени у объекта можно посмотреть в htmlbook.