Автор

04 12.2015
Креативные hover эфекты

Креативные hover эфекты


Сегодня мы бы хотели поделиться некоторыми экспериментальными и творческими hover эффектами с вами. Идея заключается в использовании псевдо-элементов и анимировать их, чтобы создать тонкий и современный эффект. В примерах мы используем эффект наведения, но вы могли бы также использовать для себя эти эффекты на кнопки или в качестве первоначальной анимации.

 

ДЕМО
ИСХОДНИКИ

 

 

 

Обратите внимание, что псевдо-элементы переходов не работают в любом браузере. Лучше смотреть в Chrome и Firefox.

 

В большинстве случаев HTML - это просто nav с якоря:

<nav class="cl-effect-13">
    <a href="#">Beleaguer</a>
    <a href="#">Lassitude</a>
    <a href="#">Murmurous</a>
    <a href="#">Palimpsest</a>
    <a href="#">Assemblage</a>
</nav>

Но для некоторых специальных эффектов мы можем использовать данные для атрибута повторяя Текст ссылки в псевдо-элемент:

<nav class="cl-effect-11">
    <a href="#" data-hover="Desultory">Desultory</a>
    <a href="#" data-hover="Sumptuous">Sumptuous</a>
    <a href="#" data-hover="Scintilla">Scintilla</a>
    <a href="#" data-hover="Propinquity">Propinquity</a>
    <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

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

<nav class="cl-effect-10">
    <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
    <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
    <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
    <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
    <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

Пример для эффекта заключается в следующем стиле. Он позиционирует псевдо-элемент на сам текст ссылки и при наведении курсора мыши, исчезает путем масштабирования его (как в структуре второго блока HTML):

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	transform: scale(0.9);
	opacity: 0;
}

Мы надеемся, что эта коллекция дает вам некоторое вдохновение для создания своих проектов.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

23 04.2013
Креативные hover эфекты

На просторах интернета можно не раз увидеть подобную версию галереи, но сегодня мы, все таки, решили уделить урок по созданию этой полноэкранной  галереи для сайта с помощью jQuery.  Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз. Вот как все это выглядит..


02 04.2013
Креативные hover эфекты

На нашем блоге по веб-дизайну, мы уже не раз приводили примеры как можно создать красивые модальные окна с помощью различных приемов. Сегодня мы рассмотрим как это можно сделать с помощью маленького, но очень функционального плагина leanModal, этот маленький плагин имеет минимальные настройки, по этому им легко пользоваться.  Плагин не использует никаких изображений и отлично подходит для вывода форм регистрации или панелей сообщений.


18 05.2013
Креативные hover эфекты

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


06 06.2013
Креативные hover эфекты

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close