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

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

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

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

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

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

Собираем все вместе

.

Собираем все вместе

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

Если ваш дизайнер включил градиент в макет страницы, то скорее всего сам макет он рисовал в программе Photoshop или аналогичной. Это вам поможет; если у вас есть доступ к исходным файлам, воспроизвести градиент очень легко.

Если мы откроем в программе Photoshop градиент, который мы хотим использовать дія баннера, и внимательно его изучим, то обнаружим, что это линейный градиент с пятью ключевыми точками, в которых изменяется степень непрозрачности основного цвета (черного) (рис. 7.7).

Собираем все вместе

Рис. 7.7. Пример линейного градиента в Photoshop’e

Как видно на скриншоте, в исходной точке основной цвет имеет 40%-ную непрозрачность. В первой ключевой точке (в позиции 37%) непрозрачность становится равной 0%. Мы можем использовать полученную информацию для создания стиля CSS, начав со стандартного синтаксиса W3C (используемого в браузерах Firefox, Opera 11.10 и новых браузерах семейства WebKit):

Собираем все вместе

Собираем все вместе

Мы хотим, чтобы градиент изменялся от верхнего края баннера к нижнему, поэтому задаем вектор 270°. Затем мы добавляем все ключевые точки из растрового градиента Photoshop.

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

А теперь давайте добавим старый синтаксис WebKit, следом за которым расположена его более современная версия:

Собираем все вместе

Теперь у нас есть градиент, который выглядит так, как нам нужно, в браузерах Mozilla, Opera, Safari и Chrome.

.

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