Анимированные элементы всегда привлекают внимание

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

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

1) Ставим этому контейнеру position: relative. В моём случае это:

.stream-table tr td {
position: relative
}

2) Следующим правилом к классу этого элемента добавляем :before, и стилизуем:

.stream-table tr td:before {
content: "\261A \0a Хит!";
font-size: 16px;
position: absolute;
right: -55px;
color: goldenrod;
animation: 1s blink infinite;
}

3) Ставим анимацию в отдельный CSS блок. Если вы делаете это в тренингах, как у меня, то анимацию ставите в самый верх, там где пишется общий CSS:

@keyframes blink {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

У меня так же стоит на .stream-table tr свойство display: flex; для того, чтобы контейнеры внутри tr стали занимать столько пространства, сколько внутри контента, чтобы не было распирания до краёв блока. Так что имейте в виду, если будете ставить на тренинги.

#лёгкая_кастомизация

Получился субботний мем, который просто не мог не запостить 😅

Почти всю неделю занимался тем, что экспериментировал над своим самописным ботом в телеграмме, сделанным на Node JS. Пока что бот умеет делать достаточно примитивные вещи, но я планирую сделать из него что-то очень крутое и функциональное, поскольку в программировании ничем не ограничиваюсь 😁

На следующей неделе будет анонс долгожданного очередного стрима в рамках проекта Train IT. Тема пока что в секрете, озвучу в соответствующем посте 😎

Всем отличных выходных!

А вот и долгожданный анонс моего четвёртого по счёту стрима в рамках клуба Train IT на тему "Секреты параллакса", который стартует 25 мая в 16:00!

▶️https://train-it.ru/frying-layouts◀️

➡️ Мечтаете преобразить проекты в современный презентабельный вид?
➡️ Надоели скучные монотонные блоки на странице?
➡️ Хотите чтобы лендинг радовал глаз и приносил больше прибыли?

Ни для кого не секрет, что увиденное в первый раз оставляет самое сильное впечатление и влияет на формирование последующего мнения: о проекте, об отношении, желании купить что-либо у вас.

Лендинг проекта/продукта/курса — это лицо вашей компании, и просто экологичный менеджер по продажам. Так почему бы не сделать его сразу притягательным?

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

Поймёт даже новичок, ни разу не прикасавшийся к JavaScript! Ну а если вы уже имеете даже самые базовые навыки владения, то будете в шоке от того, насколько просто такие эффекты создаются по моей методике.

В данный момент действует льготная цена до 22 мая до 23:59! А уже 23 мая в 0:00 цена вырастет.

Если на все три вопроса в начале вы ответили "Да" — то я жду вас у себя на стриме 😎

▶️https://train-it.ru/frying-layouts◀️

Важное напоминание❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.

Забавный факт: сейчас фактически нет таких проектов на Геткурсе, которые используют параллакс анимации 😋

Вывод простой: начать предоставлять такую услугу 😎

Чем параллакс-анимации полезны для проекта?
✔️ Сразу же приковывает внимание пользователя, располагая его к проекту.
✔️ Пользователь явно захочет посмотреть, что же ещё есть у вас на странице и прочитает хотя бы минимальное количество контента.
✔️ Это безусловно способствует поднятию конверсии лендинга.
✔️ Нереально круто и красиво ☺️

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

Готовы преобразить проекты? Тогда жду вас у себя на стриме.

В данный момент действует льготная цена до 22 мая до 23:59! А уже 23 мая в 0:00 цена вырастит.

А для владельцев GTFcard льготная цена ещё ниже!

▶️Зарегистрироваться на стрим! ◀️

Важное напоминание ❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.

Делать разработку сложнее — не мой вариант. Если это утверждение подходит и для вас, то я думаю вам понравится то, что я нашел на просторах великого и могучего интернета.

Речь пойдет о сервисе enjoycss.com который может генерировать целые, уже застилизованные шаблоны. У сервиса есть встроенный мощный редактор, который тоже приятно радует своими возможностями. Сервис поможет застилизовать блоки, инпуты, кнопки, сгенерировать текст, бекграунд, тени и многое другое. После того, как всё сделали, можно запросить выдачу кода и по смыслу подставить в Геткурс к своим блокам к нужным классам.

Надеюсь, будет полезно тем, кто пока боится писать код самостоятельно, а красоту наводить хочется 😎

P.S. Пригодится знание английского!
P.P.S. Или же воспользоваться автопереводом страницы 😁

#полезная_фишка

⏳ Друзья, осталось всего 6 часов до окончания действия льготной цены на стрим "Прожарка макетов — Секреты параллакса"!

Регистрация на стрим >>

Сегодня ровно в 0:00 цена изменится на обычную, даже для владельцев GTFcard. Вы ещё можете успеть приобрести участие на стриме по льготной цене. ✅

Регистрация на стрим >>

Важное напоминание ❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.

⌛️ Осталось 3 часа до окончания действия льготной цены, и это последнее напоминание.

Регистрация на стрим >>

Далее вы сможете приобрести участие на стриме по обычной цене до дня проведения стрима (25 мая 16:00). После этой даты приобрести запись будет невозможно. Стримы — это эксклюзив клуба Train IT, и их можно найти в дальнейшем лишь на распродажах клуба 😎

Регистрация на стрим >>

Приобретая участие на стриме, запись останется у вас навсегда в личном кабинете клуба Train IT 😉

Друзья, всем отличного субботнего настроения 😉

А я уже подготовил и опубликовал для вас запись прошедшего стрима (от 25 мая) с материалами по параллаксу, чтобы выходные вы провели с пользой! 😎

Для тех, кто приобретал участие — запись здесь 😉

P.S. Не забудьте авторизироваться в клубе с главной страницы "войти в Личный кабинет" с той почты, с которой вы приобретали участие.

Как всегда лазил по великому и всемогущему интернету и нашел много чего полезного для вас, что слегка скрасит, а может быть и сильно упростит вам жизнь как при вёрстке, так и в повседневной жизни 😎

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

1. Великолепный сервис Color Thief который поможет вам определиться с цветовой гаммой вашего проекта по фотографии. Сервис покажет преобладающие цвета, которые вы сможете взять "пипеткой", или же посмотреть с помощью F12 в панели разработчика, проинспектировав нужный кружочек с цветом.

2. Small Dev Tools поможет в форматировании вашего кода, приведения в нужный вид по стандартам написания, а так же поможет декодировать разные форматы (UTF-8, BASE64, JSON и т.д.). Так же помимо этого присутствует много плюшек, например, генерация собственных QR-кодов! Очень полезный сервис для продвинутых пользователей.

3. Забавный генератор аватарок (VK, Telegram, куда угодно) PFP Maker который может сгенерировать, обработать и украсить вашу фотографию дополненным контентом.

4. Storytale — это база картинок 3D и иллюстраций, которые вы можете скачать бесплатно, а некоторые за простую регистрацию на проекте, и пользоваться в своё удовольствие в ваших проектах.

#полезные_сервисы