—»     —»   Создаем привлекательные эффекты с помощью CSS3 box-shadow
  Раздел: CSS/Style Sheets   Нет комментариев  

Создаем привлекательные эффекты с помощью CSS3 box-shadow

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

Создаем привлекательные эффекты с помощью CSS3 box-shadow

Параметр box-shadow

Параметр box-shadow позволяет нам добавлять несколько теней (внутренних или внешних) к блочным элементам. Для того чтобы сделать это, нам потребуется указать значения color, size, blur и offset.

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Ядерная наука?

Не совсем. Давайте посмотрим небольшой пример:

box-shadow: 3px 3px 10px 5px #000;

Это объявление CSS сгенерирует для нас следующую тень:

Создаем привлекательные эффекты с помощью CSS3 box-shadow

* положительное значение горизонтального смещения позволяет нам отодвинуть тень от блока в правую сторону, отрицательное – в левую.
* следующее значение отвечает за вертикальное смещение. Положительное значение вертикального отступа просто смещает тень элемента вниз, отрицательное - вверх.
* нам запрещено пользоваться отрицательными значениями для радиуса размытия. Чем больше значение – тем больше тень размыта, как это можно наблюдать выше.
* положительные значения дистанции размытия позволяют вам увеличить размытие по указанному радиусу.
* отрицательные значения позволяют нам сделать тень более четкой.
* параметр color отвечает за цвет тени.
* ключевое слово inset (которое мы опустили выше) позволяет нам изменять тип тени с внутренней на внешнюю.

Вышеприведенная теория – это всего лишь небольшая часть информации, и если вам хочется узнать подробнее, то вам следует ознакомиться со спецификацией W3C.

Довольно теории, давайте творить!

Теперь же давайте посмотрим, какие преимущества можно извлечь из этого параметра CSS3. Ниже мы продемонстрируем вам, каким образом вы можете улучшить собственные дизайны с помощью box-shadow.

Добавляем ощущение глубины

Ссылка на материал

Создаем привлекательные эффекты с помощью CSS3 box-shadow

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

Тени

Создаем привлекательные эффекты с помощью CSS3 box-shadow

Следующие статьи нас вдохновляют:

* Тени на CSS3 (автор Дивья Маньян)
* CSS-тени без изображений (автор Николас Гэллахер)

#box 
{
position: relative;
width: 60%;
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;
}

Подсказки

Попробуйте усовершенствовать тени в собственных проектах с помощью RGBa. Параметр box-shadow может быть использован при помощи CSS3 RGBa-цветов для создания теней разных уровней плотности. Если ваш браузер поддерживает параметр box-shadow, то он обязательно должен поддерживать режим RGBa.

Используйте несколько теней в одном CSS-объявлении:

box-shadow: 3px 3px 10px 5px #000, 0 0 4px rgba(0, 0, 0, .5) inset;

Браузерная поддержка

* Internet Explorer 9/10
* Firefox (от 3.5)
* Safari/Chrome
* Opera (от 10.5)

В завершение

Мы рекомендуем вам использовать эти параметры уже с сегодняшнего дня, если до этого вы этого не делали. Почему? Да потому что вы можете использовать box-shadow и при этом не преломлять отображение разметки в старых браузерах.

* Посмотреть демо
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 11862   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031