<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

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

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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