Главная » Полезные статьи » HTML-верстка » Разбор CSS3-синтаксиса для тени бокса
Распечатать статью

Разбор CSS3-синтаксиса для тени бокса

Данный пост посвящен краткому разбору свойств свойства CSS3 box-shadow, о котором также можно узнать в моей интерактивной таблице.

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

Полный синтаксис

Объявление атрибута box-shadow, включающее все возможные значения и вендорные префиксы, выглядит следующим образом:

.box {
        -webkit-box-shadow: #c4c4c4 3px 3px 10px 5px inset;
        -moz-box-shadow: #c4c4c4 3px 3px 10px 5px inset;
        box-shadow: #c4c4c4 3px 3px 10px 5px inset;
        }

Увидеть данный код в действии можно здесь.

За что отвечает каждое из значений?

 

Значение №1: цвет

Первое значение – цвет тени. Оно может быть любым валидным объявлением цвета. Цвет тени не является полупрозрачным по умолчанию, как это принято у теней в графике. Наоборот, автор должен сам задать цвет и значение прозрачности (опционально) для тени. Например, можно использовать цветовые схемы HSLA и RGBA, которые позволяют задавать настройки альфа-канала, или же использовать непрозрачный серый, как это делаю я.

Следуя спецификации, значение цвета можно опустить и задать его при помощи атрибута color. Однако по некоторым причинам такой вариант не работает в WebKit. В других же браузерах все отлично получается, вы можете убедиться в этом, помотрев этом демо.

Допускается размещать значение цвета как до размеров тени, так и после них, но не между парами размеров. То есть, нельзя делать так:

.box {
        box-shadow: 3px 3px #c4c4c4 10px 5px;
        }

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

Значение №2: сдвиг по горизонтали

Второе значение задает сдвиг тени по горизонтали и может быть положительным или отрицательным, а также иметь любые допустимые единицы измерения CSS. Положительно значение сдвигает тень вправо, отрицательное – влево относительно расположения блока, для которого создается тень.

Первоначальная тень, но со сдвигом в 100 пикселей по горизонтали.

Значение №3: сдвиг по вертикали

Третье значение – сдвиг по вертикали – имеет ровно те же параметры, что и сдвиг по горизонтали, разница лишь в том, что тень сдвигается вверх или вниз, при отрицательном или положительном значении соответственно.

Предыдущий вариант тени с добавлением сдвига в 100 пикселей по вертикали.

Значение №4: радиус размытия (необязательный параметр)

Четвертое значение тоже может иметь любой допустимый размер, однако теперь отрицательное значение не учитывается и интерпретируется как «0». Радиус размытия определяет резкость или размытость тени. Чем меньше значение, тем резче тень. Большее значение означает большее размытие.

Вот пример очень большого радиуса размытия. А в этом примере использовано отрицательное значение.

Третье значение размера всегда интерпретируется как радиус размытия.

Значение №5: распространение (необязательный параметр)

Очередное значение снова размерная величина, которая может быть положительной или отрицательной и определяет на какое расстояние распространяется тень с учетом заданного сдвига. Отрицательное значение делает тень более резкой.

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

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

Значение №6: inset — обращенность вовнутрь (необязательный параметр)

Данное значение работает аналогично логическому атрибуту в HTML. То есть наличие этого параметра означает «использовать внутреннюю тень», а отсутствие — внешнею. Поэтому нет необходимости использовать «outset», просто не задавайте данное значение, если требуется внешняя тень.

Значение inset должно быть указано первым или последним, в противном случае вся строка будет проигнорирована.

Множественные тени

Для одного элемента можно создать несколько теней, просто отделите запятой каждую из них при объявлении атрибута box-shadow:

.box {
        box-shadow: #c4c4c4 10px 10px 10px 5px, #c4c4c4 30px 20px 10px 10px;
        }

Вот необычный пример каскадного расположения нескольких теней.

Тени создаются слоями от переднего плана к заднему, то есть первая тень перекроет вторую, вторая третью и так далее. Это обратный пример того, как HTML-элементы располагаются на странице при применении атрибута z-index.

Замечания напоследок по теням для блоков

Что нужно помнить при создании теней:

  • Поддержка этой функции со стороны браузеров очень хорошая, за исключением IE6-8
  • Для обеспечения ожидаемой работоспособности в  IE6-8 можно использовать CSS3 PIE, этот скрипт, или cssSandpaper, но лучше просто всё свести к отсутствию тени
  • Браузеры, которые требуют вендорные префиксы: Safari 3.1 вплоть до версии 5.0; Firefox 3.5 и 3.6; Chrome вплоть до версии 9; некоторые мобильные браузеры
  • Большая тень не сдвигает соседние элементы и не создает полосу прокрутки, если ее размер больше родительского элемента
  • Тень бокса будет скруглена, если указан радиус границы, но если для границы задано изображение, оно не повлияет на внешний вид тени
  • Здесь сообщается, что тени боксов потенциально могут влиять на скорость загрузки страницы, поэтому используйте их с умом
Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи