Градиентная заливка с помощью CSS3

Have a question? Ask in chat with AI!

линейный градиент CSS3Хотел бы сегодня рассказать о том, как сделать градиентную заливку с помощью CSS3. Это позволит избавиться нам от использования фоновых изображений. Сегодня я расскажу об линейном градиенте. В самое ближайшее время постараюсь рассказать так же о радиальном. Итак, начнем.

Необходимый минимум

Для начала рассмотрим конструкцию, которая даст нам мультибраузерность. Вот так будет выглядеть код:

#element {
    background: -moz-linear-gradient(black, white); /* FF 3.6+ */
    background: -ms-linear-gradient(black, white); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(black, white); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
    background: linear-gradient(black, white); /* the standard */
}

Итогом этого кода будет вот такая заливка:

В данном примере мы применяем IE фильтр, что позволит сохранить кроссбраузерность и в Internet Explorer. Немного о коде. Во-первых, минимальным является наличие двух цветов. Во-вторых, стандартное определение желательно использовать последним. В-третьих, мы использовали различные конструкции для различных браузеров: -webkit-, -moz-, -o-.

Полный синтаксис

А вот пример полного синтаксиса без дополнительных конструкций:

#element {
    background: linear-gradient(top, black 0%, white 100%);
}

Этот пример выдаст нам тот же градиент, что и предыдущий «черно-белый». Давайте более подробно разберем все параметры.

Угол градиента или начальная точка

Там где расположено слово top у нас есть варианта: мы можем задать угол с которого начать либо указать место, с которого начать. В предыдущем примере мы указали начать сверху (top), что эквивалентно углу в -90 градусов. Таким образом этот код даст тот же результат:

#element {
    background: linear-gradient(-90deg, black 0%, white 100%);
}

Так же эквивалентом в данном случае буде являться и угол в 270 градусов.
Итог: вы можете использовать ключевые слова (top, bottom, right, left) либо задать откуда градиенту начаться углом в градусах.

Стоп позиции или метки

В простейшем случае использования линейного градиента нам понадобиться 2 цвета и не придется определять стоп позиции. Но если на понадобиться использовать более двух цветов мы столкнемся с необходимостью задать стоп позиции для этих цветов.

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

#element {
    background: linear-gradient(top, red 0%, orange 15%, yellow 30%, green 45%, blue 60%, indigo 75%, violet 100%);
}

А вот и результат:

Из кода видно что каждый градиент начинается сверху и каждый из цветов занимает по 15% в нашем градиенте.

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

Если вы собираетесь использовать двухцветный градиент, то конструкция приведенная в самом начале этой статьи будет работать во всех браузерах. А вот градиент с несколькими цветами не будет работать в IE 6-8. Opera поддерживает градиент с несколькими цветами начиная с версии 11.10. Остальные браузеры (Chrome, Safari, Firefox) работают с градиентами на 100%.

Заключение

CSS3 градиенты это не свойства — это изображения, созданные после рендеринга браузером.
Синтаксис, который используется для создания градиента ничто иное как функция с несколькими параметрами.
Стоп позиции заданные в процентах, могут быть так же заданы в пикселях.
Для стоп позиций допускается использование отрицательный значений в процентах и значений > 100%.

UPD: На данный момент написана обширная статья на тему Градиенты в CSS

На заметку: Заработок в интернете и все что с этим связано подробно описано на сайте zarabotat100.ru. Рекомендуем вам уже сегодня посетить этот сайт если вы хотите попробовать зарабатывать в сети.


20 комментариев для “0

  1. Уведомление: Градиентная заливка с помощью CSS3 | Grabr
  2. Уведомление: progg.ru
  3. Как долго я ждал простую возможность поддерживать красивый интерфейс.

    1. Превосходные эффекты! если кому любопытно их в работе посмотреть, то реализовывал многое тут:) и тут интерессно h

    2. Если нужен диплом на заказ, а так же реферат, курсовую, отчет по практике

      Если сломался вашь любимый или не любимый 😉 ноутбук

  4. -moz-linear-gradient /* FF 3.6+ */ -ms-linear-gradient /* IE10 */
    -webkit-gradient /* Safari 4+, Chrome 2+ */
    -webkit-linear-gradient /* Safari 5.1+, Chrome 10+ */
    -o-linear-gradient /* Opera 11.10 */Когда же вы, сраные мудаки, уже договритесь!!! А???С MS-то все понятно, остальным то пора бы уже…

  5. Уведомление: Веб-разработка / Что почитать на выходных? Рекомендуем, выпуск №11 | crowler-pcworld
  6. Universal css3 generator http://css3generator.com/ 
    Click on tab with gradients.
    I think it’s best solution for css3 🙂

  7. генератов масса) по мне так важно понимать как работает свойство

    1. а что такого?) есть превью версия IE10.  http://ie.microsoft.com/testdrive/

      1.  ахаха
        значит всего ничего осталось и к 14-рй версии таки можно будет ие советовать юзать 🙂

        а если по теме, то думаю, что для базовых вещей типа box-shadow и тп через 18 мес уже можно будет не писать префиксы.

  8. Unitedbuy:
    не критикуй то, что не понимаешь, троль. префиксы уберут тогда, когда спецификация выйдет из статуса черновика. хотя не запоминай эти сложные слова, не надо.

  9. Уведомление: Градиенты CSS | RusDigi.org Блог Гилязетдинова Руслана
  10. Уведомление: Изучаем HTML5, JavaScript, CSS3 | Окружение IT-шника
  11. Уведомление: 10 приемов CSS3, которые можно и нужно использовать | RusDigi.org Блог Гилязетдинова Руслана
  12. Уведомление: Собянин поспособствует развитию интернет рекламы » Новости науки
  13. Уведомление: | Строительный портал

Добавить комментарий для _b1 Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись ВКонтакте: нововведения апреля
Следующая запись Эффекты при наведении. 5 готовых вариантов на CSS3