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

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

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

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

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

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

Старый синтаксис WebKit

.

Старый синтаксис WebKit

Как мы говорили выше, последние версии движка WebKit уже умеют работать с синтаксисом W3C; однако в браузерах Safari и Crome они еще не реализованы, поэтому там используется старый WebKit-синтаксис. Поскольку наш код должен адекватно поддерживаться этими браузерами, запишем, как наш черно-белый градиент будет выглядеть в понятной этим браузерам нотации:

Старый синтаксис WebKit

Вместо свойства linear-gradient используется более общее -webkit-gradient, где указан тип градиента (линейный в данном случае) в качестве первого параметра. Для линейного градиента требуется указывать и начальную, и конечную точку вектора. Начальная и конечная точка могут указываться с использованием значений в процентах, целых числах и ключевых словах (top, bottom, left, right и center).

Следующий шаг — определение ключевых точек. Вы можете включить исходный цвет с ключевым словом from, а конечный — со словом to. Затем вам нужно определить любое число ключевых точек при помощи функции color-stop (). Ее первый аргумент — позиция ключевой точки, а второй — цвет.

Пример:

Старый синтаксис WebKit

Старый синтаксис WebKit

Вот мы и воссоздали нашу радугу, напоминающую об эмблеме GeoCities образца 1996 года. Кстати, не так уж и обязательно указывать исходный и конечный цвет. Поскольку from (red) — то же самое, что color-stop (0,  red), то весь стиль можно записать и так:

Старый синтаксис WebKit

Если вы не объявляете исходный цвет, то в его качестве будет использоваться ближайший определенный цвет. У элемента будет граница, залитая сплошным цветом, вплоть до первой ключевой точки, от которой цвет начнет меняться к следующей ключевой точке. После последней ключевой точки будет использоваться заданный в ней цвет. Иными словами, если первая ключевая точка расположена на отметке 40%, а последняя — на 60%, то первым цветом будет залито все пространство от 0 до 40%, последним — от 60 до 100%, а в промежутке от 40 до 60% как раз и будет градиент.

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

Мы расскажем об этом подробнее в конце раздела, а сейчас надо понять, как использовать оба варианта синтаксиса при создании кроссбра-узерного градиента для HTML5 Herald.

Мы используем то обстоятельство, что в старом синтаксисе WebKit используется другое название свойства (-webkit-gradient вместо -webkit-linear-gradient); это позволит нам написать оба варианта рядом без конфликта. Фактически, старый синтаксис по-прежнему поддерживается новым движком WebKit, так что браузер просто будет выполнять инструкцию, написанную последней.


.

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