Css linear gradient rotate

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

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

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

linear-gradient

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

background: linear-gradient(orangered, gold);

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

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

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

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

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

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например 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-го.

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

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник

Как сделать анимацию вращающегося linear-gradient background?

У меня есть фон с линейным градиентом, и я хочу сделать анимацию на его вращение. Мой код не работает. Чего мне не хватает?
Мне нужно вращать сам градиент, а не элемент. Я хочу сделать анимацию, как карточки по этой ссылке: https://nuxt.com/. Это возможно только если анимировать сам background (Там есть padding, и он должен быть с градиентом, так что на самом деле анимируется фон элемента позади него, а не border).

.block < width: 200px; height: 200px; >.block__bg < width: 100%; height: 100%; background: linear-gradient(360deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); animation: gradient-rotate 5s linear 0s infinite reverse; transition: all .3s linear; >@keyframes gradient-rotate < 0% < background: linear-gradient(360deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >to < background: linear-gradient(0deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >>

2 ответа 2

Можно вращать псевдоэлемент вместо самого блока:

.block < position: relative; width: 200px; height: 200px; overflow: hidden; >.block::before < content: ''; position: absolute; top:50%; left:50%; width: 150%; height: 150%; transform: translate(-50%, -50%) rotate(0turn); background: linear-gradient(#00dc82, #fff, #36e4dab3, #1de0b14d); animation: gradient-rotate 5s ease-in-out 0s infinite alternate; >@keyframes gradient-rotate < to < transform: translate(-50%, -50%) rotate(1turn); >>

Для всех браузеров, кроме Firefox и Safari:

@property --my-angle < syntax: ''; inherits: false; initial-value: 0turn; > .block < width: 200px; height: 200px; background: linear-gradient(var(--my-angle), #00dc82, #fff, #36e4dab3, #1de0b14d); animation: gradient-rotate 5s ease-in-out 0s infinite alternate; >@keyframes gradient-rotate < to < --my-angle: 1turn; >>

@NL993: спасибо. Ох, быстрее бы поддержка @property появилась везде. :has() вроде работает потихоньку 🙂

Думаю как-то так, шагов можно больше прописать, анимацию как я понял Вы хотели туда-сюда крутить, поэтому поставил alternate-reverse остальное сами добавите по вкусу:

.block < width: 200px; height: 200px; >.block__bg < width: 100%; height: 100%; background: linear-gradient(360deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); animation: gradient-rotate 2s linear 0s infinite alternate-reverse; transition: all .3s linear; >@keyframes gradient-rotate < 10% < background: linear-gradient(324deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >20% < background: linear-gradient(288deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >30% < background: linear-gradient(252deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >40% < background: linear-gradient(216deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >50% < background: linear-gradient(180deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >60% < background: linear-gradient(144deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >70% < background: linear-gradient(108deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >80% < background: linear-gradient(72deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >90% < background: linear-gradient(36deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >100% < background: linear-gradient(0deg,#00dc82,#fff,rgba(54,228,218,.7),rgba(29,224,177,.3)); >>

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

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

Источник

Design Case Study: CSS3 Gradient Tips & Tricks

Juan Castillo,

Related Projects testing

Fashion Ecommerce with Magento

Fashion Ecommerce Development with Magento for a Startup

Related Services

Related Articles

Google Earth DIV Overlay via iframe Shim

Can a Minimum Viable Product Be a Building Block for Your Business?

A Users Guide to WordPress Plugins

Introduction

I recently had the pleasure of being part of the team at Endertech that designed and developed the marketing and API documentation website for EdgePay, a new full-service payment gateway and merchant account provider. I was doubly excited to be both the creative director and frontend developer for the marketing part of the site, which we built in Drupal 8. In this day and age, it’s critical for web designers to also have solid knowledge of HTML and CSS, so they can understand the flip side of designing the UI of a website: actually implementing it. In the case of EdgePay, I got to take on both roles, and I learned some neat CSS3 tricks along the way. In this article, I’ll detail some of what I learned by focusing on the homepage hero banner, which represents some of the advanced CSS functions we employed throughout the site.

I was especially impressed by the complex and refined background styles that nowadays can be achieved through standard CSS alone, effects which historically would have required prebaked background images or hacky methods. There are many advantages to using pure CSS as opposed to images, which can be heavy and slow-loading, can appear blurry or distorted, and can complicate implementation of a responsive design that needs to work on both desktop and mobile. Elegant and well-designed CSS, on the other hand, loads in a snap, is always pixel perfect, and can be implemented in a way that works for both desktop and mobile without having to manage multiple sets of assets for different device types.

Now let’s take a more in-depth look at how Endertech leveraged CSS3 to translate EdgePay’s contemporary branding to a bespoke responsive website.

Hero Banner Overview

Here’s a screenshot of the EdgePay homepage hero banner:

Источник

How to rotate a gradient rather than the whole div?

I have this gradient on element, and am trying to rotate only the gradient, but when I try to rotate it, as you see in the snippet, the whole element is rotating. Any ideas?

 
I'm gonna be some buttons and stuff
 

Are you trying to create a hover or click effect? why can’t you just adjust the gradient at the first place.

@Stickers I was wondering the same, but was making sure I wasn’t crazy. If you’re going to rotate the gradient a full 180 (which would basically be backwards), why not just switch up the rgba ?

@Chris just switch up the order of the rgba . Instead of linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) , use linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, .6)

2 Answers 2

You can simply use degree with linear-gradient to rotate it. In this case you have to use 0deg (or to top ) because the default value of linear-gradient is to bottom which is 180deg

 
I'm gonna be some buttons and stuff
 

As you can see in the documentation the syntax is:

linear-gradient([ [ [ | to [top | bottom] || [left | right] ],]? [, ]+); 

The gradient line’s angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.

Источник