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

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

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

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

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

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

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

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

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

Если ваш дизайнер включил градиент в макет страницы, то скорее всего сам макет он рисовал в программе 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

Нам доверяют

Интернет магазин