<MyRusakov.ru />

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

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

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

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

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

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

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

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

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

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

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

Эффект анимированного неонового свечения у кнопки

Эффект анимированного неонового свечения у кнопки

Шаг 1) Создание HTML-разметки

Сделать кнопку можно разными способами: через тег button, div или a. Я предпочитаю сделать это сразу через ссылку a, поскольку кнопка все равно должна куда-то вести. То есть, без тега a не обойтись и чтобы не писать лишний код, сразу делаем кнопку ссылкой. Здесь важно иметь ввиду, что в CSS-коде нужно отобразить строчный тег a, как блочный.

<a href="#"><span>Button</span></a>

Шаг 2) Позиционирование в центре экрана

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}
body{
    display: flex; / * подключение флексбокс * /
    justify-content: center; / * по горизонтали * /
    align-items: center; / * по вертикали * /
    min-height: 100vh; / * на минимальную высоту экрана * /
    background: #000; / * цвет фона * /
}

Шаг 3) Стилизация кнопки

Задаем кнопке размеры и цвет.

a{
    position: relative;
    width: 250px;
    height: 100px;     line-height: 100px;
    background: #000;
    margin: 10px;
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 4px;
    text-decoration: none;
}

Шаг 4) Стилизация текста на кнопке

a span {
    position: absolute;
    display: block;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    text-align: center;
    background: #0c0c0c;
    color: rgba(255, 255, 255, 0.4);
    transition: 0.5s;
    z-index: 1;
}


Эффект анимированного неонового свечения у кнопки.

Шаг 5) Hover-эффект для текста

При наведении на кнопку, полупрозрачный текст будет становиться ярче, за счет изменения значения c 0.4 до 1 у альфа-канала (rgba).

a:hover span {
    color: rgba(255, 255, 255, 1);
}
a span:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.1);
}


Эффект анимированного неонового свечения у кнопки.

Шаг 6) Рисуем первую градиентную рамку

a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
    animation: animate 20s linear infinite; / * правила для анимации * /
    background-size: 400%;
    opacity: 0;
    transition: 0.5s;
}


Эффект анимированного неонового свечения у кнопки.

Шаг 7) Рисуем вторую размытую градиентную рамку

a:after{
    content: '';
    position: absolute;
    top: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,#fb0094,#00f,#0f0,#ff0,#f00,#fb0094,#00f,#0f0,#ff0,#f00);
    animation: animate 20s linear infinite; / * правила для анимации * /
    background-size: 400%;
    filter: blur(20px);
    opacity: 0;
    transition: 0.5s;
}


Эффект анимированного неонового свечения у кнопки.

Шаг 8) Неоновый эффект при наведении

Неоновая подсветка должна появляться только при наведении на кнопку. Поэтому прячем градиентные рамки, установив им opacity со значением 0. А при наведении меняем значение opacity на единицу.

a:hover:before,
a:hover:after{
    opacity: 1;
}

Шаг 8) Анимируем неоновое свечение

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

@keyframes animate{
    0%
    {
        background-position: 0 0;
    }
    50%
    {
        background-position: 300% 0;
    }
    100%
    {
        background-position: 0 0;
    }
}

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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