<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Красивый эффект при наведении (:before и :after)

Красивый эффект при наведении (:before и :after)

На этом уроке мы сделаем меню с красивым эффектом при наведении с использованием псевдоэлементов - :after и :before. Что такое псевдоэлементы, мы очень подробно разбирали здесь.

В итоге мы должны получить следующее:

Красивый эффект при наведении (:before и :after)

Сделаем HTML заготовку из простого списка с ссылками внутри.

<ul>
    <li><a href="#">Квартиры</a></li>
    <li><a href="#">Дома</a></li>
    <li><a href="#">Дачи</a></li>
    <li><a href="#">Участки</a></li>
    <li><a href="#">Гаражи</a></li>
</ul>

По умолчанию меню прижато к верхнему левому углу окна браузера. В файле стилей спозиционируем от этого угла на 20% от верхнего края и на 30% от левого края окна браузера, уберем маркеры и отобразим пункты меню горизонтально.

ul {
    position: absolute;
    top: 20%;
    left: 30%;
    list-style: none;
    display: flex;
}

На данном этапе пункты меню прижаты друг к другу, надо между ними создать пространство.

Красивый эффект при наведении (:before и :after)

Делается это с помощью свойства padding и margin с неким числовым значением, которые не работает у строчных элементов, таких как гиперссылка. Поэтому пункты меню должны стать блочными и тогда можно применять к ним padding и margin. Эффект при наведении должен происходить плавно, пропишем свойство transition с задержкой в полсекунды.

ul li a {
    display: block;
    padding: 10px 20px;
    margin: 20px 0; /* Отступы для псевдоэлемента сверху и снизу от меню */
    transition: .5s;
    position: relative;
}

Заготовка в виде меню для демонстрации эффекта неведения, готова. А теперь приступим к самому эффекту. Пока наше меню выглядит так:

Красивый эффект при наведении (:before и :after)

А, чтобы оно было как на картинке, с двумя линиями, которые будут появляться при наведении

Красивый эффект при наведении (:before и :after)

посмотрим на код ниже.

ul li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-top: 1px solid #44c09d;
    border-bottom: 1px solid #44c09d;
    transform: scaleY(2);
    transition: .5s;
}

Почему мы не можем просто нарисовать эти линии в HTML-разметке, а затем их спрятать? Думаю, что неопытный верстальщик так и сделал бы. Но мы будем учиться все делать правильно. Зачем загромождать HTML-страницу лишним кодом, когда существует псевдоэлемент before? До меню (before), мы получили две линии, за счет однопиксельных бордюров и для жирности увеличили их в 2 раза.

Теперь спрячем эти линии, сделав их прозрачными, чтобы при наведении они плавно появлялись.

ul li a:before {
    opacity: 0;
}

Получается, что мы прописываем стили для псевдокласса hover псевдоэлемента before, звучит забавно.

ul li a:hover:before {
    transform: scaleY(1.2); /* Масштабирование уменьшение */
    opacity: 1;
}

Теперь копируем код с before и меняем это слово на after. Убираем из кода свойство opacity, меняем значение у transform и прописываем background.

ul li a:after {
    transition: .5s; /* Плавный переход */
    background: #44c09d;
}

ul li a:hover:after {
    transform: scale(1);
}

Теперь при наведении на пункты меню, появляются прямоугольники того же цвета, все сливается. Пропишем цвет у пунктов меню - белым при hover эффекте.

ul li a:hover {
    color: #fff;
}

И добавим к обоим псевдоэлементам before и after порядок наложения слоев, чтобы этот слой был ниже слоя с hover псевдоклассом и тогда эффект будет виден.

z-index: -1;

Посмотреть, как работает этот эффект при наведении, вы можете на

демо странице.

Код hover эффекта целиком:

Для тех, кто только начал изучать HTML5 и CSS3, будет полезным пройти мой видеокурс.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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