В этом уроке мы расскажем о градиентах CSS3. Раньше мы уже рассказывали, как создать линейные градиенты. На этот раз речь пойдет о круговых и эллиптических градиентах.

Синтаксис градиента 

Градиент в CSS3 объявляется с помощью свойства background-image. Это сделано для лучшей совместимости, чтобы когда нам также нужно использовать свойство background-color в том же наборе правил, эти свойства не вступали в противоречие друг с другом. После этого, чтобы создать круговой градиент, нам просто нужно вызвать его с помощью функции radial-gradient(). Чтобы правильно настроить градиент, нужно передать функции четыре значения.

Первое значение определяет расположение градиента. Мы можем использовать описывающие ключевые слова, такие как top (верх), bottom (низ), center (центр) и left (слева), или определения могут быть более точными, такими как 50% 50%, чтобы градиент был расположен в центре, или 0% 0%, что соответствует значению top left, и градиент будет расположен слева сверху.

Второе значение определяет форму и размер градиента, чтобы задать форму, можно использовать один из двух параметров: первый параметр — это ellipse (эллипс), который используется по умолчанию, и второй — это circle (круг).

Для значения размера градиента мы можем использовать один из шести следующих параметров.

Источник: Сеть разработчиков Mozilla

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

body {
    background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);
}

Мы можем создать круговой градиент следующим образом:

body {
    background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
}

Как видно из названия, градиент будет круговым.

Поддержка браузерами 

Обратите внимание, все браузеры все еще в процессе внедрения поддержки этого свойства, так что понадобятся приставки производителей. Таким образом, весь синтаксис, который будет работать во всех современных браузерах, таких как Internet Explorer 10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+, будет выглядеть следующим образом:

body {
    background-image: radial-gradient(center bottombottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -o-radial-gradient(center bottombottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -ms-radial-gradient(center bottombottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -moz-radial-gradient(center bottombottom, ellipse cover, #ffeda3, #ffc800);
    background-image: -webkit-radial-gradient(center bottombottom, ellipse cover, #ffeda3, #ffc800);
}

Посмотрите пример или скачайте исходник, чтобы поиграть с градиентами.

Демонстрация работы – Скачать исходный код

Заключение 

Создание круговых градиентов CSS3 не такое сложное, как может показаться, особенно если использовать следующие инструменты для генерации кода:

• Градиенты Colorzilla
• Gradientoo

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

• Интересная скользящая форма с использованием jQuery
• Создание анимированной гистограммы с использованием CSS3
• Создание изображения HAL 9000 c использованием только CSS