<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

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

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

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

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

HTML код

HTML разметка состоит из элементов маркированного списка, внутри блока div.

<div class="list">
    <h2>List Item Hover Effect</h2>
    <ul>
        <li><span>Lorem ipsum dolor sit amet</span></li>
        <li><span>Consectetur adipisicing elit</span></li>
        <li><span>Ut labore et dolore magna aliqua</span></li>
        <li><span>Ut enim ad minim veniam</span></li>
        <li><span>Quis nostrud exercitation ullamco</span></li>
        <li><span>Laboris nisi ut aliquip ex</span></li>
    </ul>
</div>


CSS-эффект при наведении курсора на элемент списка.

CSS код

Поместим наш список в центре экрана.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    min-height: 100vh;
}
.list{
    position: relative;
}
.list h2{
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.list ul{
    position: relative;
}

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

.list ul li{
    position: relative;
    left: 0;
    color: #FCE4EC; / * цвет текста * /
    list-style: none; / * убираем черные маркеры * /
    margin: 4px 0; / * пространство между элементами * /
    border-left: 2px solid #F50057; / * стилизация рамки * /
    transition: 0.5s; / * плавный переход * /
    cursor: pointer;
}


CSS-эффект при наведении курсора на элемент списка.

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

.list ul li:hover{
    left: 10px;
}


CSS-эффект при наведении курсора на элемент списка.

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

.list ul li span{
    position: relative;
    padding: 8px;
    padding-left: 12px;
    display: inline-block; / * отобразить как блочный * /
    z-index: 1;
    transition: 0.5s;
}


CSS-эффект при наведении курсора на элемент списка.

Нарисуем розовую полосу, используя псевдоэлемент before и скроем ее, установив нулевой масштаб по оси X. Свойство transform-origin задает направление трансформации. При наведении курсора на элемент увеличим масштаб на единицу. В результате получится интересная трансформация.

.list ul li:hover span {
    color: #111;
}
.list ul li:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f50057;
    transform: scaleX(0); / * скрыть полосу * /
    transform-origin: left; / * трансформация относительно левого края * /
    transition: 0.5s;
}
.list ul li:hover:before{
    transform: scaleX(1);
}


CSS-эффект при наведении курсора на элемент списка.

Посмотрите пример на CodePen

Хорошие знания по CSS-свойствам мы можете подчерпнуть из моего видеокурса "Верстка сайта с нуля 2.0".

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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