Шаблоны html5 и css3. Шаблоны HTML5. White - прекрасный шаблон одностраничника
Очень часто на сайтах вы могли встречать изменение или кнопок при наведении. Реализовать задачу позволяет специальный псевдокласс:hover в CSS. Сегодня рассмотрим некоторые приемы позволяющие сделать эту фишку, а ниже опубликуем список наиболее интересных из них (с краткими описаниями/пояснениеми). Все варианты разделим на:
Данные группы весьма условны, т.к. многие примеры пересекаются и являются универсальными, то есть могут встречаться при оформлении разных объектов.
Hover эффект в CSS стилях добавляется справа от элемента следующим образом:
| a: hover { color : red ; } |
a:hover { color: red; }
Чаще всего механизм применяется именно для ссылок дабы изменить их цвет или добавить/убрать подчеркивание. Однако он может быть задан и другим блокам, кнопкам, текстам или использоваться при создании .
| button : hover { background : rgba (0 , 0 , 0 , 0 ) ; color : red ; } .my-picture : hover { opacity : 0.5 ; filter : alpha(opacity= 50 ) ; } |
button:hover { background: rgba(0,0,0,0); color: red; } .my-picture:hover { opacity: 0.5; filter: alpha(opacity=50); }
Современные браузеры одинаково корректно воспринимают CSS hover эффект при наведении, хотя в старых версиях IE 6 и ниже он срабатывает исключительно для линков. Плюс в некоторых источниках говорилось, что этому обязательно нужно указывать в коде .
Кстати, при задании стилей ссылок также дополнительно могут использоваться селекторы:link — для не посещенных еще страниц, :visited — тех, где вы уже были + :active определяет активный сейчас адрес. Важно размещать hover эффект в CSS после:link и:visited, если они существуют.
Перейдем от теории к практике. Ниже представлен список полезных материалов и сниппетов — переходите по ссылкам дабы просмотреть исходники.
Hover эффекты кнопок и ссылок
Как мы уже говорили выше, это самая популярная категория объектов на сайте, где встречается подобный прием. Вот вам несколько вариантов по теме.
Простые примеры для кнопок
Sullivan Buttons
Фишка в том, что при наведении на разные кнопки кроме изменения цвета фона запускается также небольшая анимация с иконками (причем у каждой своя).
CSS Icons on Hover
Подборка из 5ти простых вариантов реализации задачи. Во всех случаях задействованы дополнительные иконки, которые появляются справа/слева от текста либо заменяют его.
Button Hover Effects
По сравнению с прошлым примером эти 12 функций срабатывания выглядят куда интереснее: как визуально, так и в плане кода. Не обошлось без JS.
Nav Hovers
Несколько фишек, которые позволяют сделать более необычные нежели с базовым свойством text-decoration. Фон кнопки дополнительно заполняется разными визуальными эффектами.
Info on Hover
Функциональность всплывающих подсказок сейчас поддерживается во всех браузерах, но вы можете доработать ее под свои нужды. В текущем примере срабатывание псевдокласса происходит для тега dfn, смотрится стильно. Код достаточно компактный HTML + CSS.
Mana Button
Один из самых оригинальных вариантов hover эффекта в блоках — при наведении выполняется словно заполнение его жидкостью. В реализации используется CSS, HTML и SVG. В определенной тематике сайтов данный сниппет однозначно будет находкой.
Hover эффекты для изображений
15 базовых приемов
Не смотря на то, что статья была опубликована достаточно давно методы корректно работают и сейчас. Здесь, наверное, собраны все возможные типовые преобразования для графики: несколько видов зума, повороты, размытие, ч/б, прозрачность, фильтры, сияние и др. Очень полезный материал.
Красивые hover эффекты изображений
Подборка из 30 приятных и плавных действий при наведении на картинку. За счет простых визуальных манипуляций в виде зума, добавления линий создается хороший комплексное впечатление. Местами увеличивается заголовок и «подтягивается» краткое описание. Отличный вариант для портфолио.
Barberpole Hover Animation
Не сложная на первый взгляд анимация, которая в итоге смотрится очень классно и нестандартно.
CSS hover эффекты с определением направления
Отличная подборка сниппетов и кодов по теме находится в статье с css-tricks.com . Все эти примеры объединяет тот факт, что в процессе работы определяется местоположение и направление движения курсора. Это, в свою очередь, позволяет создавать достаточно оригинальные реакции при наведении на элементы страницы:
Во многих сложных решениях Javascript и jQuery для hover эффектов позволяют значительно разнообразить и улучшить результат.
Direction Aware Hover Goodness
Direction Aware Tiles using clip-path Pure CSS
Остальные фишки ищите в оригинальной статье.
Animatism
В этой разработке более 100 простых способов «анимации» изображений или объектов при наведении. С помощью данных функций сможете реализовать разное появление кнопок, заголовков, текстов, социальных иконок и т.п. Есть варианты с изменением отображения картинок, накладками полупрозрачного фона.
По ссылке находится 7 CSS3 hover эффектов заголовков — когда при наведении на изображение, пользователь увидит информационный блок с тайтлом, кратким описанием и ссылкой для перехода. Нельзя сказать, что примеры очень оригинальные, но они однозначно помогут разнообразить статичный контентный проект.
CSS Hover библиотеки
Hover.css
Проект под незамысловатым названием Hover.css содержит коллекцию CSS3 эффектов для ссылок, кнопок, блоков и т.п. Можете использовать готовый код и/или добавлять в него свои модификации. Здесь много интересного: 2D/3D преобразования, работа с фоном и рамками, тени, иконки. Решение доступно в CSS, LESS и Sass форматах.
Imagehover.css
Еще одна библиотека задающая hover эффекты картинкам — в бесплатной версии найдете 44 варианта преобразований (премиальный набор содержит их в 5 раз больше). Тут также поддерживаются LESS и SCSS, весит это дело лишь 19кб. На сайте имеется страница с демонстрацией всех работающих примеров. Предлагается много уникальных фишек, которые не встречались выше.
В проекте более 30 разных приемов для круглых и квадратных по формату объектов. Все они достаточно оригинальные, простых «одноэлементных» действий в виде обычного зума/вылетания практически нет. Реализована задача на чистом CSS3 + HTML (плюс Scss файлы включены). Отличная совместимость с Bootstrap 3, есть документация.
Итого. Надеемся эти css hover эффекты при наведении на картинки, блоки, ссылки и другие элементы страницы помогли вам разобраться в данной теме. Самые удачные, на ваш, взгляд решения можете внедрить в своих сайтах — будь то подключение полноценной библиотеки или просто интеграция небольшого варианта кода.
Если знаете еще какие-то интересные фишки и сниппеты, присылайте URL’ы на них в комментариях. И мы в будущем дополним статью.
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
HTML
Для кнопок будет использоваться очень простой HTML код:
Подписаться
CSS
Также все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
ButtonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; }
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер - она увеличивается, показывая дополнительное сообщение.
Основной код CSS
Для начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
#button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; }
Эффекты CSS3
Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Анимация CSS
Теперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мыши
Осталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
#button1:hover { width: 230px; }
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSS
Код CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
#button2 { background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; }
Эффекты CSS3
Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация практически не отличается от предыдущего примера.
/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Наведение курсора мыши
При наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
#button2:hover { background-color: #ff3434; }
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSS
Основная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в "0 0". При наведении курсора положение сдвигается по вертикали.
#button3 { background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3
В данном примере нет ничего особенного - скругленные углы и тени.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSS
Анимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Наведение курсора мыши
Теперь пришла пора сдвигать фоновое изображение. Начальное положение было "0 0". Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
#button3:hover { background-position: 0px 150px; }
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSS
Код CSS для нашей кнопки.
#button4 { background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3
В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Наведение курсора мыши
В данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.
#button4:hover { margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }
Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.
Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!
Всплывающая картинка при наведении
a.сайт-ssilka:hover+div
Давайте я вкратце объясню главные моменты. Дабы вывести всплывающее изображение нужно обратиться к тегу
с атрибутом src и после знака равно в кавычках прописать путь к изображению, предварительно закачав его в корневую папку сайта.
Тег <а> с обязательным параметром href отвечает за создание и отображение ссылки (в моем примере это текст).
В случае, если элементы сайта сдвинулись, можно задать изображению ширину и высоту, используя свойство width и heigh . Параметры задаются в пикселях.
Атрибут alt позволяет поисковым механизмам более точно распознать, что изображается на картинке.
Для большей наглядности я выделил ту часть кода, которую вы вероятнее всего захотите изменить.
Всплывающий текст при наведении на ссылку
a.сайт-ssilka:hover+div
Смелее!!! Наведи на меня курсор!
Как можно увидеть с примера при наведении на текст всплывает текстовая подсказка.
Исчезновение изображения при наведении на ссылку
a.сайт-ssilka:hover+div
Смелее!!! Наведи на меня курсор!
Для добавления определенного вышеприведенного эффекта достаточно скопировать подходящий вам код и вставить его в текстовый редактор. Таким образом, ссылку со всплывающим/исчезающим изображением можно прописать в любом месте статьи.
Важный момент! Каждый из представленных скриптов не вредит валидности сайта.
Не менее удобной считаю реализацию поставленной задачи путем добавления специального скрипта в файл стилей вашего шаблона, который, как правило, называется style.css.
Всплывающая картинка CSS
position: relative;
Thumbnail:hover{
Thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
border: 1px solid white;
visibility: hidden;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
Thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 60px; /*position where enlarged image should offset horizontally */
Для вывода всплывающего окна при наведении на ссылку, в текст следует вставить следующую ссылку:
Помимо этого ссылку со всплывающей картинкой можно вставить в определенную часть вашего шаблона. Для этого следует внести нижеуказанный код в файл index.php. Это файл, определяющий визуальное расположение элементов сайта.