Transitioning Gradients
In, CSS, you can’t transition a background gradient. It sure would be nice if you could:
.gradient background-image: linear-gradient( to right, hsl(211, 100%, 50%), hsl(179, 100%, 30%) ); transition: background-image 0.5s linear; > .gradient:hover background-image: linear-gradient( to bottom, hsl(344, 100%, 50%), hsl(31, 100%, 40%) ); >But, no. It jumps from one gradient to the other immediately, with no smooth transition between the two. So let’s hack it!
We can achieve this effect with the help of a pseudo-element and an opacity transform instead.
First, apply one gradient to the element. Then, position its pseudo-element to fill the element and apply the second gradient to that. To transition between the two gradients, transition the opacity of the pseudo-element.
.gradient position: relative; background-image: linear-gradient( to right, hsl(211, 100%, 50%), hsl(179, 100%, 30%) ); z-index: 1; > .gradient::before position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient( to bottom, hsl(344, 100%, 50%), hsl(31, 100%, 40%) ); z-index: -1; transition: opacity 0.5s linear; opacity: 0; > .gradient:hover::before opacity: 1; >The pseudo-element is initially hidden via opacity: 0 . On hover, that transitions to an opacity: 1 . This produces the illusion of the main gradient transitioning to the pseudo-element’s gradient. It also takes a little bit of z-index work to ensure the pseudo-element stays positioned behind the content of the main element.
This takes a fair bit of code, unfortunately. But if you need this effect, this is the best (and only) way I’ve found so far to accomplish it.
Check out the full working example:
Плавное изменение background
Анимацию можно легко сделать через CSS свойство transition например для кнопок, меню и т.д. Подробнее на htmlbook.ru.
Transition background
Например, изображение меняются при наведении на него курсора мыши ( :hover ).
Transition background-size
Также transition можно применить к размеру изображения ( background-size ).
Как дополнение, можно добаввить смену background-image :
Комментарии
Другие публикации
Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с.
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой.
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
В CSS3 появилась возможность указать в свойстве background несколько изображений (Multiple Backgrounds), при этом они.
transition
The transition property is a shorthand property used to represent up to four transition-related longhand properties:
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. So, if we have, say, a box with a red background that we want to change to a green background when it is hovered, we can reach right for the transition property to move between background colors:
Specifying which properties to transition
Notice that we’ve called out the background-color property in the transition declaration. That tells the browser that we’re planning to transition background colors and nothing else when a transition occurs between hovered and non-hovered states. Notice, too, that we told the browser that the transition should take two seconds and follow and ease-out timing function, which means the transition starts fast, then slows down towards the end. You can specify a particular property as we have above, or use a value of all to refer to transition properties:
all specified for the transition-property portion of the shorthand. You may also comma separate value sets to do different transitions on different properties:
For the most part, the order of the values does not matter — unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay. Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable. By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Mobile / Tablet
«backgroundImageTransition», плавная анимация фоновых изображений
Во время создания front-end составляющей веб приложения, часто приходится сталкиваться с созданием так называемых hover-эффектов. Когда при наведении указателя мыши на DOM элемент меняется цвет ссылки, размер текста или иконка у пункта меню. С такой технологией, как CSS3 Transition, появилась возможность применять анимационные эффекты для DOM-элементов, без использования javascript-кода. Меня эта возможность сразу заинтересовала и я стал применять ее, без лишних усилий создавая плавные переходы. Например:
Пользователи браузеров последних версий получали более симпатичные переходы от одного цвета к другому, в старых же браузерах все оставалось по прежнему и никто ничего не терял.
Меня очень разочаровало отсутствие возможности применять CSS3 Transition для изображений (background-image). Например, если при наведении на пункт меню должна была поменяться иконка и измениться цвет ссылки, то иконка менялась мгновенно, а цвет у ссылки плавно, это совершенно сводило на нет все усилия и смотрелось еще хуже, чем если бы эффектов совсем не было. Оставалось выносить иконку в отдельный элемент или создавать псевдоэлемент и анимировать css — свойство opacity. Но это меняло привычный подход к верстке. Хотелось решения, в котором не нужно было бы заботиться об особой структуре html-разметки, а в случае с псевдоэлементами и css-правил. Соответственно, избежать изменений в разметке и правилах в «старых макетах» (сверстанных ранее с использованием «старой» структуры), в которые было решено добавить плавную анимацию.
Настройки плагина «backgroundImageTransition»
По скольку в большинстве проектов используется библиотека jQuery, для решения этой проблемы было решено написать jquery-плагин, который бы реализовывал плавные трансформации для фоновых изображений, т.е для background-image.
В качестве селектора плагину передается элемент или коллекция элементов которым требуется добавить возможность трансформации фона из одного изображения в другое.
Основные настройки трансформаций у плагина сделаны по аналогии с CSS3 Transition:
| Свойство | Значение по умолчанию | Возможные значения | Описание |
|---|---|---|---|
| transition-duration | 0 | число в миллисекундах (int) | определяет длительность анимированного перехода |
| transition-timing-function | swing | название функции расчета промежуточных значений (string) | определяет функцию для расчета промежуточных значений |
| transition-delay | 0 | число в миллисекундах (int) | определяет паузу перед началом анимации |
Расширить возможные значение функции transition-timing-function, можно добавив соответствующий jquery-плагин.
Дополнительные настройки плагина:
| pseudo-class | : hover | : hover,: focus,: active | связывает поведение плагина с определенным псевдоклассом |
| eventActivate | mouseenter | jquery событие (string) | событие, активирующее анимацию |
| eventDeActivate | mouseleave | jquery событие (string) | событие, активирующее обратную анимацию |
Рекомендуется использовать параметр pseudo-class. Он связывает поведение плагина с определенным псевдоклассом. Если нужно расширить поведение, то следует использовать свойства eventActivate и eventDeActivate в них можно передавать событие по которому запустится анимация. Тогда определять опцию pseudo-class не нужно, она является приоритетной и перекроет настройки eventActivate, eventDeActivate (эти параметры следует использовать только тогда, когда есть точное понимание, как они будут работать).
Принцип работы.
backgroundImageTransition.js создает два блока с абсолютным позиционированием и располагает их по верх слоя селектора, первый блок содержит исходное изображение, второй блок изображение в которое трансформируется исходное. Блоки создаются только на время анимации, т.е после завершения анимации они удаляются. Трансформация между блоками происходит по средствам css-свойства opacity. Рассмотрим следующий пример:
Активируем плагин (для наглядности передадим плагину псевдокласс на который будет реагировать анимация).
В течении 300ms backgroundImageTransition визуализирует трансформацию (переход), затем удаляет блоки созданные для анимации и показывает изображение из #main-menu .css: hover, когда указатель мыши выходит за пределы элемента выполняются обратные действия. Таким образом, добивается независимость от плагина. Если какой-либо другой код будет работать с этим же меню, то с большой вероятностью конфликта не произойдет.
backgroundImageTransition поддерживает работу со спрайтами:
Между изображениями также будет выполнен плавный переход по выше приведенной схеме.
Если в качестве параметра pseudo-class используется значение : focus, то оно будет работать только для форм (input, textarea и прочие элемент форм).
Где взять?
Скачать backgroundImageTransition можно на официальной странице плагина. Там же можно посмотреть демо. Форкнуть или написать об обнаруженных ошибках можно на github.