5 эффектов для псевдо класса :hover
Эффекты при наведении курсора мыши на объект придают любому сайту динамичный и живой вид. Обычно для них используется код JavaScript, но с наступлением CSS3 можно уже использовать только средства стилей.
Приведенные в данном материале эффекты работают в современных браузерах. Поддержка IE зависит от версии и перед применением в реальном проекте надо провести тщательное тестирование.
Ссылки на демонстрационные материалы находятся под картинками.
Подёргивание вверх
Данный эффект отлично работает, когда у вас есть несколько выравненных по горизонтали элементов. Проведение курсора мыши вдоль такой линейки порождает волну.
Его очень просто сделать. Для каждого элемента определяется поле и при наведении курсора мыши размер поля уменьшается. Начальное значение поля 15px, уменьшается оно до 2px, что заставляет изображение "подпрыгивать вверх". Данный эффект можно использовать и для текста в списке.
Свойство transition используется здесь в качестве дополнения, так как эффект отлично выглядит и без него. Оно придает гладкости эффекту.
CSS
.ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } .ex1 img:hover { margin-top: 2px; }
Масштабирование
При наведении курсора мыши каждое изображение медленно увеличивается в размерах, а при потере фокуса - возвращается к своим оригинальным размерам.
Для данного эффекта используется набор изображений размером 400х133 px. Затем они уменьшаются в размерах в коде CSS до 300х100 px и расширяются при наведении курсора мыши. Используется центрирование по горизонтали, и изображение с новым размером может все испортить, поэтому применяется отрицательное значение поля равное половине ширины.
CSS
#container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; }
Проявляющийся текст
Данный эффект очень напоминает использование JavaScript, когда при наведении курсора мыши на один объект проявляется другой. Для его получения изображение и текст помещаются в один контейнер div
, а затем все смещается влево, чтобы оба элемента находились на одном уровне. Затем применяем свойства color: transparent и line-height: 0px для элемента div
. Таким образом текст помещается вверх элемента div
и скрывается.
Для проявления текста при наведении курсора мыши, мы просто изменяем цвет и высоту строки. Так создается эффект масштабированного проявления текста.
CSS
#ex3 { width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex3:hover { line-height: 133px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }
Наклон изображения
Это один из простейших, но очень интересных эффектов для галереи миниатюр. В его основе лежит создание массива избражений и поворот той картинки, над которой находится курсор мыши.
Для данного эффекта используется много новых, специфичных для конкретного браузера свойств CSS, поэтому использование в старых браузерах не пройдет. Галерея использует тени, переходы и трансформации.
Если есть желание еще более разнообразить эффект, то можно исопльзовать псевдо селекторы для вращения иззображений под разными углами и в разные стороны.
CSS
#ex4 { width: 800px; margin: 0 auto; } #ex4 img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex4 img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
Свечение и отражение
Это замечательный и сложный эффект. Изначально изображения имеют небольшую прозрачность.Затем, когда на него наводится курсор мыши, прозрачность полностью убирается, появляется свечение вокруг и отражение (только для браузеров Webkit).
CSS
#ex5 { width: 700px; margin: 0 auto; min-height: 300px; } #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Трансформацияя*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Отражение*/ -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))); } #ex5 img:hover { opacity: 1; /*Отражение*/ -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))); /*Свечение*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }
Заключение
Показанные пять эффектов являются всего лишь небольшим примером того, что можно творить с CSS. Не бойстесь экспериментировать. Сочетая между собой простые элементы можно получить впечатляющий результат.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ilDzfoSb-60/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Если ты рождён без крыльев, не мешай им расти. (Коко Шанель / ЖИТЕЙСКАЯ МУДРОСТЬ ) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.