Радиальные градиенты • Про CSS

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

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

radial-gradient

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

background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

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

Форма градиента

Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle

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

Центр градиента

Для задания центра градиента используются те же ключевые слова, что и для линейного градиента, но с приставкой at: at top, at right, at bottom, at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

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

Код первого квадрата:

background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px.

Размер градиента

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

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.

closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.

farthest-corner — аналогично closest-corner, только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom, чтобы было лучше видно действие кода:

repeating-radial-gradient

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

background: repeating-radial-gradient(circle,
  darkkhaki, darkkhaki .5em,
  transparent .5em, transparent 1.5em);

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

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

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

Если при создании узоров использовать относительные единицы (em, %), а не абсоюлютные (px), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

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

Использование 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 – Dobrovoimaster

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

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

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

Библиотеки градиентов представляют вам на выбор готовые работы и с расширенными возможностями по их настройке всего в пару кликов. Вам остаётся лишь скопировать предварительно сгенерированный код и использовать его в css ваших проектов.

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

1. CSS Gradient

 

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

2. ColorSpace Gradient

 

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

3. CSS Gradient Generator

 

 
Эффективный и гибкий инструмент, с помощью которого вы сможете легко создать код линейного или радиального градиента для CSS, SVG, canvas, PHP и Android. Вы можете сохранять текущие настройки и использовать их позже, нажав на «уникальная ссылка», экспортировать данные в базовый CSS Generator и генератор изображений градиентов.

4. ColorSpark

 

 
Генератор случайных цветов и градиентов, листайте для выбора, копируйте код понравившегося варианта, и всё)).

5. Gradient Generator

 

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

6. Grabient

 

 
Grabient — генератор градиентов с готовыми шаблонами и расширенными возможностями по их настройке. Генератор позволяет задать угол градиента, границы перехода между цветами, а также даёт возможность изменять цвета, удалять их и добавлять новые. Всё это в пару кликов и с предпросмотром в режиме реального времени.

7. Gradienty

 

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

8. Gradient Hunt

 

 
Gradient Hunt — это бесплатная и открытая платформа для вдохновения с тысячами впечатляющих цветовых градиентов ручной работы.

9. uiGradients

 

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

10. WebGradients

 

 
WebGradients — это бесплатная коллекция из 180 линейных градиентов, которые вы можете использовать в качестве фонового содержимого в любой части вашего сайта. Просто скопируйте кроссбраузерный код CSS3 и используйте его в своих проектах. Доступна PNG-версия каждого градиента, а так же, в качестве бонуса есть пакеты для Sketch & Photoshop.

11. CoolHue 2.0

 

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

12. CSS Gradient Animator

 

 
Генератор CSS для создания красивых анимированных градиентов.

13. Ultimate CSS Gradient Generator

 

 
Классический генератор градиентов CSS от ColorZilla.

14. Eggradients

 

 
Библиотека готовых градиентных шаблонов CSS, в которой представлено более 200 вариантов красочных фоновых градиентов.

15. CSS Gears Gradient Cards

 

 
Большая коллекция градиентных карточек в форматах .css .xd и .sceth, с возможностью комбинирования цвета.

16. Serfo CSS Gradients

 

 
Набор готовых к использованию фоновых градиентов CSS от сервиса Serfo.

17. CSS Matic

 

 
CSS генератор градиентов представленный в обойме инструментов для веб-дизайнеров от CSS Matic.

18. CSS Gradient Generator

 

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

19. Gradient Background Generator

 

 
Генератор кода CSS с настраиваемыми параметрами конфигурации для линейного и радиального градиента, а также фоновых изображений в форматах .png и .jpg.

20. Gradients Party

 

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

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

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

• 09/16/2021
• Чтение занимает 2 мин

В этой статье

Скачать пример

RadialGradientBrushКласс является производным от GradientBrush класса и закрашивает область с радиальным градиентом, который смешивает два или более цвета в окружности. GradientStop объекты используются для указания цветов в градиенте и их позиций. Дополнительные сведения об GradientStop объектах см. в разделе Xamarin.Forms кисти: градиенты.

Класс RadialGradientBrush определяет следующие свойства:

• CenterТип Point , представляющий центральную точку окружности для радиального градиента. Значение этого свойства по умолчанию равно (0,5, 0,5).
• RadiusТип double , который представляет радиус окружности для радиального градиента. Значение этого свойства по умолчанию равно 0,5.

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

RadialGradientBrushКласс также содержит IsEmpty метод, который возвращает объект bool , который представляет, назначена ли кисть какие-либо GradientStop объекты.

Примечание

Радиальные градиенты также можно создавать с помощью radial-gradient() функции CSS.

Создание RadialGradientBrush

Позиции градиента кисти радиального градиента располагаются вдоль оси градиента, определенной кругом. Ось градиента расходятся от центра окружности до ее окружности. Расположение и размер окружности можно изменить с помощью Center свойств кисти и Radius . Окружность определяет конечную точку градиента. Поэтому ограничитель градиента в 1,0 определяет цвет в окружности. Позиция градиента в 0,0 определяет цвет в центре круга.

Чтобы создать радиальный градиент, создайте RadialGradientBrush объект и задайте его Center Свойства и Radius . Затем добавьте в коллекцию два или более GradientStop объектов, RadialGradientBrush.GradientStops которые определяют цвета градиента и их позиции.

В следующем примере XAML показано RadialGradientBrush , что задается как объект Background Frame :

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
    <Frame.Background>
        <!-- Center defaults to (0.5,0.5)
             Radius defaults to (0.5) -->
        <RadialGradientBrush>
            <GradientStop Color="Red"
                          Offset="0.1" />
            <GradientStop Color="DarkBlue"
                          Offset="1.0" />
        </RadialGradientBrush>
    </Frame.Background>
</Frame>

В этом примере фон Frame отрисовывается с помощью RadialGradientBrush интерполяции от красного к темному синему. Центр радиального градиента располагается в центре Frame :

В следующем примере XAML центр радиального градиента перемещается в левый верхний угол Frame :

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="0.0,0.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>

В этом примере фон Frame отрисовывается с помощью RadialGradientBrush интерполяции от красного к темному синему. Центр радиального градиента располагается в левом верхнем углу Frame :

В следующем примере XAML центр радиального градиента перемещается в правый нижний угол Frame :

<!-- Radius defaults to (0.5) -->
<RadialGradientBrush Center="1.0,1.0">
    <GradientStop Color="Red"
                  Offset="0.1" />
    <GradientStop Color="DarkBlue"
                  Offset="1.0" />
</RadialGradientBrush>            

В этом примере фон Frame отрисовывается с помощью RadialGradientBrush интерполяции от красного к темному синему. Центр радиального градиента располагается в правом нижнем углу Frame :

Взгляд на CSS3 градиент (линейный и радиальный градиенты) | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.

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

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

В общем случае синтаксис градиента (линейного) выглядит так:

Итак, давайте обо всем по порядку.

Прежде всего, линейный градиент объявлен функцией linear-gradient(). Функция имеет три основных значения. Первое значение определяет исходное положение. В примере указано top т.е. исходное положение сверху. Можно также использовать bottom, left и right;

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

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

Второе значение функции это начальный цвет и его стоп позиция, которая указана в процентах. Объявление данной позиции не обязательно, браузер по умолчанию присвоит первому цвету значение 0%.

Последним значением является второй цвет и его стоп позиция. По умолчанию принимает значение 100%. Эти крайние значения и они подразумевают, что первый цвет сразу начинает переходить во второй. Однако, если мы установим для первого цвета 50%, то он только с середины доступной высоты начнет переходить во второй. Вот так выглядит код:

Теперь давайте изменим значение стоп позиций, и на этот раз мы установим 50% для первого и второго цвета:

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

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

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

Радиальный градиент также как и линейный объявляется функцией, только уже radial-gradient(). Также есть и основные значения: это форма радиального градиента (circle — круг или ellipse — эллипс), начальный и конечный цвет. Синтаксис следующий:

Если не указывать форму, то по-умолчанию будет установлен эллипс.

Также по-умолчанию установлена центральная позиция градиента, ее можно изменить. Позицию можно задать командами (top, bottom, left, right и center), а также их комбинациями, либо указать в процентах или пикселях.

Комбинации команд:

• По центру вверху — top — 50% 0%;
• В левом верхнем углу — left top — 0% 0%;
• В правом верхнем углу — right top — 100% 0%;
• По центру — center — 50% 50%;
• Слева по центру — left center — 0% 50%;
• Справа по центру — right center — 100% 50%;
• По центру снизу — bottom — 50% 100%;
• В левом нижнем углу — left bottom — 0% 100%;
• В правом нижнем углу — right bottom — 100% 100%.

Вот пример с процентами:

Первое значение по оси Х второе по У.

Также радиальному градиенту можно задавать размер. Размер указывается через пробел после формы градиента. По-умолчанию применяется farthest-corner (к дальнему углу). Расчет ведется от центральной точки градиента до:

Чтобы, это лучше понять рассмотрим на примере. Градиент эллиптической формы с белым начальным и конечным синим цветом:

Размер рассчитывается из расстояния до ближних сторон, очевидно что верхняя ближе по оси Y и левая по оси X.

А теперь до дальних сторон:

Результат, как говорится на лицо. Размер исчисляется из расстояния до дальних сторон.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

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

Альфа канал, тот что последний и равен 0.2 указывает на то, что от 100% цвета используется только 20%.

В обоих видах CSS3 градиента можно использовать не два, а несколько цветов.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

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

Для обоих видов можно использовать повторение цветов. То есть, из данных значений образуется цикл. Функции повторяющегося градиента, repeating-linear-gradient() — для линейного и repeating-radial-gradient() — для радиального.

Просмотр демо страницы и скачивание исходников не доступно

Уважаемый читатель, XoZblog существует и развивается за счёт доходов от ненавязчивой рекламы. Если не затруднит, добавьте этот сайт в исключение AdBlock. Спасибо за понимание!

Кроссбраузерность

К сожалению, на момент написания этой статьи, современные браузеры еще не поддерживают стандартный синтаксис. Они по прежнему нуждаются в префиксах, каждый в своих (-webkit-, -moz-, -ms- и -o-). Поэтому синтаксически правильным является вот такое описание градиента:

Чтобы упростить задачу с префиксами, можно использовать бесплатную библиотеку Prefix-Free.

Для того чтобы градиент заработал на «9 осле» (Internet Explorer 9), пишем так:

Но даже здесь есть ограничения, нельзя добавить более 3 цветов и для использования прозрачности нужно немного изменить HEX код цвета:

Где 33 сразу после решетки это процент насыщенности цвета.

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

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

html5 — Как анимировать радиальный градиент с помощью CSS?

Решение SVG

Все фильтры, градиенты, маски, клипы пришли в CSS из SVG. Поэтому необходимо добавить решение c SVG градиентами.

Всё в принципе повторю из css решения, те же цвета в stop-color, те же проценты в stop offset, но анимация получается более мощной и зрелищной.

Горизонтальное перемещение градиента

Анимация достигается изменением значения параметра fx радиального градиента, отвечающего за горизонтальную координату центра градиента.

Запуск анимации — клик по прямоугольнику

<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="0%" fy="5%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="4%" stop-color ="#ffb3ff" />
	   <stop offset="12.25%" stop-color ="#ff33ff" />
	    <stop offset="31.25%" stop-color ="#800080" />
	     <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;0%"
	  repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

Атрибут keyTimes обеспечивает неравномерность движения, количество значений должно равняться количеству значений в атрибуте values Подробнее здесь.

  values="0%;50%;50%;100%;0%"
keyTimes="0;0.1;0.5;0.9;1"

Вертикальная анимация градиента

В этом случае анимируется fy

<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="48%" fy="0%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="3%" stop-color ="#ffb3ff" />
	  <stop offset="12.25%" stop-color ="#ff33ff" />
	  <stop offset="31.25%" stop-color ="#800080" />
	    <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	  repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

Анимация по диагонали

Анимируются одновременно оба параметра fx, fy

<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="0%" fy="0%" r="200%">
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="3%" stop-color ="#ffb3ff" />
	  <stop offset="12.25%" stop-color ="#ff33ff" />
	  <stop offset="31.25%" stop-color ="#800080" />
	  <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fy"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	  repeatCount="1"
	  restart="whenNotActive" />
	     <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="2s"begin="gr1.click"
	  values="0%;50%;50%;100%;50%;50%;0%"
	   repeatCount="1"
	  restart="whenNotActive" />
  </svg>
</div>

Анимация по наведению курсора

Условие запуска анимации: begin="rect1.mouseover"

<style>
 
</style>
<div>
  
  <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100">
   <defs>
   <radialGradient  fx="0%" fy="5%" r="200%"
           >
     <stop offset="0%" stop-color ="#FFFFFF" />
	  <stop offset="4%" stop-color ="#ffb3ff" />
	  <stop offset="12.25%" stop-color ="#ff33ff" />
	  <stop offset="31.25%" stop-color ="#800080" />
	  <stop offset="50%" stop-color ="#b300b3" /> 
		 
   </radialGradient>
   </defs> 
    <g > 
   <rect fill="url(#radGrad)" x="5%" y="5%" rx="10%"  /> 
      <text x="50%" y="60%" font-size="28px"  text-anchor="middle" font-weight="bold" font-family="sans-serif" fill="#FFDD00" > Sun shine </text>
	</g>  
    <animate xlink:href="#radGrad"
	  attributeName="fx"
	  dur="1s"
	  begin="rect1.mouseover"
	   values="0%;100%;0%"
	   repeatCount="1"
     fill="freeze"
	   />
  </svg>
</div>

CSS3 повторение градиента

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

Тест о котором я упоминал в описании находится здесь: Тест CSS3. Стандарт оформления HTML документов

Реальный пример работы вы можете увидеть и скачать ниже:

Посмотреть примерСкачать

Как использовать?(простое повторение градиента)

Синтаксис очень похож на определение простого линейного или радиального градиента, но при этом еще используется еще одно слово-приставка в начале и указываются цвета и направление повторения. Чтобы повторять линейный градиент нужно использовать свойство repeating-linear-gradient, а чтобы повторять радиальный нужно использовать функцию repeating-radial-gradient:

1
2
3
4
5
6
7
8
9

/*Линейный*/  
.gradient {  
    background: repeating-linear-gradient(0deg, #f9f9f9, #cccccc 20px);   
}  
 
/*Радиальный*/  
.gradient {  
    background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);    
}

(Создание шаблона для повторений)

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

HTML часть

Для этого нам нужен лишь один <div> и никаких изображений, только CSS3:

1
2

<div>
</div>

CSS3 часть

1
2
3
4
5
6
7
8
9
10

.gradient {  
    width: auto;  
    height: 500px;  
    margin: 0 50px;  
    background: -webkit-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -moz-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: -o-repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background: repeating-linear-gradient( 0deg, #f9f9f9, #f9f9f9 20px, #cccccc 21px);  
    background-size: 100% 21px;  
}

Последнее свойство означает что градиент будет растягиваться на всю страницу и повторяться через 21 пиксель. Чтобы свойство работало в разных браузерах мы используем специальные префиксы(«-webkit», «-moz», «-o»).

А для создания двух полосок слева мы используем псевдоэлемент :before :

1
2
3
4
5
6
7
8
9

.gradient:before {  
    content: "";  
    display: inline-block;  
    height: 500px;  
    width: 4px;  
    border-left: 4px double #FCA1A1;  
    position: relative;  
    left: 30px;  
}

Вывод

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

Успехов!

Источник: http://www.hongkiat.com/blog/css3-repeating-gradients/

Easy Gradient Generator Tool (избегает серых мертвых зон ☠️)

Почему этот генератор градиентов лучше других

Когда вы пытаетесь создать градиенты в широком диапазоне оттенков, вы часто видите серую мертвую зону ☠️ ™ в середине градиента. Почему это стоит смехотворно зловещих смайлов ? Потому что это означает, что ваши градиенты выглядят как , это :

Проще говоря: чтобы получить градиент, избегающий ужасной серой мертвой зоны ☠️, вы не рисуете прямую линию от A до B, вы рисуете кривую biiiig .

Или, чтобы быть более точным / интересным: мы интерполируем градиент в цветовой системе на основе оттенков, такой как HCL, HSB или HCL (не RGB) 🤓. Это позволяет избежать серой линии, проходящей через центр каждого цветового пространства. Приложения для дизайна, онлайн-инструменты для создания градиентов и даже CSS не работают в этом отношении — поэтому я сделал этот инструмент!

Цветовые градиенты в HCL, HSB и HSL

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

• HCL (оттенок-цветность-яркость) : выбор этого инструмента по умолчанию, HCL — это удивительная цветовая система , которая не только создает красивые, богатые градиенты в широком диапазоне оттенков, но и делает это с плавным восприятием. способ. Если бы вы просматривали градиент в оттенках серого, вы бы увидели только плавный переход от более светлого к более темному серому, предотвращая ужасные «полосы», которые вы видите в некоторых вручную подобранных градиентах. (Примечание: перцептивно однородная природа HCL также делает его отличным для цветовых палитр визуализации данных)
• HSB (оттенок-насыщенность-яркость) : Хотя восприятие не является однородным, иногда HSB предлагает более интересный (и яркий) вариант градиента между двумя остановками.В частности, если ваш градиент HCL имеет уродливый коричнево-желтый цвет, попробуйте проверить версию HSB. HSB — фантастическая цветовая система для дизайнеров, и я написал подробное руководство по HSB.
• HSL (оттенок-насыщенность-легкость) : HSB и HSL часто очень похожи, особенно в ярких градиентах. Тем не менее, иногда стоит посмотреть и то, и другое. Также обратите внимание на розовую «полосу» в градиенте HSL выше — это, по сути, небольшой всплеск яркости, вызванный артефактами использования неперцептуальной цветовой системы.Используйте HCL, чтобы избежать этого. (Также: меня часто спрашивают о разнице между HSB и HSL)

Экспорт градиента как изображения SVG

Необходимо использовать один из этих градиентов в вашем дизайнерском приложении — например, Figma, Sketch или Adobe XD?

Просто — просто нажмите «Экспорт SVG» и перетащите файл прямо в свое дизайнерское приложение.

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

Градиент CSS (для линейных, радиальных и конических градиентов)

Получить градиентный CSS для любого из 3-х типов градиентов очень просто.

Просто нажмите «Копировать CSS» и добавьте код к нужному элементу.

Примечание: если у вас есть другие свойства фона, установленные для рассматриваемого элемента, вы можете изменить свойство с background на background-image 👍

Подробнее о цвете

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

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

Генератор линейных и радиальных градиентов CSS

  .basic-radial {
 background-image: radial-gradient (красный, желтый); 
}  

  .multi-radial {
 background-image: radial-gradient (красный, желтый, зеленый, синий); 
}  

 .position-radial {
 background-image: radial-gradient (красный 10%, желтый 50%, зеленый 90%); 
}  

  .transparent-radial {
 background-image: radial-gradient (rgba (0, 0, 0, 0), rgba (0, 0, 0, 1)); 
}  

  .shape-gradient {
 background-image: radial-gradient (круг, красный 10%, желтый 20%); 
}  

  .repeat-radial {
 background-image: repeat-radial-gradient ( красный 10%, желтый 20%); 
}  

 фоновое изображение: радиальный градиент (50% 50%, 

 background-image: радиальный градиент (50% 50%, 25% 15%, 

 background-image: радиальный градиент (50% 50%, эллипс 

 background-image: radial-gradient (50% 50%, ближайший угол эллипса, 

 background-image: radial-gradient (центр, центр, круг с ближайшей стороны, # ff0000, # 00ff00, # 0000ff) 

 background-image: radial-gradient (центр, центр, ближайшая сторона круга, # ff0000, # ff9f40, # fff81f, # 050a99, # 0b990f, # 911c99, # d24fe0) 

 background-image: radial-gradient (center center, окружность ближайшая сторона, # ff0000 25%, # 19ff30 90%, # 2f3ced 100%) 

 background-image: repeat-radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 25%, # 19ff30 90%, # 2f3ced 100%) 

 background-image: radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 0%, # 19ff30 29%) 

 background-image: repeat-radial-gradient (центр, центр, ближайшая сторона круга, # ff0000 0%, # 19ff30 29%) 

  
    <Рамка.Справочная информация>