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

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

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

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

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

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

Детали в тени

.

Разработчики очень часто получают от дизайнеров макеты веб-страниц с множеством скругленных углов, и вы уже знаете, как реализовать такой эффект. Но есть еще одно свойство, которое вам часто придется настраивать, — эффект тени. В графических редакторах, например в Photoshop, создание эффекта тени — очень простая задача, но достичь его на веб-странице несколько сложнее.

В прошлом приходилось создавать изображение, как бы уже содержащее собственную тень, но по разным причинам это не очень правильно — например, картинка тогда некорректно отображалась при изменении окна браузера. К счастью, есть способ создать эффект тени с помощью CSS — для этого предназначено свойство box-shadow.

Лучше всего продемонстрировать его работу на примере страницы с фотогалереей. Применим этот эффект одновременно со скруглением углов. Новые объявления выделены полужирным шрифтом:

На рис. 9.13 хорошо виден результат.

Рис. 9.13. Свойство box-shadow устанавливает для изображения тень

Как это получилось? Свойство box- shadow получает значения, которые мы ввели, и применяет их в следующем порядке.

1. Смещение по горизонтальной оси.

2. Смещение по вертикальной оси.

3. Ширина размытой части тени.

4. Цвет тени.

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

box-shadow:10рх 10рх 20рх black: Результат показан на рис. 9.14.

Рис. 9.14. С увеличением смещения тень получается более глубокой

Можно применить даже несколько теней к одному изображению — просто присвойте свойству несколько наборов значений через запятую. Например, сделайте две тени: вверху слева и внизу справа, используя по очереди положительные и отрицательные значения:

box-shadow:2рх 2рх 15рх black. -2рх -2рх 15рх black:

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

Рис. 9.15. Эффект выпуклости создан благодаря хитроумному использованию box-shadow

.

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