—»     —»   Разрабатываем различные стили эффектов при наведении при помощи чистого кода CSS3
  Раздел: Руководства   Нет комментариев  

Разрабатываем различные стили эффектов при наведении при помощи чистого кода CSS3



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

Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Это отличные новости для тех, кто не очень дружит с javascript. У вас также есть возможность создавать незначительны анимации при помощи таких свойств CSS3 как transition и transform. Эта технология поддерживается большинством современных браузеров, а также устаревшими браузерами вроде IE 8, и мы можем использовать условные браузерные префиксы и комментарии в некоторых случаях, когда поддержка того или иного свойства отсутствует.

Ранее мы уже рассказывали вам о CSS transform, а также представляли несколько руководств, связанных с CSS 3D transform. В качестве быстрого знакомства с CSS3 transition предлагаем вам следующий пример кода. Он довольно прост: ссылка с уровнем непрозрачности 50%, а при наведении курсора уровень поднимается до 100%. Здесь можно видеть 2 простых состояния уровня непрозрачности – 50% и 100%.

	a {
opacity: 0.5;
}

a:hover {
opacity: 1;
}

Что если вам нужно увеличить или уменьшить уровень непрозрачности с 50 до 100% или наоборот? Мы можем сделать это посредством CSS3 transition. Мы воспользовались следующим переходом: all 300ms ease-out; (вам понадобятся префиксы для разных браузеров), и в результате получили эффект, когда при наведении курсора мыши уровень непрозрачности увеличивается с 50 до 100%. Довольно клево, не правда ли? Opacity – это всего лишь один из множества CSS-атрибутов, и попробуйте просто представить, что можно реализовать посредством остальных?

	a {
opacity: 0.5;
transition: all 300ms ease-out;
}

a:hover {
opacity: 1;
}

Это CSS3-руководство покажет вам, как можно создать простой и элегантный эффект при наведении курсора по миниатюре изображения. Кроме того, при наведении также будет показываться дополнительная информация. Мы разработали 5 разных стилей – одна строка, двойная строка, сверху и снизу, увеличение и вращение. У всех этих эффектов довольно схожая HTML-разметка, а также базовый код CSS. Основные отличия заключаются в оформлении раздела с информацией.

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

Разрабатываем различные стили эффектов при наведении при помощи чистого кода CSS3

HTML-код

Вот так будет выглядеть основная структура HTML-кода. Весь текстовый контент будет обернут классом .item-hover. Для запуска всех эффектов мы будем использовать псевдо-код для :hover - .item-hover.

<div class="item">
<a class="item-hover" href="{URL}" target="_blank">
<div class="item-info">
<div class="headline">
Caption Put Here
<div class="line"></div>
<div class="date">February 29, 2014</div>
</div>
</div>
<div class="mask"></div>
</a>
<div class="item-img"><img src="{IMAGE PATH}" alt="" /></div>
</div>

Вот так будут выглядеть слои просмотров в HTML-разметке.

Разрабатываем различные стили эффектов при наведении при помощи чистого кода CSS3

CSS-код

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

Нам нужно будет воспользоваться всеми необходимыми браузерными префиксами для корректной работы transition, transform и opacity.

.item {
text-align:center;
float:left;
margin:5px;
position:relative;
}

.item,
.item-hover,
.item-hover .mask,
.item-img,
.item-info {
width: 300px;
height: 225px;
}

.item-hover,
.item-hover .mask,
.item-img {
position:absolute;
top:0;
left:0;
}

.item-type-zoom .item-hover {
z-index:5;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity:0;
cursor:pointer;
display:block;
text-decoration:none;
text-align:center;
}

.item-type-zoom .item-info {
z-index:10;
color:#ffffff;
display:table-cell;
vertical-align:middle;
position:relative;
z-index:5;
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

.item-type-zoom .item-info .headline {
font-size:18px;
width:75%;
margin:0 auto;
border:4px solid #ffffff;
padding:10px;
}

.item-type-zoom .item-info .line {
height:1px;
width:60%;
margin:15px auto 10px auto;
background-color:#ffffff;

}

.item-type-zoom .item-info .date {
font-size:14px;
font-style:italic;
}

.item-type-zoom .item-hover .mask {
background-color:#000;
opacity:0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

z-index:0;
}

.item-type-zoom .item-hover:hover {
opacity:1;
}

.item-type-zoom .item-hover:hover .item-info {
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
transform: scale(1,1);
}

.item-img {
background-color:#7a548f;
z-index:0;
}

В завершение

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

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

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4894   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031