Плавный переход цвета фона css

Плавные трансформации на чистом CSS. Свойство transition

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

Свойство в общем виде записывается так:

transition: property duration timing-function delay; 

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all , переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear , ease , ease-in , ease-out , ease-in-out .
• delay — время задержки перед началом перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).

Примеры использования

В данном примере применяем плавный переход цвета фона ( background-color ) для элемента p при наведении курсора. Фон плавно изменится за секунду.

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p , прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств ( width и height ) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

Анимировать изменение цвета текста при наведении на ссылку.

Изменение размера шрифта при наведении на текст:

Нюансы

☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:

• Цветовые свойства: color , background-color , border-color и другие.
• Размеры и отступы: width , height , padding , margin , top , right , bottom , left и другие.
• Свойства трансформации: transform (включая rotate , scale , translate , skew и другие).
• Некоторые свойства текста: font-size , letter-spacing , word-spacing , line-height .
• Свойство прозрачности: opacity .
• Свойства границы: border-width , border-radius .
• Свойство позиционирования: position .

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display , content , visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

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

Поддержка браузерами

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме

• Тренажёры по CSS-анимациям от HTML Academy.
• : hover, : focus, : active — как работают состояния элементов.
• Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

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 + ;

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

< 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 ;
>

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

Объём цвета задаётся от 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 ;
>

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

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

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

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

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

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

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

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

Перемена

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

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

Источник

Плавный переход фона

Как можно сделать плавный переход фона от цвета к прозрачному, если контента может быть и больше, а фон должен плавно переходить где-то на 20% от верха (от прозрачного)? Должно быть так: Пытаюсь градиентом сделать, но переход получается грубым, если ставить 50%, то переход слишком размытый получается.

 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, numquam qui reiciendis aperiam, nam amet? Dolore porro recusandae deserunt pariatur eum, facilis vitae. Optio ea cupiditate iure deleniti adipisci minus.
 

Судя по изображению, вам нужно делать градиент wrap , а не p . Должна получиться маска с градиентом поверх вашего изображения.

3 ответа 3

А тебя не устроит маскирование изображения?

Свойство mask сочетает в себе изображение маски и ссылку на маску.

Первый способ заключается в использовании свойств mask-image , mask-repeat , mask-position , mask-clip , mask-origin и mask-size , которые определяются подобно частям background вроде background-image . Как и для background-image можно определить несколько исходников маски, каждый из них представляет собой изображение описанное в CSS3 Images. Все исходники маски будут объединены в единое изображение маски, далее оно используется чтобы замаскировать элемент и его содержимое, как описано выше. Изображение может быть в любом растровом формате вроде JPG или PNG, а также SVG или градиентом CSS. Приведённый выше пример с маской может быть просто реализован с помощью следующего кода:

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

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

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

Недостаток — поддержкой IE и Edge придется пожертвовать

Источник