Меняющийся стиль и цвет изображений, кнопок и ссылок

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

Так выглядит стандартный стиль CSS:

.class {
    background-color:
    color:
    width:
    position:
    etc...
}

.class:hover {
    etc...
}

Однако, Вам необходимо добавить несколько строчек в описание стиля, которые при активации псевдо-класса :hover, отработаются средствами «ease-in» CSS3.

-webkit-transition: background-color 500ms ease-in;
-moz-transition: background-color 500ms ease-in;
-o-transition: background-color 500ms ease-in;
transition: background-color 500ms ease-in;

Такое хорошо применять для изменения background-color, width, color между тегами .class и .class:hover.
Выше наведенные эффекты также используются в комплексе с CSS Sprite Techniques. То есть, если вы обледенили все картинки в один спрайт, чтобы при наведении курсора происходил эффект у одного из них, нужно в стиле .class:hover параметр background-position сдеать отрицательным. Если необходимое изображение на 50 пикселей больше первого изображения, то код будет выглядеть следующим образом:

.class {
    background-position: 0px 0px
    width:
    etc.
}

.class:hover {
    background-position: 0px -50px
    width:
    etc.
}

Функции ease-in используются для создания эффекта «slot machine wheel». Еще можно создавать эффект с наложения изображения.
Четыре строчки кода с функцией ease-in написано специально. Первая строка – для Chrome и Safari, вторая - для Firefox, третья - для Opera.
Только эффекты не отображаются в IE.
Смотрим пример.