Новое время — новые темы: как меняется блог и что вас ждёт

Привет, друзья! На связи Настя Соло.

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

Вспомните обычные ссылки: вы навели курсор, и появился «кликабельный палец» или подчеркивание. Это базовый сигнал для мозга, что элемент активен. Точно так же должны вести себя кнопки, поля для ввода и карточки.

Продуманный интерфейс дает отклик на действия. Благодаря этому проект выглядит живым, дорогим и качественным.

В CSS за этот диалог с пользователем отвечают псевдоклассы. Это специальные команды, которые меняют внешний вид элемента в момент, когда мы что-то с ним делаем:

:hover — срабатывает при наведении курсора мыши.

:active — дает отклик в долю секунды самого нажатия (создает физическое ощущение реального щелчка).

transition — команда плавности. Без нее элементы будут меняться резко и дёргано. Она задает время анимации, чтобы эффект выглядел мягко и профессионально.

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

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

CSS
.f-btn.btn, .xdget-button {
background: #ff8a00!important; /* задаем стартовый оранжевый цвет кнопки */
border: 2px solid transparent!important; /* делаем невидимую рамку */
color: #ffffff!important; /* делаем текст белым */
border-radius: 6px!important; /* немного скругляем углы */
transition: 0.4s; /* задаем плавность всех изменений */
}

.f-btn.btn:hover, .xdget-button:hover {
background: #ffffff!important; /* при наведении фон становится белым */
border: 2px solid #ff8a00!important; /* появляется оранжевая рамка */
color: #ff8a00!important; /* текст становится оранжевым */
transform: scale(1.05); /* кнопка плавно увеличивается */
}

.f-btn.btn:active, .xdget-button:active {
transform: scale(0.95); /* при клике кнопка проваливается, имитируя нажатие */
}

Куда вставить этот код на Геткурс?
Чтобы ответить на этот вопрос, нужно понимать, что на платформе существует два разных конструктора:

Новый конструктор — это лендинги и уроки внутри.

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

Именно поэтому в нашем коде мы использовали сразу два обращения, чтобы магия применилась вообще ко всем вариантам кнопок:

.f-btn.btn — сработает для кнопок в новом конструкторе, а также для системных кнопок, которые изначально свёрстаны самим Геткурсом в старом конструкторе.

.xdget-button — сработает специально для блока «Кнопка», который мы можем вручную добавить в старом конструкторе (через меню «Добавить блок»).

Если вы меняете кнопки в НОВОМ конструкторе (на лендингах или внутри уроков):

— Для всех кнопок на странице / в уроке: добавьте стандартный блок CSS из меню блоков и вставьте туда код целиком.

— Для кнопок только в одном конкретном блоке: нажмите кнопку «Стиль» и перейдите в подробные настройки. В поле CSS вставьте этот же самый код.

Если вы меняете кнопки в СТАРОМ конструкторе (например, в списке тренингов):

Нажмите кнопку «Действия» в правом верхнем углу «Настроить вид» и вставьте наш код в поле со значком </> (Стили). Это перекрасит и анимирует все кнопки на этой странице.

Если вы не хотите, чтобы в старом конструкторе окрашивались системные кнопки, просто уберите из кода часть .f-btn.btn вместе с запятой. Оставьте только классы .xdget-button (и их версии для наведения и клика).

Сохраняйте пост, чтобы шпаргалка всегда была под рукой!

И не жалейте лайков, если было полезно

Я постоянно работаю с ИИ и для разных задач выбираю разные инструменты. Ради эксперимента решила протестировать GPT-5 Nano. Им можно пользоваться безлимитно в моем любимом syntx и мне стало интересно проверить её на прочность.

Дала ей классическую задачку на логику: написать стихотворение о любви, где абсолютно ВСЕ слова начинаются строго на букву «П».

Результат меня по-настоящему удивил:

Пылкая Пленительная Поэзия Партнерства.
Плотное Притяжение Превращает Пространство.
Постоянство Проявляет Приятность.
Передача Прикосновений Пленяет.

Перечитала дважды. Слушайте, а ведь звучит красиво и очень стильно — настоящая лирика Серебряного века!

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

Как вам стишок от робота? Делаем следующий эксперимент? Накидывайте в комментарии букву и тему, а я прогоню через нейросеть и покажу, что вышло!

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

Но Suno плевать хотел на ТЗ. Инструментал он делать отказался и выдал песню с вокалом! 🤷‍♀️

Музыку для рекламы я в итоге взяла в другом месте. Но сам трек получился прикольным, и мне стало интересно, о чем там вообще поется. С английским я на «вы», но слово «stress» в тексте четко услышала. Подумала: о, вдруг нейросеть реально спела что-то по теме моего сценария? 📝

И тут началось самое странное. Я пошла к другим нейросетям, чтобы они распознали текст и перевели его. А они все просто оглохли! Утверждают: «Тут только музыка, слов нет».

В итоге пришлось просить знакомого перевести. Спойлер: оказался полный бред 😂🤦‍♀️

В ролик это, конечно, не пошло, но трек получился забавным. Включайте звук, зацените песню, которую ИИ так упорно от меня скрывали!

Привет, друзья! На связи Настя Соло. 👋

Если ваша нейросеть живёт в окне браузера, помогает она вам только на словах. Спросил — получила ответ, а вот применить должны вы сами: копируй, вставляй. Голова есть, рук нет.

Моей я руки отрастила. У меня помощник — универсальный боец. На компьютере делает всю текучку: презентации, собирает отчёты, наводит порядок на ПК, пишет статьи и посты, делает лендинги и многое другое, а на сервере помогает мне строить гетМост.

Как я дошла до «рук». Большую часть своего сервиса я собирала в роли курьера: нейросеть в браузере даёт команду, я несу её в терминал (это окно, где сервером управляют текстом, без кнопок), сервер отвечает, я несу ответ обратно. Туда-сюда, туда-сюда.

Про существование терминальных помощников «с руками» я знала, но не решалась подключать. Слишком много подводных камней: оплата зарубежных сервисов, санкции, подключение и риск блокировок — всё разбирать самой, гарантий ноль. Плюс страх пустить его туда, где живёт твой сервис.

Но копипаст меня всё-таки достал. Я пошла учиться.

Теперь я не курьер, я руководитель: ставлю задачу — помощник сам идёт и делает. КПД вырос в разы: пока он занят, я учусь дальше.

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

🔺 И главное, работа с любым помощником начинается с бэкапов (это когда сохраняется копия предыдущей версии). У меня бэкап перед каждой правкой и всего сервиса — каждую ночь. Что бы ни случилось, есть куда вернуться.

А что бы вы поручили помощнику с руками? 👇

Привет, друзья! На связи Настя Соло 👋

Я знаю, как бывает страшно брать первые заказы на визуальное оформление. Смотришь на пустой экран и думаешь: «А вдруг у меня не получится? Вдруг код сломается?».

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

Сегодня мы с вами создадим такой «вау-эффект» своими руками. Поговорим про псевдоэлементы!

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

Их очень много, поэтому я решила сделать для вас целую серию постов!

Мы разберем разные варианты: текстовые, декоративные (когда мы рисуем плашки или иконки буквально из воздуха), варианты для красивых подчеркиваний и выделений.

А начнем сегодня с текстовых — они работают напрямую с буквами и строками.

Делаем журнальную «буквицу» за 1 минуту

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

Вам не нужно идти в редактор и пытаться выделить первую букву в отдельный текстовый блок разными шрифтами — код сделает всё сам.

Пошаговая инструкция: как вставить код

Давайте попробуем прямо сейчас!

1️⃣ Нажмите на любой блок с текстом и кликните на кнопку «Стиль».

2️⃣ Спуститесь ниже к разделу «CSS класс блока» и в поле «Теги» впишите наш класс: my-text

3️⃣ Затем скопируйте код (он будет чуть ниже).

4️⃣ В этом же меню «Стиль» найдите ссылку «Подробные настройки» (она находится в верхнем углу) и нажмите на нее.

5️⃣ В открывшемся окне просто вставьте скопированный код:

CSS
.my-text::first-letter {
font-size: 350%; /* Размер нашей буквы */
font-weight: 700; /* Жирность буквы от 100 до 900 */
color: #ff6600; /* Замените на любой свой цвет */
float: left; /* Текст будет обтекать букву справа */
margin-right: 10px; /* Отступ от буквы до текста */
line-height: 1; /* Выравнивание */
}

Как только вы сохраните изменения, первая буква вашего текста превратится в стильный акцент.

Попробуйте поиграть с настройками, чтобы посмотреть, как меняется дизайн от изменения одной цифры в коде:

🔹Поменяйте размер (font-size) и цвет (color).

🔹Обязательно протестируйте толщину буквы (font-weight). Значения здесь задаются в цифрах от 100 (очень тонкая) до 900 (очень жирная). Выбирайте круглые значения (100, 200, 300 и так далее) и смотрите, как меняется результат!

Чувствуете это? Вы только что сами, с помощью нескольких строчек кода, сделали крутой дизайнерский элемент! И так работает всё оформление. Глаза боятся, а руки делают.

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

🔥 Кто уже пошел тестировать код на платформе? Жду ваши огонечки и скрины с результатами в комментариях!

#СоветыОтГетшоп

Одной из первых задач при запуске гетМоста было настроить вход для пользователей. Хотела уйти от паролей: просто вводишь почту, на неё приходит шестизначный код, вводишь код — входишь на платформу.

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

Для этой задачи придётся использовать API. Это способ, с помощью которого платформы «разговаривают» друг с другом и передают данные.

Но API — не моя сильная сторона, а мой ИИ-помощник оказалось прекрасно разбирается и в этой теме.

Поэтому мы распределили обязанности: я взяла на себя настройку Геткурса, а он — всё остальное. 🤓

На ГК:
🔹 создала доп. поле пользователя, куда будет записываться код
🔹 сверстала письмо с переменной созданного доп. поля
🔹 настроила воронку, которая запускается по триггеру «событие»: отправляет письмо и добавляет пользователя в группу (для удобной сегментации в дальнейшем)

Дала ИИшке:
🔹 документацию по API Геткурса
🔹 код события и ссылку внешнего вызова из воронки (нода «событие»)
🔹 название созданного доп. поля
🔹 описание логики, что должно происходить.

И вот какая цепочка у нас получилась:

📌 Проверка: пользователь вводит почту. Система проверяет, есть ли он в базе гетМоста. Если в базе его нет, просит зарегистрироваться (нужно для принятия юр. доков).

📌 Генерация кода: логика входа и регистрации одна и та же. Пользователь вводит почту ➡️ гетМост создает 6-значный код и отправляет его по API в ГК.

📌 Передача данных: если пользователя в самом ГК еще не было, мы его там создаем. Если был — работаем с существующим профилем. Записываем код в доп. поле пользователя.

📌 Отправка письма: дергаем событие, и воронка отправляет письмо.

📌 Вход: пользователю приходит письмо, он вводит код на гетМосте. Система проверяет, что код совпал, пускает человека на платформу и запоминает его авторизацию на 14 дней.

И всё это мы собрали за пару вечеров.🔥😎

🔥 Предлагаю вам прямо сейчас протестировать мой вход по коду и посмотреть, как всё работает изнутри!

А если вы продюсер, эксперт или техспец онлайн-школы, то протестируйте и сам сервис — это совершенно бесплатно. Возможно, гетМост — это как раз то решение, которое вы давно искали для своих проектов. 👌

Ведь вы точно знаете, какой хаос сейчас творится в чатах обучения. 🤯 Аудитория разделилась: половина сидит в Телеграме, а половина уходит в МАКС. Кураторам приходится разрываться, сообщения теряются, а вовлеченность падает.

🚀 Чем гетМост поможет вашим курсам и мастер-группам:

🔹 Синхронизация «стык в стык»: вы связываете чат в МАКСе и чат в Телеграме. Пишете в один — сообщение мгновенно дублируется во второй от вашего имени. Ученики общаются там, где им удобно, но видят сообщения друг друга!

🔹 Умное «Сито» для кураторов: больше никакого флуда. Ученик пишет тег (например, #вопрос), и сообщение падает оператору в изолированный блок тикетов. Ни один вопрос не потеряется.

🔹 Безопасность бренда: кураторы отвечают из единого окна гетМоста от имени проекта, а не со своих личных аккаунтов.

Заходите и создавайте свой первый мост — это займет всего 2 минуты, а одна активная связка чатов останется бесплатной навсегда! 🎉

Мне очень важен ваш экспертный взгляд со стороны. Как вам логика входа через Геткурс? И сталкивались ли вы уже с необходимостью объединять Телеграм и МАКС? Жду вас в комментариях! 👇