Создание изображения только для отображения градиента негибко и может быстро стать плохой практикой. Но, к сожалению, на момент написания этой статьи, возможно, так и будет, но, будем надеяться, ненадолго. Благодаря Firefox и Safari/Chrome мы теперь можем создавать мощные градиенты с минимальными усилиями. В этой статье мы покажем простую реализацию CSS-градиентов и то, чем это свойство отличается в браузерах Mozilla и Webkit.
PS: В исходном тексте этой статьи содержится видео, но по известным причинам мы не можем посмотреть это видео на Youtube. Студенты, желающие его посмотреть, найдите способ посмотреть его самостоятельно (до 720P): http. ://www.youtube.com/watch?v=9D2hyM5SSCE
Хотя Mozilla и Webkit обычно используют один и тот же синтаксис для свойств CSS3, они, к сожалению, не могут договориться о градиентах. Webkit — первое ядро браузера, поддерживающее градиенты и использующее следующую структуру:
/* Синтаксис взят из: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<тип>, <точка> [, <радиус>]?, <точка> [, <радиус>]? [, <остановка>]*)
/* На практике... */
фон: -webkit-gradient(линейный, 0 0, 0 100%, от (красный), до (синий));
.jpg)
Не волнуйтесь, что эти синтаксисы вас ослепят, меня это тоже поразит! Только помните, что нам нужно разделять группы параметров запятой.