Градиентный фон css: Линейный градиент | htmlbook.ru

Leave a Comment / Css / By /

Содержание

Использование CSS-градиентов — CSS | MDN

Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:

.plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);

  background:
      repeating-linear-gradient(90deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(0deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(-45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px),
      repeating-linear-gradient(45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px);
}

Линейные градиенты • Про CSS

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Спецификация: w3.org/TR/css3-images/#gradients.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.

linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

background: linear-gradient(orangered, gold);

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Угол или направление градиента

Направление можно задавать градусами или ключевыми словами.

В градусах: от 0 до 360, например 270deg.

Ключевыми словами:

to top = 0deg;

to right = 90deg;

to bottom = 180deg — значение по умолчанию;

to left = 270deg.

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.

Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:

Вот код самого первого квадрата, для примера:

.top-left {
   background: linear-gradient(to top left, purple, crimson, orangered, gold);
}

Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При

to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Управление положением цветов

Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в %, в em и значения, выходящие за границы элемента:

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

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

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

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

При отсутствии ограничений код может быть гораздо короче:

.light {
  background: peachpuff linear-gradient(90deg,
    rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%
  ) center center / 2em;
}

.dark {
  background: steelblue linear-gradient(
    rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
  ) center center / 100% 1em;
}

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

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0). Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.

repeating-linear-gradient

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

Примерный код:

background: repeating-linear-gradient(
  green, green .5em,
  transparent .5em, transparent 1em
);

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.

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

Ограничения

Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

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

Анимируем linear-gradient (background-image). | by Mostovoy Nikita

При верстке, периодически необходимо создать фон, который является градиентной заливкой (картинкой или чем-то другим, нужное подчеркнуть).
Такую задачу вполне легко сделать, используя background-image (linear-gradient в случае с градиентной заливкой).

Разберем анимирование background-image в случае работы с кнопками:

Кнопка с background-image: linear-gradient

Её CSS:

При взаимодействии с кнопкой очень желательно получать “отклик”, например, при наведении (hover) на нее.
Один из способов организовать такой отклик — изменить background, как это сделано в разбираемом примере.

Но у нас есть один недостаток — кнопка меняет свою заливку мгновенно, переход получается слишком резким.

Установить просто transition: background не получится, так как background-image является не анимируемым свойством (www.w3schools.com/cssref/pr_background-image.asp)

Что можно сделать в таком случае, чтобы решить задачу?

Самый простой и бронебойный способ — создаем какой-нибудь элемент рядом (или внутри) с нужным нам, скрываем его, а когда наводим курсор на кнопку — отображаем с анимированием прозрачности.

С одной стороны, мы можем вкладывать в button какой-нибудь span, но это не особо удобный и масштабируемый подход. Почему подход неудобный? Представьте, что с кнопкой всегда нужно вставлять рядом span, не забывать об этом, да и для других элементов подобный подход будет доставлять неудобства. Поэтому обратимся к псевдоэлементам. Алгоритм действий в таком случае будет следующим:

  1. Создаем кнопку
  2. Задаем кнопке position: relative. Это позволит нам растягивать псевдоэлемент по размеру кнопки. Подход практически аналогичный тому, который я описывал в статье “Селекторы на любой вкус” (https://medium.com/@xnim/%D0%BD%D0%B0%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B5-select-%D1%8B-%D0%BD%D0%B0-%D0%BB%D1%8E%D0%B1%D0%BE%D0%B9-%D0%B2%D0%BA%D1%83%D1%81-13c9a2a5bb36)
  3. Задаем кнопке:
    — размеры (top:0; left: 0; width: 100%; height: 100%),
    — нужный background-image (для состояния hover)
    — z-index: -1 (чтобы контент псевдоэлемента не скрывал наш текст
    — opacity: 0 + transition: opacity для анимаций
  4. Добавляем :hover состояние для кнопки, по которому наш псевдоэлемент будет проявляться.

Полученный результат можно посмотреть на СodePen:

Итоговый CSS:

На CodePen также можно поэкспериментировать с временем анимации 🙂

P.S. Я веду в телеграме небольшой канал, посвященный фронтенд-разработке. Ежедневно публикую тот или иной факт или механику из мира JS. https://t.me/FrontEndReicipes

10 бесплатных генераторов фона / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

В веб-дизайне при создании пользовательских интерфейсов трудно обойтись без иконок и текстур. Однако если в дизайне использовались элементы, созданные кем-то другим, то это сделает его неоригинальным. Фон является одним из самых главных элементов в любом интерфейсе, поэтому его уникальности нужно уделить особое внимание. В последнее время появилось много удобных инструментов для создания бесшовных текстур, которые можно использовать для создания фоновых изображений. Многие из этих инструментов просты в использовании и позволяют добиться потрясающих результатов даже новичкам. Порой достаточно одного клика мыши для того, чтобы получить текстуру профессионального качества. С помощью специализированного софта можно создавать фоны в любом стиле и затем использовать их в своих проектах. FreelanceToday предлагает вашему вниманию 10 бесплатных генераторов случайных фонов.

 

TRIANGLIFY GENERATOR



 

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

 

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

 

С помощью генератора можно выбрать одну из 27 разработанных профессиональными дизайнерами цветовых схем, но если нужно сделать что-то свое, то всегда можно сгенерировать собственную схему. Полученный фон можно сохранить в форматах PNG и SVG.

 

TRIANGLIFY BACKGROUND GENERATOR

 


Инструмент Trianglify Background Generator использует тот же триангуляционный JS-плагин, что и предыдущий генератор. Скрипт, лежащий в основе программы, использует несколько палитр из COLOURlovers и ColorBrewer и позволяет использовать дополнительные настройки, такие, как выбор типа градиента. Также в инструменте есть два новых параметра в меню: Bleed и Cell Padding, однако данный функционал не может регулировать уровень дисперсии, так что пользователю придется выбрать одну их предустановленных палитр.

 

GEOPATTERN

 


Бесшовные текстуры можно создавать разными способами, в том числе и с помощью слов. Именно так работает очень необычный инструмент, который называется Geopattern. Пользователь может написать слово в специальном поле и программа сама сгенерирует текстуру. Минимум действий, максимум результата! Можно написать просто одну или две буквы и получить уникальную текстуру, которую можно использовать в качестве фона. Инструмент работает на основе простого скрипта, генерирующего бесшовные геометрические паттерны, состоящие из 16 различных фигур. Geopattern использует неограниченное количество цветов, поэтому выдает совершенно непредсказуемые результаты. Все зависит от количества букв в слове, так что пользователю придется поэкспериментировать, если он хочет подобрать уникальный узор. Результат можно сохранить в формате PNG.

 

DELAUNAY TRIANGLE PATTERN MAKER

 


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

 

FLAT SURFACE SHADER

 


На первый взгляд Flat Surface Shader ничем не отличается от предыдущего генератора случайных фонов. Однако это не так, сервис использует более рандомный и динамичный подход к триангуляции Делоне. Генерация полигонов происходит несколько хаотично, так как источники света в этом инструменте находятся в постоянном движении. В сущности, пользователь никак не может повлиять на конечный результат, но может подобрать цветовую схему и нужный размер полигонов. Фоновое изображение можно сохранить как в растровом формате PNG, так и в векторном формате SVG.

 

WATERPIPE.JS

 


Полигональные фоны сегодня в тренде, поэтому неудивительно, что подобных генераторов становится все больше. Но не везде такие паттерны выглядят уместно, порой нужно что-то другое. В этом случае можно использовать инструмент Waterpipe.js. Этот генератор позволяет получить изображение с эффектом дыма. Пользователь может скачать один из предустановленных вариантов или создать собственный фон, настроив параметры вручную. Можно выбрать цвет фона, также есть возможность выбора градиента.  Так как клубы дыма должны выглядеть, как трехмерные объекты, добиться нужного эффекта можно с помощью стартового и финишного градиентов. Сочетание светлого и темного оттенков создает реалистичный эффект дыма.

 

COLORFUL CSS GRADIENT BACKGROUND GENERATOR

 


Инструмент Colorful CSS Gradient Background Generator наверняка пригодится дизайнерам, создающим сайты и приложения, особенно тем, кто работает с iOS. Это веб-сервис позволяет создавать красивые градиентные фоны буквально на лету. Главное достоинство инструмента заключается в том, что он автоматически генерирует код CSS для создаваемых градиентов. Есть и небольшой минус, так как на выходе получается только код, а не картинка, так что фоновое изображение можно использовать только для интернет-проектов. Если же градиентный фон нужно получить в растровом формате, придется использовать стороннее программное обеспечение. Для этой цели неплохо подходит Phantom.JS, инструмент требует определенных навыков кодирования, но достаточно гибок и прост для того, чтобы справиться с поставленной задачей.

 

UNIQUE GRADIENT GENERATOR

 


С помощью инструмента Unique Gradient Generator можно создавать фоны из любого растрового изображения. Размер изображения практически не имеет значения, генератору достаточно даже картинки размером 7х3 пикселя. Инструмент размывает исходник до полной неузнаваемости, подобно эффекту Gaussian Blur в Adobe Photoshop. Чтобы добиться нужного результата, пользователю придется потратить какое-то время на подбор исходного изображения, иначе цветовая схема будет выглядеть несколько грязноватой, если в исходнике будет много темных оттенков.

 

Генератор имеет библиотеку из 33-х готовых к использованию изображений, но можно загрузить и собственные файлы. Готовый фон можно скачать в растровом формате или как код CSS.

 

MATERIAL DESIGN BACKGROUND GENERATOR

 

Инструмент Material Design Background Generator, это сервис, который находится на пике популярности, ведь с помощью данного инструмента можно без особых усилий генерировать фоновые изображения в стиле Material Design, созданном дизайнерами и веб-разработчиками компании Google. Так как это рандомный генератор, некоторые результаты могут выглядеть довольно странно. Так что пользователю придется потратить какое-то время, чтобы получить подходящее изображение. Такова плата за случайность, но зато в результате можно создать действительно уникальный фон для своего проекта.

 

K’S WATERCOLOR BACKGROUND IMAGE GENERATOR

 

Инструмент K’s Watercolor Background Image Generator создает бесшовные текстуры с эффектом акварели. Генератор создает изображение с помощью полупрозрачных кругов, которые, сливаясь, имитируют акварельные пятна. На настоящую акварель не очень похоже, но фоны получаются достаточно интересными. Чтобы создать текстуру, пользователю нужно указать количество кругов и их размер, а также выбрать цветовую схему. Чтобы создать более сложную текстуру, можно использовать несколько слоев, которые повлияют на конечный результат.

Xamarin.Forms Кисти: линейные градиенты — Xamarin

  • Чтение занимает 2 мин

В этой статье

Скачать пример Download the sample

LinearGradientBrushКласс является производным от GradientBrush класса и закрашивает область линейным градиентом, который смешивает два или более цвета вдоль линии, известной как ось градиента.The LinearGradientBrush class derives from the GradientBrush class, and paints an area with a linear gradient, which blends two or more colors along a line known as the gradient axis. GradientStop объекты используются для указания цветов в градиенте и их позиций.GradientStop objects are used to specify the colors in the gradient and their positions. Дополнительные сведения об GradientStop объектах см. в разделе Xamarin.Forms кисти: градиенты.For more information about GradientStop objects, see Xamarin.Forms Brushes: Gradients.

Класс LinearGradientBrush определяет следующие свойства:The LinearGradientBrush class defines the following properties:

  • StartPointТип Point , который представляет начальные двухмерные координаты линейного градиента.StartPoint, of type Point, which represents the starting two-dimensional coordinates of the linear gradient. Значение этого свойства по умолчанию равно (0, 0).The default value of this property is (0,0).
  • EndPointТип Point , который представляет завершающие двухмерные координаты линейного градиента.EndPoint, of type Point, which represents the ending two-dimensional coordinates of the linear gradient. Значение этого свойства по умолчанию равно (1, 1).The default value of this property is (1,1).

Эти свойства поддерживаются объектами BindableProperty, то есть эти свойства можно указывать в качестве целевых для привязки и стилизации данных.These properties are backed by BindableProperty objects, which means that they can be targets of data bindings, and styled.

LinearGradientBrushКласс также является IsEmpty методом, возвращающим объект bool , который представляет, назначена ли кисть какие-либо GradientStop объекты.The LinearGradientBrush class also as an IsEmpty method that returns a bool that represents whether the brush has been assigned any GradientStop objects.

Примечание

Линейные градиенты также можно создавать с помощью linear-gradient() функции CSS.Linear gradients can also be created with the linear-gradient() CSS function.

Создание LinearGradientBrushCreate a LinearGradientBrush

Ограничители градиента кисти линейного градиента располагаются вдоль оси градиента.A linear gradient brush’s gradient stops are positioned along the gradient axis. Ориентацию и размер оси градиента можно изменить с помощью StartPoint свойств кисти и EndPoint .The orientation and size of the gradient axis can be changed using the brush’s StartPoint and EndPoint properties. Управляя этими свойствами, можно создавать горизонтальные, вертикальные и диагональные градиенты, отменять направление градиента, уплотнение распределения градиента и т. д.By manipulating these properties, you can create horizontal, vertical, and diagonal gradients, reverse the gradient direction, condense the gradient spread, and more.

StartPointСвойства и EndPoint задаются относительно закрашиваемой области.The StartPoint and EndPoint properties are relative to the area being painted. (0, 0) представляет верхний левый угол закрашиваемой области, а (1, 1) — нижний правый угол закрашиваемой области.(0,0) represents the top-left corner of the area being painted, and (1,1) represents the bottom-right corner of the area being painted. На следующей диаграмме показана ось градиента для кисти по диагонали линейного градиента.The following diagram shows the gradient axis for a diagonal linear gradient brush:

На этой схеме пунктирная линия показывает ось градиента, которая выделяет путь интерполяции градиента от начальной точки к конечной точке.In this diagram, the dashed line shows the gradient axis, which highlights the interpolation path of the gradient from the start point to the end point.

Создание горизонтального линейного градиентаCreate a horizontal linear gradient

Чтобы создать горизонтальный линейный градиент, создайте LinearGradientBrush объект и установите его StartPoint в значение (0, 0) и задайте значение EndPoint (1, 0).To create a horizontal linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (1,0). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

В следующем примере XAML показан горизонтальный LinearGradientBrush , заданный как элемент Background Frame :The following XAML example shows a horizontal LinearGradientBrush that’s set as the Background of a Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame закрашивается с LinearGradientBrush , который выполняет интерполяцию от желтой к зеленой по горизонтали:In this example, the background of the Frame is painted with a LinearGradientBrush that interpolates from yellow to green horizontally:

Создание вертикального линейного градиентаCreate a vertical linear gradient

Чтобы создать Вертикальный линейный градиент, создайте LinearGradientBrush объект и задайте для его свойства StartPoint значение (0, 0) и значение EndPoint (0, 1).To create a vertical linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (0,1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

В следующем примере XAML показан вертикальный LinearGradientBrush , заданный в качестве Background объекта Frame :The following XAML example shows a vertical LinearGradientBrush that’s set as the Background of a Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0) -->    
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame закрашивается с LinearGradientBrush , который выполняет интерполяцию от желтого к зеленому по вертикали:In this example, the background of the Frame is painted with a LinearGradientBrush that interpolates from yellow to green vertically:

Создание диагонального линейного градиентаCreate a diagonal linear gradient

Чтобы создать диагональный линейный градиент, создайте LinearGradientBrush объект и задайте для него значение StartPoint (0, 0), а в качестве значения EndPoint (1, 1).To create a diagonal linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (1,1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

В следующем примере XAML показана диагональная LinearGradientBrush , которая задается в качестве значения Background Frame :The following XAML example shows a diagonal LinearGradientBrush that’s set as the Background of a Frame:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- StartPoint defaults to (0,0)      
             Endpoint defaults to (1,1) -->
        <LinearGradientBrush>
            <GradientStop Color="Yellow"
                          Offset="0.1" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame закрашивается с LinearGradientBrush , который выполняет интерполяцию от желтого к зеленому:In this example, the background of the Frame is painted with a LinearGradientBrush that interpolates from yellow to green diagonally:

gradient » Скрипты для сайтов

1 848 Codepen

Паттерн из треугольников с градиентом

Генерируемый на js паттерн из треугольников с градиентом

4 718 Slider / Codepen

Слайдер с размытыми градиентными не активными слайдами

Для эффекта размытия в местах сопряжения слайдов используется SVG c фильтром размытия

1 786 Codepen

Колебающиеся градиентные 3d трубки

Объёмные трубки с переливающимся градиентом с определенной амплитудой колыхаются в пространстве. По клику меняется градиент, а на движение курсора реагирует амплитуда трубок

1 477 Codepen

Кристаллический параллакс

Реализованный на канвасе параллакс эффект из градиентных полос. При клике случайным образом градиент меняется.

9 534 Codepen

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

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

2 678 Скрипты / Text

Градиентный текст

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

1 908 Скрипты / Buttons

Градиентные CSS3 кнопки

Очередной стильный вариант градиентных CSS3 кнопочек.

1 706 Скрипты / Buttons

Кнопки с градиентом на CSS3

Очередная порция CSS3 кнопок с готовым набором градиентов разных цветов.

1 259 Полезно

CSS генератор градиентов от ColorZilla

Полезный ресурс для генерирования CSS градиентов подобных тем, какие используются в Photoshop. Ссылка на ресурс: http://www.colorzilla.com/gradient-editor/  

4 427 Скрипты / Buttons

Градиентные CSS3 кнопки

В уроке речь пойдет о создании градиентных CSS3 кнопок, которые могут быть применены к любому html элементу, например: div, span, a, input, p, button и т.д.

Background для бордюров

Варианты оформления бордюров с помощью css-свойства border-image

HTML:

HTML код во всех примерах одинаковый

<div></div>

<div></div>

Линейный градиентный фон:

CSS:

.img-border { border: 20px solid; border-image: linear-gradient(#337AB7, #BFE2FF) 1; }

.img-border {

    border: 20px solid;

    border-image: linear-gradient(#337AB7, #BFE2FF) 1;

}

Повторяющийся линейный градиентный фон:

CSS:

.img-border { border: 20px solid; border-image: repeating-linear-gradient(45deg, #BFE2FF, #337AB7 20px) 45; }

.img-border {

    border: 20px solid;

    border-image: repeating-linear-gradient(45deg, #BFE2FF, #337AB7 20px) 45;

}

Радиальный градиентный фон:

CSS:

.img-border { border: 20px solid; border-image: radial-gradient(#337AB7, #BFE2FF) 1; }

.img-border {

    border: 20px solid;

    border-image: radial-gradient(#337AB7, #BFE2FF) 1;

}

Повторяющийся радиальный градиентный фон:

CSS:

.img-border { border: 20px solid; border-image: repeating-radial-gradient(#fff, #fff 5px, #BFE2FF 5px, #337AB7 10px) 20; }

.img-border {

    border: 20px solid;

    border-image: repeating-radial-gradient(#fff, #fff 5px, #BFE2FF 5px, #337AB7 10px) 20;

}

Графический фон:

CSS:

.img-border { border: 20px solid; border-image: url(«/demo/site-bg/f-95.jpg») 60 30; }

.img-border {

    border: 20px solid;

    border-image: url(«/demo/site-bg/f-95.jpg») 60 30;

}

Конический градиентный фон:

Поддерживается не всеми браузерами, например мозиллой

CSS:

.img-border { border: 20px solid; border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1; }

.img-border {

    border: 20px solid;

    border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;

}

— CSS: каскадные таблицы стилей

Тип данных CSS — это особый тип , который состоит из постепенного перехода между двумя или более цветами.

Градиент CSS не имеет внутренних размеров; то есть он не имеет ни естественного, ни предпочтительного размера, ни предпочтительного соотношения. Его конкретный размер будет соответствовать размеру элемента, к которому он применяется.

Тип данных <градиент> определяется одним из типов функций, перечисленных ниже.

Линейный градиент

Линейные градиенты последовательно переходят цвета вдоль воображаемой линии. Они генерируются с помощью функции linear-gradient () .

Радиальный уклон

Радиальные градиенты переходят цвета постепенно от центральной точки (исходной точки). Они генерируются с помощью функции radial-gradient () .

Конический градиент

Конические градиенты постепенно переходят цвета по кругу.Они генерируются с помощью функции conic-gradient () .

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

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

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

  
 Линейный градиент 

  
  div {
  ширина: 240 пикселей;
  высота: 80 пикселей;
}  
 .linear-gradient {
  фон: linear-gradient (вправо,
      красный, оранжевый, желтый, зеленый, синий, индиго, фиолетовый);
}

Пример радиального градиента

Простой радиальный градиент.

  
 Радиальный градиент 

  
  div {
  ширина: 240 пикселей;
  высота: 80 пикселей;
}  
  .radial-gradient {
  фон: радиально-градиентный (красный, желтый, rgb (30, 144, 255));
}

Примеры повторяющегося градиента

Примеры простого повторяющегося линейного и радиального градиента.

  
 Повторяющийся линейный градиент 




 Повторяющийся радиальный градиент 

  
  div {
  ширина: 240 пикселей;
  высота: 80 пикселей;
}  
  .linear-repeat {
  фон: повторяющийся линейный градиент (вверху слева,
      светло-розовый, светло-розовый 5 пикселей, белый 5 пикселей, белый 10 пикселей);
}

.radial-repeat {
  фон: повторяющийся радиальный градиент (синий порошок, синий порошок 8 пикселей, белый 8 пикселей, белый 16 пикселей);
}

Пример конического градиента

Пример простого конического градиента.Обратите внимание, что это пока не поддерживается широко в браузерах.

  
 Конический градиент 

  
  div {
  ширина: 200 пикселей;
  высота: 200 пикселей;
}  
  .conic-gradient {
  фон: конический градиент (светло-розовый, белый, пудрово-голубой);
}

таблицы BCD загружаются только в браузере

Как добавить красочные градиентные фоны в Squarespace

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

Что такое градиент? Градиент в веб-дизайне — это область, заполненная цветом, где один цвет естественным образом перетекает в другой.

Например, у этого блока градиентный фон.

Градиенты в веб-дизайне

Вот несколько примеров градиентов, которые вы, возможно, видели в Интернете.

Асана

Точка доступа

Полоса

Так как же добавить градиенты на свой сайт Squarespace?

Теперь, когда вы увидели несколько способов, которыми крупные компании используют градиенты на своих веб-сайтах, давайте рассмотрим, как вы можете добавлять градиенты на свой веб-сайт!

Squarespace 7.0

Эта статья была написана до выхода Squarespace 7.1. Следующие инструкции в основном относятся к версии 7.0. Для инструкций 7.1 прокрутите немного ниже.

Примечание: В рамках этого руководства я собираюсь специально поговорить о добавлении градиентов на страницы индекса Squarespace.

Примечание 2: Я использую шаблон Brine, и это то, на чем основано это руководство. Методы в этом руководстве должны работать во всех шаблонах Squarespace, но, пожалуйста, дайте мне знать, если вы столкнетесь с шаблоном, в котором он не работает.

Шаг 1. Выбор раздела указателя

Прежде чем вы сможете добавить какой-либо код CSS, вы должны решить, какой раздел индекса получит красивый фоновый градиент.

Для этого откройте настройки и перейдите к списку страниц на своем веб-сайте. Под страницей указателя вы найдете список разделов указателя.

Например, я использую тонкий градиент во втором разделе указателя на моей домашней странице. Итак, в своих настройках я вижу, что я назвал второй раздел индекса на моей домашней странице «Get Unstuck.«

Шаг 2. Преобразование заголовка раздела указателя в идентификатор раздела

Чтобы добавить CSS в раздел индекса «Get Unstuck», я должен преобразовать заголовок страницы в идентификатор раздела, который я могу использовать в своем коде CSS.

Чтобы преобразовать заголовок страницы раздела указателя в идентификатор раздела:

  • сделать заголовок страницы в нижнем регистре
  • заменить любые пробелы в заголовке дефисами
  • добавить символ # в начало раздела ID

«Get Unstuck» превращается в «# get-unstuck».

«Заголовок вашей страницы здесь» становится «# your-page-title-here».

Кроме того, вы можете использовать Squarespace ID Finder, чтобы получить эту информацию, не выполняя преобразование самостоятельно.

Шаг 3. Добавьте код CSS

Получив идентификатор раздела, вы можете добавить код CSS. Я рекомендую поместить этот код в Дизайн> Пользовательский CSS.

Вот пример кода. Вы найдете множество кодов копирования / вставки для использования на вашем собственном веб-сайте в разделе «Ресурсы» ниже.

  # get-unstuck {
  цвет фона: # 67cae1;
  фоновое изображение: линейный градиент (225deg, # 67cae1, # 7bd5d7);
}

Вот как выглядит этот градиент.

Этот код CSS состоит из 7 частей, поэтому давайте разберем его немного, чтобы вы знали, что происходит.

  1. Символ # используется, чтобы сообщить браузеру, что вы нацеливаетесь на идентификатор на своей странице.
  2. После того, как вы напишете символ # , напишите имя вашего page-section-title (не забудьте преобразовать заголовок страницы в нижний регистр и заменить пробелы дефисами).Это сообщит браузеру, в какой раздел добавить градиентный фон.
  3. Добавьте цвет фона . Некоторые старые браузеры не могут отображать фоновые градиенты и вместо этого будут отображать этот сплошной цвет фона.
  4. Присвойте разделу страницы background-image со значением linear-gradient .
  5. Внутри значения linear-gradient выберите градус или угол градиента. Мне нравится красивый угловой градиент, поэтому я выбрал 225deg .Но вы можете выбрать другой угол (между 0deg и 360deg ) или полностью удалить этот раздел, чтобы получить угол по умолчанию.
  6. Внутри значения linear-gradient запишите Color1 .
  7. Внутри значения linear-gradient запишите Color2 . Градиент будет течь от Color1 до Color2 .

Это пример основного цветового градиента, но вы можете сделать его намного сложнее, если захотите.

Площадь 7.1

Squarespace 7.1 избавляется от индексных страниц в пользу разделов. Здесь я расскажу, как найти селектор раздела, который вам понадобится для использования кода из этой статьи.

Шаг 1. Выберите раздел

Я настоятельно рекомендую использовать мой инструмент Squarespace ID Finder, который поможет вам скопировать / вставить нужный вам код. Вы можете установить инструмент как букмарклет, расширение Chrome или надстройку Firefox.

Как только вы окажетесь на странице, на которую хотите добавить градиентный фон, включите Squarespace ID Finder, чтобы найти селектор раздела.Затем вы можете щелкнуть селектор раздела, чтобы скопировать / вставить его в свой код.

Шаг 2. Добавьте код CSS

Когда у вас есть селектор раздела, вы можете добавить код CSS. Я рекомендую поместить этот код в Дизайн> Пользовательский CSS.

Вот пример кода. Вы найдете множество кодов копирования / вставки для использования на вашем собственном веб-сайте в разделе «Ресурсы» ниже.

  section [data-section-id = "5e604fb74cbc0979d6da3c79"] .section-background {
  цвет фона: # 67cae1;
  фоновое изображение: линейный градиент (225deg, # 67cae1, # 7bd5d7);
}

Вот как выглядит этот градиент.

Ресурсы для градиентного кода CSS

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

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

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

uiGradients предлагает множество различных градиентов на выбор, и это отличный способ начать работу с градиентным фоном.

После выбора градиента нажмите кнопку «Код CSS» в правом верхнем углу, чтобы получить доступ к коду, который можно скопировать / вставить в Squarespace.

После того, как вы освоитесь с кодом для добавления градиентов CSS, ознакомьтесь с этими дополнительными ресурсами для тщательно подобранных градиентов:

Бонус! Анимированные градиентные фоны

Этот блок имеет анимированный градиентный фон.

Чтобы получить анимированный градиентный фон, я рекомендую использовать этот CSS Gradient Animator.Выберите, какие цвета вы хотите использовать в своем градиенте, а затем скопируйте / вставьте предоставленный для вас код.

Градиентный фон для электронной почты

Зачем использовать сплошной фон, если вы можете добавить блики градиентов в свое электронное письмо в формате HTML.

Чрезвычайно легко реализовать, и я объясню, как это сделать, а также покажу, как сделать так, чтобы он плавно переходил в сплошной фон, если почтовый клиент не поддерживает градиент CSS3.

CSS3 Градиент

С градиентом CSS3 для добавления фона градиента требуется всего лишь строка CSS.Нам больше не нужно создавать градиентные изображения и называть их в CSS как фоновое изображение. На один запрос к серверу меньше. Вы можете создать линейный, а также радиальный градиент с двумя или более цветами. Большинство основных браузеров поддерживают эту спецификацию, и у нас есть префикс производителя для некоторых браузеров.

Как насчет поддержки в почтовых клиентах. Все ли почтовые клиенты поддерживают градиент CSS3? Нет, не все почтовые клиенты поддерживают градиент CSS3, но мы всегда можем вернуть его к сплошному фону. Тот факт, что некоторые почтовые клиенты (в основном более старые версии Outlook) не поддерживают эту спецификацию, не означает, что мы не должны отправлять электронную почту с красивым градиентным фоном пользователям, которые проверяют свою электронную почту в современных клиентах.

Я не собираюсь вдаваться в подробности CSS3 Gradient. В Интернете есть масса ресурсов, на которых вы можете учиться. Если вы используете Google для генератора градиентов CSS, вы найдете несколько веб-сайтов, которые сгенерируют его для вас. Объявление градиента CSS, которое мы будем использовать для нашего шаблона, показано ниже:

Это создаст диагональный (45 градусов) фон с линейным градиентом от цвета # 8e36e0 до цвета цвета # 164b92 .

Использование градиента CSS3 в электронном письме

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

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

Давайте посмотрим на ключевые строки кода электронной почты:

  • Строка 1
    Эта таблица будет основой нашего электронного шаблона. Полная ширина, белый фон, без интервала и заполнения ячеек.
  • Строка 3
    Это ячейка таблицы, в которую мы собираемся добавить наш градиент CSS3 как встроенный стиль.Здесь важно отметить атрибут bgcolor со значением # 164c92 . Также обратите внимание, как это отображается перед встроенным стилем, имеющим стиль градиента. Порядок размещения не имеет значения для почтового клиента, который не поддерживает градиент CSS3, но в других почтовых клиентах, если атрибут bgcolor идет после встроенного стиля, фон градиента будет заменен сплошным цветом, назначенным атрибуту bgcolor .
    Вот как мы устанавливаем возврат к сплошному фону для почтовых клиентов, которые не поддерживают градиент CSS3.
  • Строка 6 — Строка 11
    Эта строка предназначена для работы градиентного фона для Outlook с использованием условного CSS, аналогичного тому, который мы используем для таргетинга IE7, IE8 или IE lt 9. Но с помощью электронной почты мы проверяем MSO для таргетинга. версии Outlooks. Обратите внимание на mso-width-percent: 1000 , это сделает прямоугольник на 100% с. fillcolor = ”# 8e36e0 ″ — это начальный цвет, а color2 =” # 164c92 ″ — конечный цвет градиента.
  • Строка 13 — Строка 19
    Это будет таблица, в которой мы будем кодировать CTA. Все, что мы хотим заключить в градиентную ячейку, должно быть здесь.
  • Строка 30 — Строка 34
    Сюда помещаются другие копии электронной почты за пределами градиентной ячейки.

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

Лучшие генераторы градиентов CSS для дизайнеров

Мы рассмотрим десять лучших генераторов градиентов CSS, которые вы можете использовать для создания различных стилей градиента (и напрямую получать вывод CSS!).Кодировать градиент вручную — неинтересно (особенно после того, как вы преодолеете простой двухцветный градиент), поэтому эти инструменты необходимы в вашей папке закладок.

Одним из самых модных элементов дизайна веб-сайтов является использование градиентного фона или цветного наложения. Двухцветный линейный градиент — самый популярный вариант этого тренда. И хотя градиенты могут выглядеть причудливыми и сложными, на самом деле их довольно легко создать и развернуть… если вы используете правильный инструмент!

CoolHue — это впечатляющая коллекция готовых комбинаций градиентов.От розового и оранжевого до синего и зеленого — от градиентов с поразительным контрастом до мягких изменений.

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

И одним щелчком мыши вы можете скопировать CSS. (Вот и все. Серьезно!) Если вы хотите скачать, каждый файл также доступен в формате PNG.

CSS Gradient имеет множество переключателей и числовых параметров, так что вы можете выбрать до трех цветов и создать собственный градиент CSS.

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

Одной из лучших особенностей этого инструмента может быть высокий уровень контроля над каждой деталью создаваемого градиента. Код создается ниже на экране, чтобы вы могли видеть все это во время работы.

Каждый градиент включает в себя копирование CSS или загружаемого файла jpg одним щелчком мыши.

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

UI Gradients включает множество готовых вариантов градиента. Просмотрите коллекцию или выполните поиск по цвету. На выбор предлагается от двух до трех цветов с линейным рисунком.

Не нравится то, что вы видите? Пользователи также могут добавить детали градиента в файл gradient.json в репозитории проекта и отправить запрос на вытягивание.

CSSmatic — это простой генератор градиентов с легко нажимаемыми кнопками, которые помогут вам настроить выбор цвета, остановки и поворота. Пользователи могут создавать линейные или радиальные градиенты.

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

Ultimate CSS Gradient Generator очень похож на CSSmatic, и экранные функции аналогичны, но у него есть и другие функции.

Инструмент включает в себя диаграмму совместимости браузера, несколько цветовых форматов, возможность импорта градиентного изображения и включает более 135 пользовательских предустановок. Пользователи также могут импортировать градиенты из существующего CSS и вносить изменения. (Это может быть отличным вариантом для настройки градиента на вашем сайте, который просто выглядит не так, как вы хотите.)

Каждый градиент CSS поставляется с уникальным URL-адресом, которым вы можете поделиться с членами команды, когда вы работаете с вариантами цвета.

ColorSpace — еще один полноэкранный инструмент для создания градиентов с очень визуальным веб-сайтом.

Легко использовать. Выберите ориентацию (линейную или радиальную) для градиента, добавьте два цвета с помощью кнопок и палитры цветов, затем нажмите «Создать».

Пока этот инструмент все еще находится в стадии бета-тестирования, он работает хорошо. И код находится прямо на экране, чтобы вы могли копировать его в проекты. Все, что вам нужно, от визуального градиента до CSS, находится прямо на экране. А если вам не нравится выбранный вами цвет, его легко изменить и снова нажать «Создать».

CSS Gradient Generator создает код с использованием простого графического пользовательского интерфейса.CSS будет работать во всех браузерах, поддерживающих CSS3.

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

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

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

CSS-Gradient — это универсальный генератор и учебник по градиентам.

Инструмент включает в себя поля для выбора двух вариантов цвета: шестнадцатеричный или RGB: направленный, линейный или радиальный. (Так что этот инструмент, вероятно, лучше всего, если вы знаете, какие цвета вы хотите использовать.)

Скопируйте код и примените его к своему дизайну.

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

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

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

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

Заключение

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

Затем все, что вам нужно сделать, это скопировать код и вставить его в свой файл CSS, чтобы начать работу.Генератор градиентов CSS — это быстрый и простой способ создать градиент веб-сайта, который вам понравится и который прост в использовании. Мы надеемся, что один из вариантов в этом списке вам подходит.

Как создать градиентную фоновую анимацию в Divi (2 способа)

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

В этом уроке мы покажем вам два способа создания градиентной фоновой анимации в Divi. Первый объединяет настраиваемый фрагмент CSS, который анимирует цвета градиента, выбранные во встроенных настройках Divi. Второй способ анимирует несколько модулей с радиальным градиентом фона на фоне строки или раздела.Настройка на самом деле довольно проста для такого красивого результата.

Приступим!

Подглядывание

Вот краткий обзор обоих способов создания градиентной фоновой анимации в Divi.

# 1 Анимация градиентного фона с помощью фрагмента CSS и опции фона Divi

# 2 Анимация градиентного фона с использованием модулей Divi с радиальным градиентным фоном

Скачать макет БЕСПЛАТНО

Чтобы ознакомиться с дизайнами из этого урока, вам сначала нужно загрузить его, нажав кнопку ниже.Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл JSON в Divi Builder.

Давай перейдем к руководству, ладно?

Что нужно для начала работы

Для начала вам необходимо сделать следующее:

  1. Если вы еще этого не сделали, установите и активируйте тему Divi.
  2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
  3. Выберите вариант «Строить с нуля».

После этого у вас будет чистый холст, чтобы начать проектировать в Divi.

Часть 1. Создание градиентной фоновой анимации с помощью фрагмента CSS и опции фона Divi

Для начала добавьте строку из одного столбца в раздел по умолчанию в Divi Builder.

Настройки раздела

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

Затем обновите заполнение следующим образом:

  • Padding: 0px вверху, 0px внизу

Настройки строк и столбцов

Настройки столбца

Откройте настройки строки, а затем обновите заполнение столбца следующим образом:

Затем добавьте следующий настраиваемый CSS к основному элементу столбца:

 высота: 40vw;

Настройки строки
Градиентный фон

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

Обновите настройки строки следующим образом:

  • Цвет градиентного фона слева: rgba (12,113,195,0,8)
  • Градиент фона справа Цвет: rgba (131,0,233,0,8)
  • Тип градиента: линейный
  • Направление градиента: 45 градусов

Размер

Затем обновите размер строки следующим образом:

  • Ширина: 100%
  • Макс.ширина: 100%

Пользовательский класс CSS

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

Перейдите на вкладку «Дополнительно» и добавьте следующий класс CSS:

  • Класс CSS: animate-gradient

Добавить модуль кода

После добавления класса CSS в строку добавьте в строку модуль кода.

Вставить CSS в модуль кода

Затем вставьте следующий код CSS в поле «Код настроек модуля кода»:

.animate-gradient {
размер фона: 400% 400%;
анимация: градиент 5s, легкость бесконечна;
}

@keyframes gradient {
0% {
фоновая позиция: 0% 50%;
}
50% {
фоновая позиция: 100% 50%;
}
100% {
фоновая позиция: 0% 50%;
}
}

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

Результат

Вот результат.Градиентный фон увеличен на 400% от исходного размера и анимируется перемещением влево и вправо.

Добавить призыв к действию

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

Настройки призыва к действию
Содержимое

Обновите содержимое следующим образом:

  • Добавить заголовок
  • Добавить текст кнопки
  • Добавить основной текст
  • URL ссылки на кнопку: #
  • Используйте цвет фона: NO

Типовой проект

Перейдите на вкладку дизайна и обновите следующее:

  • Шрифт заголовка: Kaushan Script
  • Размер текста заголовка: 4vw (рабочий стол), 30px (телефон)
  • Высота строки заголовка: 1.4em
  • Шрифт текста: Roboto
  • Размер текста кнопки: 16 пикселей
  • Цвет текста кнопки: # 555555
  • Фон кнопки: #ffffff
  • Ширина границы кнопки: 0px
  • Радиус границы кнопки: 30 пикселей
  • Расстояние между буквами кнопки: 3 пикселя
  • Шрифт кнопок: Roboto Condensed
  • Толщина шрифта кнопок: полужирный

Результат

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

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

Если вы знакомы с CSS, вы можете настроить скорость и направление анимации, изменив значения свойств анимации.

Часть 2: Создание анимации градиентного фона с использованием модулей Divi с радиальным градиентным фоном

Второй способ создания градиентной фоновой анимации в Divi включает анимацию одного (или нескольких) модулей, каждый с радиальным градиентным фоном.Этот метод проектирования дает вам полный контроль над анимацией каждого модуля без необходимости полагаться на внешний пользовательский CSS. Кроме того, это открывает двери для безграничных возможностей анимации.

Вот как это сделать.

Дубликат раздела

Для начала давайте продублируем только что созданный раздел, чтобы перейти к следующему дизайну. Чтобы упростить задачу, переключите режим просмотра каркаса. Затем щелкните значок дубликата в разделе. В новом разделе дубликатов убедитесь, что вы удалили дублирующийся модуль кода, поскольку для этого нам не понадобится специальный CSS.

Обновить настройки строки

После того, как раздел был продублирован и дополнительный модуль кода удален, откройте настройки строки и измените тип градиента фона:

Затем перейдите на вкладку «Дополнительно» и удалите класс CSS. Нам это не нужно.

Затем обновите параметры видимости следующим образом:

  • Горизонтальный перелив: скрытый
  • Вертикальный перелив: скрытый

Это необходимо, потому что мы будем размещать и анимировать модули разделителей вне строки, и мы не хотим, чтобы они там были видны.

Добавить модуль первого делителя

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

Добавьте разделительный модуль в строку.

Настройки модуля первого делителя
Разделитель Градиентный Фон

Обновите содержимое модуля разделителя следующим образом:

  • Показать разделитель: NO
  • Цвет градиента фона слева: rgba (222,77,255,0.8)
  • Тип градиента: радиальный
  • Конечное положение: 70%

Размер делителя

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

Позиция

Затем задайте разделителю абсолютное положение. Это позволит разместить модуль в столбце / строке без изменения интервала или дизайна содержимого, которое вы хотите отобразить. Кроме того, вы захотите обновить индекс Z, чтобы модуль оставался в фоновом режиме и не перекрывал (или не скрывал) фактическое содержимое (в данном случае призыв к действию).

Обновите следующее:

  • Позиция: Абсолютная
  • Индекс Z: -1

Масштабирование и преобразование

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

  • Масштаб преобразования (X и Y): 600%

Затем нам нужно разместить наш модуль там, где мы хотим, чтобы модуль был, когда анимация закончится. Поскольку мы хотим, чтобы анимация была бесшовной (без каких-либо резких сбоев при повторении анимации), нам нужно убедиться, что модуль расположен за пределами столбца / строки / раздела.

Обновите следующее:

  • Transform Translate (Y): 0px
  • Преобразовать Перевести (X): 100%

Анимация

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

  • Стиль анимации: Слайд
  • Направление анимации: 5000 мс
  • Интенсивность анимации: 85%
  • Начальная непрозрачность анимации: 100%
  • Кривая скорости анимации: линейная
  • Повтор анимации: цикл

Результат

Давайте посмотрим на результат.

Добавить модуль второго делителя

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

Настройки второго модуля делителя
Цвет градиента

Затем обновите цвет градиента следующим образом:

  • Цвет градиентного фона слева: rgba (124,218,36,0,8)

Преобразовать Перевести

После этого обновите посадочную позицию модуля со следующим значением преобразования:

Transform Translate (X): -60%

Анимация

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

  • Стиль анимации: Слайд
  • Направление анимации: влево
  • Интенсивность анимации: 100%

Добавить модуль третьего делителя

Чтобы создать третий модуль делителя, продублируйте второй модуль делителя и обновите следующее:

  • Цвет градиентного фона слева: rgba (224,43,32,0,8)

  • Transform Translate (Y): -100%
  • Преобразовать Перевести (X): 0%

  • Направление анимации: вверх
  • Интенсивность анимации: 82%

Результат

Посмотрите результат!

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

Последние мысли

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

Какой путь вам больше нравится?

Я с нетерпением жду вашего ответа в комментариях.

Ура!

CSS градиентный фон с анимацией: 2 демонстрации

Создание градиентного фона в CSS

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

Вы можете использовать свойство gradient по разным причинам; одна из целей — использовать его в качестве фона для всей веб-страницы или различных элементов.

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

Демонстрация анимированного градиента фона

См. Онлайн-демонстрацию, в которой пурпурный, голубой и белый цвета используются для линейного градиента с разным временем анимации. Он также использовал @ -webkit-keyframes для оттенка с разными значениями угла:

См. Онлайн-демонстрацию и код

.div-gradient Класс определяет градиент вместе с его дочерними элементами, например, это второй элемент div:

.div-gradient: nth-child (2) {

box-shadow: 0 0 45vmax 45vmax magenta;

-webkit-animation: hue 10s 0s linear infinite,

move1 19s 0s linear infinite;

анимация: hue 10s 0s linear infinite,

move1 19s 0s linear infinite;

}


Как видите, он определяет box-shadow, webkit-анимацию, в которой используется линейный градиент.

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

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