—»     —»   5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать
  Раздел: CSS/Style Sheets   Комментариев: 9  

5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

Ищете интересный эффект для ссылки при наведении курсора? Можете дальше не искать. Мы постарались за вас, и собрали несколько привлекательных примеров, на которые вам обязательно стоит взглянуть.

Если вам понравился эффект, то вы можете просто скопировать готовый код и использовать его!

Оживите свой веб-сайт!

Различные эффекты при наведении могут привнести свежести на страницы вашего сайта. Ранее для любого эффекта нужно было сталкиваться с javascript, но сегодня, после появления технологии CSS3, всё может делать в обход использования javascript.

Сегодняшние примеры все реализованы и оптимизированы под новые современные браузеры, и обязательно будут в них работать (например, в Mozilla или браузерах семейства WebKit). Мы не можем заверить вас относительно работы в IE, но в самых свежих версиях эффекты точно будут работать как надо. Но не стоит забывать, что для каждого эффекта подготовлен привлекательный вариант отката на случай, если браузер всё-таки не будет поддерживать эффект.

01. Увеличение

5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

Демо: Для просмотра кликайте здесь

Этот эффект отлично работает, если ваши ссылки идут одной линией. Таким образом, когда курсор мыши двигается по ссылкам по очереди, получается очень привлекательный эффект.

Этот эффект очень просто внедрить, причем это можно реализовать несколькими способами. Мы воспользовались методом, когда к каждому изображению добавляется параметр полей, а затем, при наведении курсора мыши, этот параметр убирается. Допустим, параметр полей начинается на 15 пикселях, а при наведении становится 2 пикселя, что приводит к тому, как будто, изображение подпрыгивает. Вы можете также просто использовать этот эффект и с текстом, даже если ссылки расположены вертикально, а не горизонтально.

Переход здесь можно выставлять по своему усмотрению, причем эффект будет также привлекателен без какого-либо перехода. Мы, например, сделали эффект немного плавным, что, как нам показалось, добавит эффекту изюминку.

CSS-код эффекта Bump Up

.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;
}

02. Stack & Grow

5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

Демо: Для просмотра кликайте здесь

Автор этого эффекта, по видимому, хотел добиться некоего эффекта лампы-лавы, так как при наведении курсора мыши на список ссылок, каждое изображение медленно расширяется, а затем возвращается к первоначальному размеру.

Для реализации здесь были использованы изображения размером 400х133 пикселей. Затем они были изменены в размере до 300х100 пикселей посредством CSS, и расширены при наведении курсора мыши. Так как в примере весь список выровнен по центру, новый размер изображений преломлял всё выравнивание. Эту проблему можно решить посредством выставления отрицательных полей в половину ширины изображений в увеличенном размере.

CSS-код для Stack & Grow

/*Example 2*/
#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;
}

03. Fade Text in

5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

Демо: Для просмотра кликайте здесь

Здесь автор хотел создать нечто вроде события по типу javascript, когда вы наводите курсор на один пункт, а эффект отображается на другом. Здесь были взяты текст и изображение, а затем помещены в отдельный div с выравниванием по левому краю. Далее к div’у были добавлены параметры color: transparent и line-height: 0px. Это позволило разместить текст по верхнему краю div’а и вообще спрятать его.

Для того чтобы текст появился вновь, мы просто изменяем цвет и высоту строки. Когда вы наводите на изображение, текст снова появляется. Очень забавный и лёгкий эффект.

CSS-код эффекта Fade Text In

#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;
}

04. Crooked Photo

5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

Демо: Для просмотра кликайте здесь

Этот эффект очень прост, но он отлично подойдёт для галереи миниатюр. Для начала вам нужно создать сетку с изображениями, а затем вращать изображения при наведении курсора мыши на них, что создает привлекательный эффект.

Здесь нужно использовать много новых значений CSS, поэтому стоит рассматривать также вариант отката для более ранних версий браузеров. В нашей галерее будут использованы переходы, трансформации, а также тени блоков, правда, по вашему желанию. Трансформация будет отвечать за вращение изображения, а переходы будут отвечать за мягкий и плавный эффект.

Здесь вы можете применять псевдо-селекторы.

CSS-код для Crooked Photo

#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);
}

05. Fade In and Reflect

5 крутых CSS-эффектов при наведении, которые вы можете просто скопировать и использовать

Демо: Для просмотра кликайте здесь

Этот эффект немного посложнее в реализации, поэтому нам пришлось немного повозиться с ним, чтобы добиться достойного эффекта. Стандартное положение изображения – слегка прозрачное. Затем, когда вы наводите на изображение, уровень прозрачности понижается, и изображение приобретает первоначальный вид, а также появляется небольшое свечение и отражение (только для браузеров семейства WebKit).

К сожалению, отражение – это не совсем переход, поэтому оно появляется сразу, несмотря на то, что остальное содержимое появляется в замедленном темпе.

Если вы запутались в CSS-коде отражений, вы можете узнать об этом побольше в статье Дэвида Уэлша (David Walsh).

CSS-код эффекта Fade In and Reflect

#ex5 {
    width: 700px;
    margin: 0 auto;
    min-height: 300px;
}

#ex5 img {
    margin: 25px;
    opacity: 0.8;
    border: 10px solid #eee;

    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;

    /*Reflection*/
    -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;

   /*Reflection*/
  -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)));

   /*Glow*/
  -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);
}

Заключение

Этих 5 примеров должно быть достаточно для вдохновения вас на создание нечто собственного. Помните, что вы всегда можете поэкспериментировать с уже готовыми примерами, а затем рассказать нам о них.

Если вы встречали другие привлекательные эффекты где-то в сети, то, пожалуйста, расскажите нам и остальным читателям об этом.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 85222   |   Оставлено комментариев: 9
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 июня 2011 @ 17:43
Написал: Стас — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
ПРИКОЛЬНЫЕ! ВОЗЬМУ!
Комментарий #2: 8 июля 2011 @ 13:16
Написал: Simon — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
а с чего все начиналось... скоро можно будет КСС называть языком программирования 8-)
Комментарий #3: 7 октября 2011 @ 12:16
Написал: VURDIK — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо дорогой товарищ!
Комментарий #4: 20 августа 2012 @ 16:07
Написал: Alex — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Прикольно и оказывается очень просто. Молодцы, спасибо.
Комментарий #5: 24 января 2014 @ 08:37
Написал: sasha — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
спасибо! вы очень классные!
Комментарий #6: 18 мая 2014 @ 11:47
Написал: Ирина — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо большое, эффекты действительно смотрятся круто. Очень приятно, что описание и инструкции четкие , понятные и без "ой, а там я забыл поставить запятую..".
Комментарий #7: 16 декабря 2014 @ 07:57
Написал: VVX — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
в Опера 12 НЕ РАБОТАЕТ, в Сафари 3.1.2 НЕ РАБОТАЕТ(при этом работая в Хром, что на том-же движке) ! просто появление без анимации :( а вот для Firefox префикс можно было даже не добавлять - там работает как часики и без него..
Комментарий #8: 5 апреля 2016 @ 12:18
Написал: www.dogica.com — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошая статья
спасибо за инфу
Комментарий #9: 30 июня 2016 @ 00:07
Написал: Юлия — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за статью! Для Wordpress к стати плагин есть чтобы подобные анимации делать.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2020    »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
2930