<MyRusakov.ru />

Создание приложений для Android с нуля

Создание приложений для Android с нуля

Данный курс научит Вас создавать приложения любой сложности для Android. Курс состоит из 16-ти разделов, из которых Вы узнаете, как создавать свои собственные приложения для Android.

В курсе содержится вся необходимая теория, а также множество практических примеров, в том числе, и из моей личной практики.

Просмотрев данный курс и выполнив упражнения из него, Вы сможете создавать приложения любой сложности для самой популярной мобильной ОС в мире - Android.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS эффект при наведении на ссылку

CSS эффект при наведении на ссылку

Данный эффект хорошо подходит при наведении на ссылки в навигационных меню или в пагинациях. Ссылки помещены в рамки определенного цвета, при наведении на которые, рамки меняют цвет и слегка перемещаются. Смотрится такой эффект очень оригинально.

CSS эффект при наведении на ссылку

HTML-разметка

У нас меню будет горизонтальное, поэтому создаем четыре ссылки внутри тега nav. Для того, чтобы создать необходимые отступы, оборачиваем меню навигации в div с классом container. Вот и все, HTML разметка создана.

<div class="container">
  <nav class="link-up">
    <a href="#">Fama</a>
    <a href="#">Fortune</a>
    <a href="#">Gloria</a>
    <a href="#">Victoria</a>
  </nav>
</div>

Пишем CSS код

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

@import url(http://fonts.googleapis.com/css?family=Lato:400);

Для всех псевдоэлементов указываем размер бокса box-sizing. Это нужно для того, чтобы внутренние отступы и рамка не влияли на ширину элемента.

*:after,
*::before {
  box-sizing: border-box;
}

Стилизация класса container

Зададим отступы со всех сторон от края браузера.

padding: 2.1em;

Содержимое контейнера (меню навигации) выравниваем по центру.

text-align: center;

Пропишем название шрифта, второй шрифт запасной.

font-family: 'Lato', sans-serif;

Зададим цвет фона.

background: #435a4b;

Стилизация ссылок меню навигации nav

Устанавливаем relative для позиционирования его дочерних элементов относительно его самого.

position: relative;

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

display: inline-block;

Задаем поля и отступы.

margin: 14px 24px;
padding: 9px 19px;

Остальные свойства тега nav достаточно простые и интуитивно понятные, отвечающие за внешний вид ссылок.

Заготовка из ссылок создана, можно приступать к реализации эффекта при наведении на ссылку. Мы не просто так к тегу nav приписали класс .link-up, сделали мы это специально для псевдоэлементов before и after, которые будут применяться к тегу ссылки a. Да и сам эффект построен исключительно на свойствах, применяемых к псевдоэлементам.

Псевдоэлементы after и before

.link-up a::before,
.link-up a::after

Синяя рамка вокруг ссылок на самом деле не настоящая, а псевдоэлемент before. Давайте разберём, какие свойства были использованы.

Синяя рамка строго привязана к ссылке, она как-бы накладывается на текст ссылки сверху.

Пустой content обязательный атрибут, без него рамки не будет видно. Визуализация рамки:

border: 2px solid #364856;
content: ' ';

Плавный переход при наведении на ссылку обеспечивает свойство.

transition: transform 0.4s, opacity 0.4s;

Рисуем белую рамку - after

Синяя рамка готова, теперь рисуем белую рамку, сдвигаем её на несколько пикселей по X и Y осям. Таким образом, чтобы белая рамка не повторяла контуры синей рамки и прячем её, делаем прозрачной. Ведь она должна появиться только при наведении на ссылку.

.link-up a::after {
  transform: translateY(-8px) translateX(7px);
  opacity: 0;
  border-color: #ffffff;
}

Наведение на рамку – hover effect

При наведении синяя рамка исчезает.

.link-up a:hover::before,
.link-up a:focus::before {
  transform: translateY(4px) translateX(-4px);
  opacity: 0;
}

А белая рамка появляется и делает движение вниз.

.link-up a:hover::after,
.link-up a:focus::after {
  opacity: 1;
  transform: translateY(0px) translateX(0px);
}

Посмотреть результат и код эффекта при наведении целиком:

See the Pen Hover Link Effect by porsake (@porsake) on CodePen.

Для новичков, было бы хорошо пройти мой видеокурс.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.