Как сделать плавный переход цвета в css
Перейти к содержимому

Как сделать плавный переход цвета в css

  • автор:

transition

Свойство transition относится к новым свойствам CSS3.

Плавные переходы в CSS или «transitions» позволяют изменять значения свойств постепенно, «с нежностью». Обычно эффект от изменения значений CSS-свойств виден мгновенно, но с помощью плавных переходов можно изменить это поведение и сделать процесс изменения значений плавным и без использования JavaScript.

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

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active.

Существует четыре отдельных свойства.

transition-property Свойство, к которому применяем анимацию. Практически любое свойство CSS: color, background, width, font-size и т.д. transition-duration Длительность анимации. Время в секундах. transition-timing-function Временная функция, используемая для анимации: ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier transition-delay Задержка анимации. Время в секундах.

А также есть укороченная запись, вмещающая все свойства — transition.

 .элемент < переход: [свойство] [продолжительность] [легкость] [задержка] >.element

transition-duration

Чтобы обозначить плавный переход в CSS, достаточно задать одно свойство: transition-duration — длительность перехода. Значения задаются в секундах (10s, 3s), долях секунды (0.1s, 0.03s) или миллисекундах (100ms, 333ms).

Зададим разные цвета и размеры шрифта, а для анимации установим длительность в 3 секунды. Анимацию добавим в двух местах, чтобы она происходила как при наведении мыши на блок, так и при убирании мыши.

 .t1 < width: 100px; height: 50px; color: white; background-color: green; transition-duration: 3s; text-align: center; font-size: 16px; >.t1:hover

transition-property

Если задана только длительность перехода transition-duration, то по умолчанию плавное изменение затрагивает все свойства элемента и для всех свойств происходит одновременно. Такое поведение соответствует значению all свойства transition-property.

Такое поведение часто нежелательно, особенно когда в правиле много свойств. Можно указать, какие именно свойства нужно изменять плавно, перечислив их в transition-property через запятую:

 transition-property: width; // плавно меняется только ширина transition-property: width, height; // плавно меняются только ширина и высота 

При этом так же через запятую можно задавать переходам разных свойств разную длительность:

 transition-property: width, height; transition-duration: 1s, 5s; // ширина меняется за 1 секунду, высота за 5 

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

 .t2 < width: 100px; height: 50px; color: white; background-color: green; transition-duration: 3s; transition-property: background-color; text-align: center; font-size: 16px; >.t2:hover

transition-delay

Ещё одно свойство переходов — transition-delay определяет задержку перед началом перехода и задаётся в секундах или миллисекундах.

Можно указывать и отрицательные значения. Задержка применима к отдельным элементам, в этом случае значения указываются через запятую в том же порядке, как у transition-property. Также можно добиться интересного результата, если указать много свойств у transition-property и два значения у transition-delay. В этом случае к нечётным свойствам будет применяться первое значение, а к чётным — второе.

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

 .t3 < width: 100px; height: 50px; color: white; background-color: green; padding: 5px 10px; color: white; transition-duration: 1s; transition-delay: 0.5s; >.t3:hover

transition-timing-function

Свойство transition-timing-function определяет с какой скоростью и ускорением будут меняться свойства во время перехода. Содержит несколько значений.

  • ease — переход начинается медленно, затем ускоряется и к концу движения опять замедляется
  • linear — переход равномерный, без ускорений и замедлений
  • ease-in
  • ease-out
  • ease-in-out

Названия linear, ease и другие — это «псевдонимы» функций кубических кривых Безье:

  • cubic-bezier(0, 0, 1, 1) — это linear
  • cubic-bezier(0.42, 0, 1, 1) — это ease

В общем представлении cubic-bezier(x1, y1, x2, y2) значения x и y — это координаты точек кривых на графике. При этом верным считается значение x только в диапазоне от 0 до 1.

Сервис http://cubic-bezier.com/#.17,.67,.83,.67 поможет разобраться в функциональном представлении кривых Безье.

На странице http://easings.net/ru можно найти целую коллекцию разных easing-функций на основе кривых Безье.

C помощью функции cubic-bezier мы можем задавать любые формы переходов.

Ещё один возможный класс значений transition-timing-function — это steps, позволяющий задать «ступеньки», по которым будет идти переход.

 transition-timing-function: steps(число_шагов, направление); 

Число_шагов — это целое число, за которое будет выполнен переход; направление может принимать значение start или end. При заданном start первый шаг выполняется одновременно с началом перехода, а в случае c end последний шаг будет выполнен вместе с завершением перехода.

Пример применения steps — анимация спрайта.

Дополнительные материалы

Слайдер при помощи свойства CSS3 transition, где при помощи CSS и без всякого JavaScript удалось создать симпатичный слайдер.

Как сделать градиент фона в css

Градиентный фон можно устанавливать в свойствах background и background-image, но, для экономии места, все примеры будут записаны в обобщенном свойстве background. Значение которое принимает свойство background может быть одним из:

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

body  /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/ background: linear-gradient(45deg, #4158D0 0%, #4158D0 30%, #C850C0 30%, #C850C0 60%, #FFCC70 60%, #FFCC70 100%); > 

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

body  /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 3 цветов, начало градиента - нижний левый угол*/ background: linear-gradient(45deg, #4158D0 35%, #C850C0 35%, #C850C0 65%, #FFCC70 65%, #FFCC70 100%); > 

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

body  /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/ background: radial-gradient(#4158d0, #c850c0); > 

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

repeating-linear-gradient() или repeating-radial-gradient() — вышеуказанные варианты только с функцией повтора, чаще всего с помощью этих вариантов создают полосатые узоры.

body  /* необходимо задать высоту блока */ height: 100vh; /* зальем body документа градиентом из 2 цветов, начало градиента - центр страницы*/ background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); > 

background: gradient(); CSS. Плавный переход от одного цвета к другому

Здравствуйте уважаемые начинающие веб-мастера. Снова Оригинальный эффект CSS.

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

Называется такое действие — градиент, и так как по сути оно является фоновым изображением, то исполняется свойством background принимающим два значения:

1. linear-gradient — переход цвета от одного края или угла, к другому.

2. radial-gradient — переход цвета от центра к краям.

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

background : -moz-linear-gradient ( top, #ff0000, #ffcfcf );
background : -moz-radial-gradient ( top, #ff0000, #ffcfcf );

Ниже, на примере, разберём подробно каждый элемент этой записи.

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

Ставиться префикс в начале значения, и начинается с тире.

-moz-linear-gradient значение для Mozilla Firefox 3.6 + ;
-webkit-linear-gradient значение для Chrome 10 +, Safari 5.1 +, IOS 5+, Android 4+ ;
-o-linear-gradient значение для Opera 11.10 + ;
-ms-linear-gradient значение для IE10 + ;

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

Двухцветный градиент css


< html lang color: #008080;">ru «>
< head >
< meta charset color: #008080;">utf-8 » />
< title >Документ без названия< /title >
< style >
#gradient background : # ff0000 ;
background : -moz-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
background : -webkit-linear-gradient ( top, #ff0000, #ffcfcf );
background : -o-linear-gradient ( top, #ff0000, #ffcfcf );
background : -ms-linear-gradient ( top, #ff0000, #ffcfcf );
width : 600px ;
height : 400px ;
border : 1px solid #333 ;
>
< /style >
< /head >
< body >
< div id color: #008080;">gradient «>< /div >

< /html >

Это самый простой, двухцветный градиент. Разберём подробно значения свойства background

В первой строке задаётся фон для браузеров не поддерживающих линейный градиент.

Следующие 5 строк — для отображения фона в разных браузерах. Сначала пишется значение градиента с префиксом в начале.

Затем, в круглых скобках:

top — направление от которого начинается первый цвет (может быть bottom , left , right )

#ff0000 — через запятую первый цвет;

#ffcfcf — через запятую второй цвет;

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

Можно сделать переход цвета не горизонтально, или вертикально, а из угла в угол. Для этого существуют следующие направления:

bottom right — от правого нижнего угла к левому верхнему;

bottom left — от левого нижнего к правому верхнему;

top right — от правого верхнего к левому нижнему;

top left — от левого верхнего к правому нижнему;

Можно сделать переход цвета от центра блока к краям. Тогда в значении вместо слова linear (линейный), ставиться radial (радиальный)

#gradient <
background : # ff0000 ;
background : -moz-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
background : -webkit-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
background : -o-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
background : -ms-radial-gradient ( center, ellipse cover, #ff0000, #ffcfcf );
width : 600px ;
height : 400px ;
border : 1px solid #333 ;
>

Градиент css

А теперь давайте сделаем, так сказать, что-то типа радуги. Для этого добавим в вышеприведённый код ещё пару цветов, и зададим в процентах объём каждого цвета (количество цветов не ограничивается)

Объём цвета задаётся от 0% до 100%, (первый — 0%, последний — 100%, остальные между ними в порядке следования). Рассмотрим этот вариант на радиальном градиенте. На линейном делается всё аналогично.

#gradient <
background : #ff0000 ;
background : -moz-radial-gradient ( center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
background : -webkit-radial-gradien t( center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
background : -o-radial-gradient ( center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf1005 );
background : -ms-radial-gradient ( center, ellipse cover, #ff0000 0%, #00b630 30%, #6ff5f5 70%, #ffcfcf 100% );
width : 600px ;
height : 400px ;
border : 1px solid #333 ;
>

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

Принцип, я думаю, понятен. Так что строку для Safari до пятой версии, и Chrome до десятой, попробуйте написать самостоятельно.

Градиент задаётся любому блоку HTML (body, div, h1-6, p, ul, ol), и как глобальным, так и встроенным стилем (это для сайта на WordPress).

Теперь несколько слов о том, как и где подбирать цвета. Есть сервисы по созданию градиентов, предлагающие и цвет, и процент объёма, и код градиента, но выбор у них ограничен предложением.

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

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

В верхнем ряду панели выбирается количество сочетаемых цветов. Пройдя по «Угол 30°» меняется диапазон выбора.

В «Регулировка схемы», тон делается темнее или светлее. В «Список цветов», все цвета, присутствующие на схеме, располагаются по насыщенности, и с кодом в подписи.

В общем неограниченные возможности по подбору цветовой гаммы для создания градиента.

Примеры различных вариантов градиента и готовый код, можно найти в шпаргалках Градиент примеры код

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить


Перемена

— Рабинович! У вас есть разменять сто долларов?
— Нет, но спасибо за комплимент!

Две одесситки:
— Роза, как тебе нравится моё новое платье?
— Извини, Сара, я спешу, мне сейчас не до скандалов!

linear — gradient ( )

Функция для создания фона в виде градиента или повторяющегося паттерна.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Пример
  3. Как понять
  4. Как пишется
    1. Количество цветов
    2. Точки остановки цвета
    3. Направление градиента
    4. Повторяющийся градиент
    5. Множественные градиенты
    1. Денис Ежков советует
    2. Алёна Батицкая советует

    Обновлено 20 декабря 2021

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Функция linear — gradient используется для задания фона в виде линейного градиента.

    Пример

    Скопировать ссылку «Пример» Скопировано

     .element  background-image: linear-gradient(#6e4aff, #49A16C);> .element  background-image: linear-gradient(#6e4aff, #49A16C); >      

    Как понять

    Скопировать ссылку «Как понять» Скопировано

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

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    Самый простой вид градиента — переход между двумя цветами:

     .element  background-image: linear-gradient(#2E9AFF, #F498AD);> .element  background-image: linear-gradient(#2E9AFF, #F498AD); >      

    Линейный градиент из розового, голубого и жёлтого цветов

    Мы можем задавать направление градиента, используя ключевые слова с приставкой to : to left , to top , to right , to bottom (по умолчанию). Значения имеют следующие эквиваленты в углах:

    • to top — 0deg ;
    • to bottom — 180deg ;
    • to right — 90deg ;
    • to left — 270deg ;

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

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

    Скопировать ссылку «Повторяющийся градиент» Скопировано

    Если градиент должен многократно повторяться, можно использовать функцию repeating — linear — gradient ( ) .

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

    Скопировать ссылку «Множественные градиенты» Скопировано

    Множественный фон элемента может применяться и к градиентам.

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    �� Градиент можно анимировать! ��

    На практике

    Скопировать ссылку «На практике» Скопировано

    Денис Ежков советует

    Скопировать ссылку «Денис Ежков советует» Скопировано

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

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

    �� Если нужно создать линейный градиент, уходящий в прозрачность, то вы неминуемо столкнётесь с проблемой в Safari и iOS. Во всех браузерах ключевое слово transparent отрабатывает ожидаемо, плавно уводя градиент в прозрачность. А в Safari и iOS из-за особенностей реализации именно этого ключевого слова градиент будет уходить в грязный чёрный.

     .element  background: linear-gradient(#F498AD 10%, transparent);> .element  background: linear-gradient(#F498AD 10%, transparent); >      

    Линейный градиент в Chrome, красиво растворяется

    Линейный градиент от зелёного в прозрачный

    Ровно тот же самый градиент, но в Safari. Это вообще легально? ��

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

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

     .element  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0));> .element  background: linear-gradient(#F498AD 10%, rgb(244 152 173 / 0)); >      

    �� Статьи и сборники классных паттернов, созданных при помощи градиентов:

    • CSS-паттерны
    • CSS3 Patterns Gallery
    • You Crazy? Patterns with CSS Gradients

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

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