HTML/CSS

Плавное изменение background

Анимацию  можно легко сделать через CSS свойство transition например для кнопок, меню и т.д. Подробнее об transition на htmlbook.ru.

1

Transition background

Например, изображение меняются при наведении на него курсора мыши (:hover).

<a class="button" href="#"></a>
.button {
    display: inline-block;
    height: 129px;
    width: 129px;
    background: url(/demo/transition.png) 0 0 no-repeat;
    transition: background 0.2s ease;
}

.button:hover {
    background-image: url(/demo/transition-active.png);
}
2

Transition background-size

Также transition можно применить к размеру изображения (background-size).

.button {
    display: inline-block;
    height: 129px;
    width: 129px;
    background: url(/demo/transition.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    transition: background-size 0.5s ease;
}

.button:hover a {
    background-size: 80px 80px;
}

Как дополнение, можно добаввить смену background-image:

.button {
    display: inline-block;
    height: 129px;
    width: 129px;
    background: url(/demo/transition.png) 50% 50% no-repeat;
    background-size: 100% 100%;
    transition: background-size 0.5s ease;
    transition: background 0.5s ease;
}

.button:hover a {
    background-size: 80px 80px;
    background-image: url(/demo/transition-active.png);
}
27 декабря 2016
Цвет карты можно изменить начиная с версии 2.0 с помощью CCS фильтров, применив их к элементу .ymaps-layers-pane
Оригинальный размер капчи составляет 304x78px и чаще всего она не помещается в габариты форм сайта. Исправить это можно...
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.