Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

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

Создание теней

.

Создание теней

Блочные элементы получили в CSS3 возможность отбрасывать тень с помощью свойства box-shadow.

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

Мы обычно воспринимаем элемент с тенью как «парящий» над фоном страницы, однако столь богатый выбор настроек оставляет гораздо больше простора для фантазии. Так, для нашей рекламной ссылки мы можем применить свойство box-shadow без размытия, чтобы возникло впечатление трехмерного бокса.

Аргументы свойства box-shadow перечисляются через запятую. Каждая тень задается несколькими параметрами, обозначающими размер, цвет, а также положение тени (внутренняя тень или внешняя). Если вы не укажете последний параметр, то по умолчанию тень будет отображаться за пределами элемента.

Давайте посмотрим на параметры нашей тени и разберем, что каждый из них означает:

Создание теней

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

Второе значение — отступ по вертикали. Если это число больше нуля, тень окажется ниже элемента, если меньше нуля — то выше. У нас тень опускается на пять пикселов ниже.

Если присутствует третье значение, оно задает расстояние, на котором тень начинает размываться. Чем больше это значение (оно может быть только положительным), тем сильнее размыта тень. Поскольку мы решили не размывать тень, здесь следует либо указать ноль, либо опустить это значение.

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

Пятое значение — цвет. Обычно вам потребуется указывать этот параметр. Если он опущен, то согласно спецификации тень должна быть того же цвета, который указан в параметре color элемента, ее отбрасывающего. Opera и Firefox поддерживают это требование, но не WebKit, поэтому удостоверьтесь, что вы указали это значение. В приведенном примере мы указали цвет RGBA. В данном конкретном случае тень непрозрачная, и мы могли бы просто использовать шестнадцатиричное значение. Но в большинстве случаев тень полупрозрачна, и поэтому цвет следует задавать в системе RGBA или HSLA.

Тень, полученную в результате применения описанных выше параметров, вы можете видеть на рис. 6.6.

Создание теней

Рис. 6.6. Добавление тени к нашему рисунку создает иллюзию глубины

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

Opera, Firefox 4 и IE9 поддерживают синтаксис без префиксов. Однако мы по-прежнему указываем префикс -moz- для Firefox 3.6 и более ранних и префикс -webk.it- для Safari и Chrome. Впрочем, все новые версии браузеров уже поддерживают версии без префиксов.


.

Читайте так же:
Not found