С помощью стилей 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.
Комментарии (0)
Оставить Комментарий
[ Регистрация | Вход ]