CSS: Линейный градиент для фона. Как сделать градиентный фон на вашей странице Градиент с помощью css

Влад Мержевич

Градиентом называют плавный переход от одного цвета к другому, причём самих цветов и переходов между ними может быть несколько. С помощью градиентов создаются самые причудливые эффекты веб-дизайна, например, псевдотрёхмерность, блики, фон и др. Также с градиентом элементы смотрятся более симпатично, чем однотонные.

Отдельного свойства для добавления градиента нет, поскольку он считается фоновым изображением, поэтому добавляется через свойство background-image или универсальное свойство background , как показано в примере 1.

Пример 1. Градиент

Здесь обсценная идиома традиционно начинает прозаический образ, но языковая игра не приводит к активно-диалогическому пониманию.

Результат данного примера показан на рис. 1.

Рис. 1. Линейный градиент для абзаца

В самом простом случае с двумя цветами продемонстрированном в примере 1 вначале пишется позиция, от которой будет начинаться градиент, затем начальный и конечный цвет.

Для записи позиции вначале пишется to , а затем добавляются ключевые слова top , bottom и left , right , а также их сочетания. Порядок слов не важен, можно написать to left top или to top left . В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.

Табл. 1. Типы градиента

Позиция		Описание	Вид
to top	0deg	Снизу вверх.
to left	270deg	Справа налево.
to bottom	180deg	Сверху вниз.
to right	90deg	Слева направо.
to top left		От правого нижнего угла к левому верхнему.
to top right		От левого нижнего угла к правому верхнему.
to bottom left		От правого верхнего угла к левому нижнему.
to bottom right		От левого верхнего угла к правому нижнему.

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

Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.

Для значения top left и ему подобных угол наклона градиентной линии вычисляется, исходя из размеров элемента так, чтобы соединять две диагонально противоположные угловые точки.

Для создания сложных градиентов двух цветов уже будет недостаточно, синтаксис позволяет добавлять их неограниченное количество, перечисляя цвета через запятую. При этом можно использовать прозрачный цвет (ключевое слово transparent ), а также полупрозрачный с помощью формата RGBA, как показано в примере 2.

Пример 2. Полупрозрачные цвета

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Градиент с полупрозрачными цветами

Чтобы точно позиционировать цвета в градиенте, после значения цвета указывается его положение в процентах, пикселах или других единицах. Например, запись red 0%, orange 50%, yellow 100% означает, что градиент начинается с красного цвета, затем на 50% переходит в оранжевый, а затем до конца в жёлтый. Для простоты крайние единицы вроде 0% и 100% можно не писать, они подразумеваются по умолчанию. В примере 3 показано создание градиентной кнопки, в которой положение второго цвета из трёх задано как 36%.

Пример 3. Градиентная кнопка

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Нажми меня нежно

Результат данного примера показан на рис. 3.

Рис. 3. Градиентная кнопка

За счёт задания положения цвета можно получить резкие переходы между цветами, что в итоге даёт набор однотонных полосок. Так, для двух цветов надо указать четыре цвета, первые два цвета одинаковы и начинаются от 0% до 50%, оставшиеся цвета также одинаковы меж собой и продолжаются от 50% до 100%. В примере 4 полоски добавляются в качестве фона веб-страницы. Из-за того, что крайние значения подставляются автоматически их можно не указывать, так что достаточно написать всего-лишь два цвета.

Пример 4. Однотонные полоски

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

Типичная европейская буржуазность и добропорядочность изящно иллюстрирует официальный язык.

Результат данного примера показан на рис. 4. Обратите внимание, что один из цветов градиента задан прозрачным, поэтому он меняется косвенно через цвет фона веб-страницы.

Рис. 4. Фон из горизонтальных полосок

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код. Имеются готовые шаблоны (Presets), просмотр результата (Preview), настройка цветов (Adjustments), конечный код (CSS), который поддерживает IE через фильтры. Для тех, кто работал в Фотошопе или другом графическом редакторе, создание градиентов покажется плёвым делом, остальным не составит труда быстро разобраться. В общем, всячески рекомендую.

Ранее в блоге мы уже рассказывали про и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3.

Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia , который является прекрасным примером профессионального использования всех возможностей CSS3.

Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, судя по всему, разработчкии BrightMedia сейчас уже не используют линейные градиенты, заменив их на canvas. Во-вторых, наша основная задача — потренирвоаться с linear-gradient и skew трансформацией в CSS3. В итоге должно получиться что-то вроде следующей картинки:

1. Подготовка и контейнер

Для того, чтобы создать на CSS градиенты фона нам потребуется реализовать наложение нескольких слоев элементов DIV на странице, имеющей черный цвет. Прежде чем прибегнуть к опциям CSS3 для работы с 2D-трансформацией и linear-gradient, задаем размеры и местоположение блоков. Открываем новый файл CSS стилей и начнем его с такого кода:

* { margin : 0 ; padding : 0 ; border : 0 ; } body { background : #000 ; }

* { margin: 0; padding: 0; border: 0; } body { background: #000; }

При создании основного контейнера DIV используем произвольные размеры и полное разрешение. Данный четырехугольник представляет собой область наложения градиентов.

В HTML файл пишем код:

Mainblock { background: none; margin: 250px auto; width: 1800px; height: 700px }

2. Слои

Будем называть наши градиентные слои «mylayer». Как только вы создадите один такой элемент, работа с остальными не вызовет сложностей (процесс абсолютно идентичен). Все начинается с четырехугольника, к которому применим 2D-трансформацию, а именно метод skew. Это позволит исказить его, наклонив его оси X. Все слои в примере имеют наклон = 45 градусов влево или вправо. В HTML добавляем:

Последним в коде расположен текстовый блок. CSS стили при этом следующие:

.mylayer1 { width : 550px ; height : 600px ; float : left ; margin : -15% 0% 0 10% ; transform : skew (45deg , 0deg ) ; } .mylayer2 { width : 400px ; height : 600px ; float : left ; margin : 2% 0% 0% 10% ; transform : skew (45deg , 0deg ) ; } .mylayer3 { width : 270px ; height : 450px ; float : left ; margin : 5% 0% 0% -42% ; transform : skew (-45deg , 0deg ) ; } .mylayer4 { width : 350px ; height : 300px ; float : left ; margin : -22% 0% 0% -10% ; transform : skew (-45deg , 0deg ) ; }

Mylayer1 { width: 550px; height: 600px; float: left; margin: -15% 0% 0 10%; transform: skew(45deg, 0deg); } .mylayer2 { width: 400px; height: 600px; float: left; margin: 2% 0% 0% 10%; transform: skew(45deg, 0deg); } .mylayer3 { width: 270px; height: 450px; float: left; margin: 5% 0% 0% -42%; transform: skew(-45deg, 0deg); } .mylayer4 { width: 350px; height: 300px; float: left; margin: -22% 0% 0% -10%; transform: skew(-45deg, 0deg); }

Увидеть блоки без фона можно путем добавления в код свойства border.

3. Градиент для фона

Итак, на предыдущем мы определили местоположение блоков DIV + задали им искажение. Теперь можно подобрать соответствующий градиент. В данном примере наиболее подходящим является линейный градиент, однако, можно использовать и радиальный. Для каждого из классов добавляете нужную заливку, например:

.mylayer1 { background : linear-gradient(to bottom , rgba (229 , 243 , 12 , 0 ) , rgba (243 , 61 , 12 , 0.4 ) , rgba (12 , 99 , 243 , 0 ) ) ; } .mylayer2 { background : linear-gradient(to bottom , rgba (30 , 60 , 55 , 0.2 ) , rgba (75 , 40 , 125 , 0.5 ) , rgba (60 , 20 , 80 , 0.6 ) , rgba (0 , 0 , 0 , 0 ) ) ; } .mylayer3 { background : linear-gradient(to top , rgba (0 , 0 , 0 , 0 ) , rgba (255 , 255 , 255 , 0.3 ) , rgba (255 , 255 , 255 , 0.8 ) ) ; } .mylayer4 { background : linear-gradient(to bottom , rgba (0 , 0 , 0 , 0 ) , rgba (35 , 25 , 65 , 0.5 ) , rgba (140 , 60 , 130 , 0.9 ) ) ; } .

Mylayer1 { background: linear-gradient(to bottom, rgba(229,243,12,0), rgba(243,61,12,0.4), rgba(12,99,243,0)); } .mylayer2 { background: linear-gradient(to bottom, rgba(30,60,55,0.2), rgba(75,40,125,0.5), rgba(60,20,80,0.6),rgba(0,0,0,0)); } .mylayer3 { background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,0.3), rgba(255,255,255,0.8)); } .mylayer4 { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(35,25,65,0.5), rgba(140,60,130,0.9)); }.

Вы можете направлять градиент вверх, вниз, влево или вправо, определяя значение цвета с помощью метода rgba(). При этом кроме фона можно определить степень прозрачности блоков.

4. Фоновое изображение

Наиболее красивый градиент фона получается при наложении цветов с невысоким уровнем прозрачности, достаточном для того, чтобы нижние слои были видны. Также на странице можно добавить дополнительный фон — например, на сайте BrightMedia есть прозрачный Png файл с точками и линиями. Нужно создать соответствующую картинку, загрузить ее на ваш сайт, а в стилях для body добавить что-то вроде:

body { background : url (http: //мой_сайт/img/dots9.png) repeat fixed center , #000 ; }

body { background: url(http://мой_сайт/img/dots9.png) repeat fixed center, #000; }

5. Итого

Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):

Трансформация skew в CSS

Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:

• skewX() — искажение вдоль оси X;
• skewY() — отклонение по оси Y;
• skew() — одновременно задается значения и по X и по Y.

В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:

div { -ms-transform: skew (45deg , 5deg ) ; /* for IE 9 */ -webkit-transform: skew (45deg , 5deg ) ; /* for Safari */ transform : skew (45deg , 5deg ) ; }

div { -ms-transform: skew(45deg, 5deg); /* for IE 9 */ -webkit-transform: skew(45deg, 5deg); /* for Safari */ transform: skew(45deg, 5deg); }

Кстати, такая запись используется для корректной работы кода в IE 9 и Safari. Если при использовании функции skew второй параметр опускается, то предполагается, что он равен 0. У skewX и skewY изначально есть только одно значение.

В принципе, ничего сложного в трансформации skew нету. Можете попробовать создать несколько примеров дабы понять для себя как именно производится искажение. Не знаю насколько красивый градиент фона на CSS у нас получился, но что-то новое для себя вы определенно узнали.

Поддержка градиентной заливки средствами CSS была введена около двух лет назад в браузерах на движке Webkit(Google Chrome и Safari), но другие на то время не поддерживали это свойство, поэтому градиенты делали с использованием картинок. Теперь эта оплошность исправлена, Firefox 3.6+ в полной мере поддерживает градиентную заливку объектов, можно попробовать отказаться от картинок, где это возможно.

В прошлой статье о ни слова не было о градиентной заливке — сегодня исправим этот недочет и поговорим о ней. Тем более, тема очень хорошая.

В целом, все современные браузеры, включая IE9, поддерживают заливку. Используются вендорные префиксы, так как спецификация официально пока не принята. Полное руководство по градиентам в CSS3 можно почитать , там градиенты css3 разобраны досконально.

В этой статье немного поговорим про браузеры и особенности градиентов в них:

Градиенты в браузерах webkit

Синтаксис свойства довольно прост – первое значение это тип заливки, второе и третье соответственно начальная и конечная позиции, четвертое и пятое – начальный и конечный цвета.

Firefox 3.6+

Использование градиентов в Firefox

Тут используется несколько другой синтаксис, тип заливки указывается в названии свойства, есть только позиция начала градиента и аналогично цвет начала и конца заливки.

Internet Explorer

Этот браузер давно и заслуженно пользуется «любовью» верстальщиков за свое крайне оригинальное поведение. Вот и в данном случае используется фильтр, текст которого будет прочтен только браузером IE. Тут не поддерживается угловая и радиальная заливка, только горизонтальная или вертикальная, с использованием двух значений – startColorstr и endColorstr . Это нужно учитывать при работе, иначе результат в IE будет выглядеть очень печально, а процент этого браузера все еще достаточно велик.

Что же нужно для обеспечения кроссбраузерности этого свойства для объекта? Добавляем ему в свойства четыре строчки кода:

Background: #999; /* для браузеров без css3 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); /* для IE */ background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* для webkit */ background: -moz-linear-gradient(top, #ccc, #000); /* для firefox 3.6+ */

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

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

Линейный градиент CSS - это переход одного цвета в другой. Благодаря этому можно создавать интересные эффекты на страницах сайта. Для создания градиента существует специальное свойство CSS linear-gradient совместно с background .

Синтаксис CSS linear-gradient

позиция, цвет1, цвет2,... );

• позиция - указывается направление в котором будет осуществляться переход. Может принимать следующие значения:
  • to top - переход снизу вверх (0deg)
  • to left - переход справа налево (270deg)
  • to bottom - переход сверху вниз (180deg)
  • to right - переход слева направо (90deg)
  • to top left - переход правого нижнего угла к левому верхнему
  • to top right - переход от левого нижнего угла к правому верхнему
  • to bottom left - переход от правого верхнего угла к левому нижнему
  • to bottom right - переход от левого верхнего угла к правому нижнему
  Помимо точных значений можно указать угол наклона в deg
• цвет1 - начальный цвет
• цвет2 - конечный цвет

Цвет можно задавать в формате RGB, конкретный цвет или в формате rgba (см. коды цветов html для сайта).

Примечание 1

Можно задавать переход нескольких цветов через запятую.

Как сделать нелинейное изменение градиента

Синтаксис linear-gradient также позволяет задавать ширину каждого цвета в процентном соотношении. Например

background : linear-gradient (позиция, цвет1 процент, цвет2 процент );

Примечание 2

Для браузеров нужно задавать это свойство с вендорными префиксами : -moz-,-webkit-, -ms-, -o

Примеры с линейными градиентами

Пример 1. Стандартные переходы цветов

Пример 2. Множественный линейный градиент

Сделаем множественный линейных градиент, т.е. цвет будет меняться из одного в другой несколько раз.

На странице преобразуется в следующее

Пример 3. Красивая кнопка на сайте с линейным градиентом

Сделаем множественный линейный градиент, т.е. цвет будет меняться из одного в другой несколько раз на примере html кнопки на сайте .

BUTTON

На странице преобразуется в следующее

Раньше я использовал для украшения страниц моего сайта подстилающий фон имеющий некоторый контраст по отношению к фону страницы. сейчас мне захотелось сделать страницы моего сайта более динамичными. Это позволяет сделать градиентный подстилающий фон. Но как его сделать?
К сожалению, из имеющихся рекомендаций одни не работали, другие работали только в отдельных браузерах, а другие были громоздки.
Ниже дано подробное описание. Думаю, при необходимости, Вы сможете это повторить и украсить свой сайт.

Равномерный фон можно легко задать с помощью атрибутовтега "body ", как в нем самом, так и в таблице стилей.

При использовании для форматировании страниц - таблиц, последние будут находиться над фоном. А внутри них фот может быть другим, поскольку его можно определить в свойствах таблицы (тега table и сопутствующих ему tbody , td , th и др). Этот прием расширяет оформительские возможности при создании страниц.

Но еще красивее когда фон имеет градиент.

Тогда при прокрутке длинных страниц сформированных с помощью таблиц имеющих размер немного меньше экрана, обрамление вокруг них будет менять цвет при прокрутке. Создается эффект динамичности страницы.

Старое и простое решение

Но похоже мы забыли простое и заложенное во все современные браузеры решение.

Существует хорошо всем известный тег -