В пятницу команда WebKit объявила, что обновляет поддержку градиента CSS3 в движке рендеринга, чтобы привести его в соответствие с реализацией Mozilla. Ночные сборки WebKit теперь включают поддержку -webkit-linear-gradient-webkit-radial-gradient Эти новые значения используют тот же синтаксис, что и -moz-linear-gradient-moz-radial-gradient Большинство разработчиков в прошлом отказались от использования генераторов градиентного кода, так как старый синтаксис WebKit было сложно запомнить. Благодаря этому новому более простому и согласованному синтаксису использование градиентов на рабочих сайтах станет намного проще.
Синтаксис также был включен в последний черновой вариант модуля значений CSS3 и замененного содержимого редактора .
К счастью для разработчиков, которые уже начали использовать старый -webkit-gradient Это потому, что новые свойства названы по-другому, и существующая реализация -webkit-gradient
В качестве демонстрации новой поддержки в сообщении блога анонса содержится несколько примеров градиентов. Посмотрите на источник, и вы увидите, что значения одинаковы в значениях -moz-linear-gradient-webkit-linear-gradient То же самое касается радиальных градиентов и повторяющихся версий линейных и радиальных градиентов.
Для тех, кто не знаком с синтаксисом, давайте быстро ознакомимся. Задать простой линейный градиент просто:
background-image: -webkit-linear-gradient(black, white);
background-image: -moz-linear-gradient(black, white);
Если вы хотите, чтобы ваш градиент располагался вдоль другой оси, вы можете указать исходную точку, используя такие ключевые слова, как leftrighttopbottombottom leftbottom right Значение угла идет раньше, чем заканчивается список цветов, а градусы отсчитываются по часовой стрелке справа. Таким образом, для градиента, начинающегося в верхнем правом углу поля и заканчивающегося в левом нижнем углу, вы можете написать одно из следующих:
background-image: -webkit-linear-gradient(top right, black, white);
background-image: -webkit-linear-gradient(135deg, black, white);
Вы также можете определить остановки, чтобы настроить, где начинается каждый цвет, и вы можете указать столько разных цветов, сколько захотите.
Синтаксис для радиальных градиентов очень похож:
background-image: -webkit-radial-gradient(black, white);
Если вы хотите расположить центр градиента, просто укажите значения X и Y так же, как и для background-position:
backround-image: -webkit-radial-gradient(10px 10px, black, white);
Вы также можете отрегулировать форму и размер радиального градиента, посмотреть технические характеристики или объявление для более подробной информации.
Последовательная реализация и черновая спецификация — это большие шаги в продвижении градиентов CSS3 к тому, что мы можем использовать в повседневных проектах. Если вы уклонялись от них в прошлом из-за их сложности, то заставит ли это обновление WebKit пересмотреть их использование?
Если вы хотите узнать больше от Луи, подпишитесь на нашу еженедельную техническую новостную рассылку Tech Times .