Хотел бы сегодня рассказать о том, как сделать градиентную заливку с помощью 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. Рекомендуем вам уже сегодня посетить этот сайт если вы хотите попробовать зарабатывать в сети.
Как долго я ждал простую возможность поддерживать красивый интерфейс.
Превосходные эффекты! если кому любопытно их в работе посмотреть, то реализовывал многое тут:) и тут интерессно h
Если нужен диплом на заказ, а так же реферат, курсовую, отчет по практике
Если сломался вашь любимый или не любимый 😉 ноутбук
-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-то все понятно, остальным то пора бы уже…
пока мотиватор в одно место не всунут, до тех пор не договорятся
Автор, а я глядя в ваш код вижу код который генерирует вот этот сервис — http://www.colorzilla.com/gradient-editor
а вот генератор css3.me добавил в закладки, спсибо)
Universal css3 generator http://css3generator.com/
Click on tab with gradients.
I think it’s best solution for css3 🙂
генератов масса) по мне так важно понимать как работает свойство
/* IE10 */ — это твердая ПЯТЬ
а что такого?) есть превью версия IE10. http://ie.microsoft.com/testdrive/
ахаха
значит всего ничего осталось и к 14-рй версии таки можно будет ие советовать юзать 🙂
а если по теме, то думаю, что для базовых вещей типа box-shadow и тп через 18 мес уже можно будет не писать префиксы.
Unitedbuy:
не критикуй то, что не понимаешь, троль. префиксы уберут тогда, когда спецификация выйдет из статуса черновика. хотя не запоминай эти сложные слова, не надо.