Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем круговые и эллиптические градиенты с использованием CSS3

17 августа 2014 | Опубликовано в css | 3 Комментариев »

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

 

 

 


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

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

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

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

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

Значение  Описание
closest-side Для круглых градиентов форма градиента касается ближайшей к центру границы блока, а для эллиптических — касается и вертикальной, и горизонтальной сторон, ближайших к центру. 
closest-corner Форма градиента масштабируется так, чтобы коснуться ближайшего к центру угла. 
farthest-side Подобно closest-side, но форма масштабируется так, чтобы коснуться наиболее дальней от центра стороны, или вертикальной и горизонтальной сторон. 
farthest-corner Форма градиента масштабируется так, чтобы коснуться наиболее дальнего от центра угла. 
contain Синоним для closest-side. 
cover Синоним для farthest-corner. 

Источник: Сеть разработчиков 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 не такое сложное, как может показаться, особенно если использовать следующие инструменты для генерации кода:

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

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

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




Комментарии

  1. Дима
    Thumb up Thumb down 0

    пользуюсь генератором. Может кому нибудь пригодиться

    www.colorzilla.com/gradient-editor/

    Дима Ответ:

    Thumb up Thumb down 0

    Блин я не до конца дочитал статью)) там оказывается есть ссылка)

  2. Кирилл
    Thumb up Thumb down 0

    Переведите пожалуйста =) 

    code.tutsplus.com/tutoria...gners--pre-54689