Картинки для блога или постов за пару минут ⏱️

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

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

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

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

В 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 и мне стало интересно проверить её на прочность.

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

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

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

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

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

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

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

Бывают моменты, когда даже самое любимое дело вдруг перестаёт зажигать. Так получилось и с магазином Гетшоп: практически все шаблоны, которые я хотела создать, уже реализованы и лежат на полках, закрывая основные задачи по оформлению на GetCourse. А спрос на что-то принципиально новое сейчас минимальный.

И у меня случилась депрессия. 🥺

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

💡 И я нашла! Вайб-кодинг, ИИ, новые технологичные задачи и мой новый проект — гетМост. 🚀

Я собрала его всего за два месяца без найма сторонних разработчиков — тратилась только на обучение для себя и пару подписок на ИИ-сервисы.

Именно этим сейчас живу и хочу делиться с вами дальше. Поэтому количество тем в блоге будет расширяться.

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

🧑‍🎓 Собственно, ради этого я и пошла учиться — сейчас прохожу курсы по вайб-кодингу на Claude Code и промпт-инжинирингу. Новые знания уже помогли мне сэкономить массу времени, сил и денег. За пару месяцев я реально круто прокачалась!

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

Так что оставайтесь со мной и не переключайтесь. 😉

Буду рада, если напишете в комментариях, какие темы по ИИ, технологиям или новому опыту вам особенно любопытны. Буду благодарна за ваши идеи и вопросы! 👇

Делала рекламный ролик. По сюжету у человека сначала жесткий стресс, а потом проблема решается. Под это дело я составила подробный промпт для 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 и так далее) и смотрите, как меняется результат!

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

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

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

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