Эффекты при наведении курсора мыши на объект
придают любому сайту динамичный и живой вид. Обычно для них используется
код JavaScript, но с наступлением CSS3 можно уже использовать только
средства стилей.
Приведенные в данном материале эффекты работают в
современных браузерах. Поддержка IE зависит от версии и перед
применением в реальном проекте надо провести тщательное тестирование.
Подёргивание вверх
Данный эффект отлично работает, когда у вас есть
несколько выравненных по горизонтали элементов. Проведение курсора мыши
вдоль такой линейки порождает волну.
Его очень просто сделать. Для каждого элемента
определяется поле и при наведении курсора мыши размер поля уменьшается.
Начальное значение поля 15px, уменьшается оно до 2px, что заставляет
изображение "подпрыгивать вверх". Данный эффект можно использовать и для
текста в списке.
Свойство transition используется здесь в качестве дополнения, так как эффект отлично выглядит и без него. Оно придает гладкости эффекту.
CSS
02 | border: 5px solid #ccc; |
05 | -webkit-transition: margin 0.5s ease-out; |
06 | -moz-transition: margin 0.5s ease-out; |
07 | -o-transition: margin 0.5s ease-out; |
Масштабирование
При наведении курсора мыши каждое изображение
медленно увеличивается в размерах, а при потере фокуса - возвращается к
своим оригинальным размерам.
Для данного эффекта используется набор изображений
размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до
300х100 px и расширяются при наведении курсора мыши. Используется
центрирование по горизонтали, и изображение с новым размером может все
испортить, поэтому применяется отрицательное значение поля равное
половине ширины.
CSS
10 | -webkit-transition: all 1s ease; |
11 | -moz-transition: all 1s ease; |
12 | -o-transition: all 1s ease; |
Проявляющийся текст
Данный эффект очень напоминает использование
JavaScript, когда при наведении курсора мыши на один объект проявляется
другой. Для его получения изображение и текст помещаются в один
контейнер div, а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента div. Таким образом текст помещается вверх элемента div и скрывается.
Для проявления текста при наведении курсора мыши, мы
просто изменяем цвет и высоту строки. Так создается эффект
масштабированного проявления текста.
CSS
07 | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; |
09 | text-transform: uppercase; |
10 | -webkit-transition: all 0.5s ease; |
11 | -moz-transition: all 0.5s ease; |
12 | -o-transition: all 0.5s ease; |
Наклон изображения
Это один из простейших, но очень интересных эффектов
для галереи миниатюр. В его основе лежит создание массива избражений и
поворот той картинки, над которой находится курсор мыши.
Для данного эффекта используется много новых,
специфичных для конкретного браузера свойств CSS, поэтому использование в
старых браузерах не пройдет. Галерея использует тени, переходы и
трансформации.
Если есть желание еще более разнообразить эффект, то
можно исопльзовать псевдо селекторы для вращения иззображений под
разными углами и в разные стороны.
CSS
08 | border: 5px solid #eee; |
09 | -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); |
10 | -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); |
11 | box-shadow: 4px 4px 4px rgba(0,0,0,0.2); |
12 | -webkit-transition: all 0.5s ease-out; |
13 | -moz-transition: all 0.5s ease; |
14 | -o-transition: all 0.5s ease; |
18 | -webkit-transform: rotate(-7deg); |
19 | -moz-transform: rotate(-7deg); |
20 | -o-transform: rotate(-7deg); |
Свечение и отражение
Это замечательный и сложный эффект. Изначально
изображения имеют небольшую прозрачность.Затем, когда на него наводится
курсор мыши, прозрачность полностью убирается, появляется свечение
вокруг и отражение (только для браузеров Webkit).
CSS
10 | border: 10px solid #eee; |
13 | -webkit-transition: all 0.5s ease; |
14 | -moz-transition: all 0.5s ease; |
15 | -o-transition: all 0.5s ease; |
18 | -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); |
26 | -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); |
29 | -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); |
30 | -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); |
31 | box-shadow: 0px 0px 20px rgba(255,255,255,0.8); |
Заключение
Показанные пять эффектов являются всего лишь
небольшим примером того, что можно творить с CSS. Не бойстесь
экспериментировать. Сочетая между собой простые элементы можно получить
впечатляющий результат.
|
Главная 
