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

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

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

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

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

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

Линейный градиент

.

Линейный градиент

Линейным называется градиент, в котором изменение цвета происходит вдоль определенной прямой: снизу вверх, слева направо, по диагонали. Если вы работали с системами компьютерной графики, вроде Photoshop или Fireworks, понятие градиентов вам должно быть знакомо, но просто для того, чтобы освежить память, взгляните на рис. 7.1.

Линейный градиент

Рис. 7.1. Образцы линейного градиента

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

Так в теории. На практике все немного иначе. WebKit первым ввел градиенты несколько лет назад, используя собственный синтаксис со множеством аргументов. Затем реализация градиентов появилась в браузерах Mozilla, здесь синтаксис был проще и понятнее. Наконец, в январе 2011 консорциум W3C утвердил официальный синтаксис градиентов в CSS3. Новый синтаксис оказался очень близок к реализованному в Firefox — фактически настолько близок, что любой градиент, написанный в соответствии с новым синтаксисом, способен работать в Firefox. Синтаксис W3C был принят в WebKit, хотя ко времени написания этой книги он был только в черновых сборках движка; Chrome и Safari по-прежнему используют старый синтаксис. Для достижения обратной совместимости эти браузеры продолжат поддерживать старый синтаксис и после перехода на единый стандарт. Opera, начиная с версии 11.10, поддерживает стандарт W3C для линейных градиентов. Все существующие реализации используют вендорские префиксы (-webkit-,-moz-и-о-).

Все это по-прежнему не дает нам ответа на вопрос, как будут отображаться градиенты в старых вередах Opera и Internet Explorer. К счастью, IE9 и Opera 11.01 и более ранние версии поддерживают бэкграунд в формате SVG — и это действительно легкий способ создания фонового градиента. И, наконец, все версии IE поддерживают проприетарный фильтр, дающий возможность создавать базовые линейные градиенты.

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

Во втором рекламном блоке газеты HTML5 Herald, показанном на рисунке 7.2 (где рекламируется та самая книга, которую вы держите в руках!) градиент темный верхней части блока, затем он светлеет, снова темнеет, как бы создавая велосипедную дорожку, и внизу он опять светлый.

Линейный градиент

Рис. 7.2. Линейный градиент в HTML5 Herald

Создание кроссбраузерного градиента для нашего рекламного объявления начнем со стандартного синтаксиса. Он самый простой и легкий для понимания, а через несколько лет никакого другого синтаксиса вам и не нужно будет. Затем мы узнаем, чем отличается старый синтаксис WebKit и Firefox.


.

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