Синий фон с градиентом сетки | Векторы общественного достояния

Обои на которых есть синий градиент

синий градиенты текстуры треугольники

1920 x 1080, 140 кБ

текстура синий градиент

1920 x 1200, 276 кБ

синий фон палитра синих красок текстуры красочно спокойно полосы градиент

1920 x 1440, 154 кБ

синий голубой текстуры градиент

1920 x 1080, 49 кБ

градиент синий оранжевый

1920 x 1200, 580 кБ

синий цвет градиент текстура

1920 x 1200, 285 кБ

градиент светло фиолетовый

1920 x 1200, 63 кБ

градиент дерево весна

1920 x 1080, 306 кБ

градиент свет темный фон

1920 x 1200, 335 кБ

синее небо облака самолет свет лучи синий

1920 x 1280, 173 кБ

синий украшения рождество новый год шары синие

1920 x 1316, 266 кБ

синяя краска клякса синий сгусток дым hd

1920 x 1200, 119 кБ

12345678910→ 84

Облако тегов

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

Прекрасные градиенты на CSS3

Дата публикации:2014-05-19

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

Код градиента:

background: -webkit-linear-gradient(#e74c3c, #f1c40f);
background: -o-linear-gradient(#e74c3c, #f1c40f);
background: -moz-linear-gradient(#e74c3c, #f1c40f);
background: linear-gradient(#e74c3c, #f1c40f);

Код градиента:

background: -webkit-linear-gradient(#01d9fe, #1558f3);
background: -o-linear-gradient(#01d9fe, #1558f3);
background: -moz-linear-gradient(#01d9fe, #1558f3);
background: linear-gradient(#01d9fe, #1558f3);

Код градиента:

background: -webkit-linear-gradient(#a4e786, #5ad427);
background: -o-linear-gradient(#a4e786, #5ad427);
background: -moz-linear-gradient(#a4e786, #5ad427);
background: linear-gradient(#a4e786, #5ad427);

Код градиента:

background: -webkit-linear-gradient(#3d68bf, #0d1423);
background: -o-linear-gradient(#3d68bf, #0d1423);
background: -moz-linear-gradient(#3d68bf, #0d1423);
background: linear-gradient(#3d68bf, #0d1423);

Код градиента:

background: -webkit-linear-gradient(#dadaef, #8e9198);
background: -o-linear-gradient(#dadaef, #8e9198);
background: -moz-linear-gradient(#dadaef, #8e9198);
background: linear-gradient(#dadaef, #8e9198);

Код градиента:

background: -webkit-linear-gradient(#fedd45, #eebb0a);
background: -o-linear-gradient(#fedd45, #eebb0a);
background: -moz-linear-gradient(#fedd45, #eebb0a);
background: linear-gradient(#fedd45, #eebb0a);

Код градиента:

background: -webkit-linear-gradient(#d8c786, #75662a);
background: -o-linear-gradient(#d8c786, #75662a);
background: -moz-linear-gradient(#d8c786, #75662a);
background: linear-gradient(#d8c786, #75662a);

Код градиента:

background: -webkit-linear-gradient(#c65e57, #873630);
background: -o-linear-gradient(#c65e57, #873630);
background: -moz-linear-gradient(#c65e57, #873630);
background: linear-gradient(#c65e57, #873630);

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

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

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

HTML5CSS3IE 9IE 10CrOpSaFx

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

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

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

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

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

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

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

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

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

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

HTML5CSS3IE 9IE 10CrOpSaFx

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

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

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

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

HTML5CSS3IE 9IE 10CrOpSaFx

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

Рис.

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

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

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

HTML5CSS3IE 9IE 10CrOpSaFx

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

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

Градиенты достаточно популярны среди веб-дизайнеров, но их добавление усложняется разными свойствами под каждый браузер и указанием множества цветов. Чтобы вам было проще создавать градиенты и вставлять их в код, рекомендую сайт www.colorzilla.com/gradient-editor с помощью которого легко настроить градиенты и сразу получить нужный код.

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

.

.

Добавить комментарий

Закрыть меню