гетСоло | Мастерская онлайн-проектов

Развеиваем страх кода. Часть №2. Анимация при взаимодействии (псевдоклассы) Привет, друзья! На связи Настя Соло. Главная задача любой анимации в веб-интерфейсе — дать пользователю обратную связь. Человек должен сразу считывать, куда можно нажать и сработал ли его клик. Вспомните обычные ссылки: вы навели курсор, и появился «кликабельный палец» или подчеркивание. Это базовый сигнал для мозга, что элемент активен. Точно так же должны вести себя кнопки, поля для ввода и карточки. Продуманный интерфейс дает отклик на действия. Благодаря этому проект выглядит живым, дорогим и качественным. В 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 вставьте этот же самый код. Если вы меняете кнопки в СТАРОМ конструкторе (например, в списке тренингов): Нажмите кнопку «Действия» в правом верхнем углу ➡ «Настроить вид» ➡ и вставьте наш код в поле со значком </> (Стили). Это перекрасит и анимирует все кнопки на...

🤔А кем вы были в «прошлой жизни»? Привет, друзья! На связи Настя Соло. 👋 Недавно задумалась: ведь до того, как мы все с головой ушли в онлайн, у большинства из нас была совсем другая реальность. Другие профессии, совершенно другие цели и планы на жизнь. Никто же не рождается сразу техспецом, продюсером или дизайнером. У каждого за плечами свой уникальный, а иногда и очень неожиданный путь в интернет-профессии. 🎢 Решила вспомнить свой. Спойлер: побросало меня изрядно! Мало кто знает, но у меня есть красный диплом повара-пекаря-кондитера четвертого разряда. Да-да, я умею не только верстать красивые страницы для магазина Гетшоп, но и профессионально печь торты! А дальше был настоящий квест по карьерной лестнице. Я торговала на рынке, работала официантом, была секретарем и согласовывала проекты по строительству и реконструкции зданий. 📈 Целых 9 лет я отдала работе в Билайне. Прошла долгий путь с самых низов — от простого специалиста колл-центра до руководителя отдела по работе с партнерами, оттоку и клиентскому сервису в Московском регионе. «Кто бы мог тогда подумать, что девушка с дипломом кондитера и опытом работы на рынке станет заядлым технарем и будет запускать проекты на Геткурсе?» 🤗 Мне кажется, такие истории очень сближают. Они показывают, что мы все пришли сюда разными дорогами, принесли свой жизненный опыт, и именно поэтому делаем такие классные проекты сейчас. Коллеги, давайте устроим вечер знакомств! Расскажите в комментариях: кем вы работали до того, как перешли в онлайн? Какая профессия была у вас в «прошлой жизни»? 👇 #Другое

Как быстро поменять цвета в шаблонах Гетшоп📺 В большинстве шаблонов вы можете легко изменить цвета, шрифты, фон и некоторые другие параметры. Мы специально закладываем эту возможность, чтобы любой шаблон можно было адаптировать к вашему стилю и задачам — без долгих доработок и сложных настроек. Чтобы быстро и наглядно менять оформление под себя, мы предлагаем использовать браузерные расширения для работы со стилями. Сегодня расскажем, как это работает на примере расширения Magic CSS —https://github.com/webextensions/live-css-editor но вы можете пользоваться и аналогами. 1⃣С чего начать: ➖Прежде, чем начать менять цвета, установите приобретенный шаблон себе на Геткурс. 2⃣Перейдите к элементам которые будете менять. ➖Например, если меняете оформление тренингов, то перейдите на страницу где видно оформление тренингов. ➖Находясь на нужной странице запустите расширение. 3⃣Вставляем код который будем менять: ➖Если вы меняете цвета в шаблонах из коллекций — скопируйте единый файл управления темой и вставьте его целиком в рабочую область расширения. ➖Если вы меняете цвета в других шаблонах — скопируйте CSS шаблона и вставьте его в рабочую область расширения. 4⃣Меняем цвета: ➖Находите переменные того элемента, который хотите поменять — все они подписаны для удобства и подбираете цвет прямо в редакторе Magic CSS. Например, хотите изменить цвет кнопки в тренингах — находите соответствующие переменные и задаёте свои цвета. Все изменения вносимые в расширение вы будете видеть сразу на странице. О том, как обозначаются цвета и как сделать свой градиент мы рассказывали в предыдущем посте. 5⃣Сохраняем результат: ➖Когда подобрали нужные цвета, просто перенесите обновленный код на GetCourse. Если вы делали оформление с помощью коллекций и хотите использовать разные цвета для разных тренингов, посмотрите наш пост «С единым файлом управления темой 20% усилий дают 80% результата!» о том, как оптимизировать этот процесс. 💘Было полезно? Ставьте лайк, пишите вопросы и делитесь впечатлениями — ваши реакции помогают нам делать материалы ещё лучше! #СоветыОтГетшоп #Коллекции

Развеиваем страх кода. Часть №1 Привет, друзья! На связи Настя Соло. 👋 Я знаю, как бывает страшно брать первые заказы на визуальное оформление. Смотришь на пустой экран и думаешь: «А вдруг у меня не получится? Вдруг код сломается?». Чтобы побороть этот страх, нужно просто начать с маленьких шагов. Взять готовый кусочек кода, скопировать, вставить — и своими глазами увидеть классный результат. Сегодня мы с вами создадим такой «вау-эффект» своими руками. Поговорим про псевдоэлементы! Звучит как сложное заклинание, но на деле это гениальный инструмент в дизайне. Псевдоэлементы позволяют менять внешний вид или добавлять новые детали на страницу вообще без создания лишних блоков. Их очень много, поэтому я решила сделать для вас целую серию постов! Мы разберем разные варианты: текстовые, декоративные (когда мы рисуем плашки или иконки буквально из воздуха), варианты для красивых подчеркиваний и выделений. А начнем сегодня с текстовых — они работают напрямую с буквами и строками. Делаем журнальную «буквицу» за 1 минуту Вы наверняка видели в глянцевых журналах или на дорогих сайтах прием, когда первая буква абзаца огромная и красивая, а остальной текст ее элегантно обтекает. Вам не нужно идти в редактор и пытаться выделить первую букву в отдельный текстовый блок разными шрифтами — код сделает всё сам. Пошаговая инструкция: как вставить код 👩‍💻 Давайте попробуем прямо сейчас! 1⃣ Нажмите на любой блок с текстом и кликните на кнопку «Стиль». 2⃣ Спуститесь ниже к разделу «CSS класс блока» и в поле «Теги» впишите наш класс: my-text 3⃣ Затем скопируйте код (он будет чуть ниже). 4⃣ В этом же меню «Стиль» найдите ссылку «Подробные настройки» (она находится в верхнем углу) и нажмите на нее. 5⃣ В открывшемся окне просто вставьте скопированный код: .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 и так далее) и смотрите, как меняется результат! Чувствуете это? Вы только что сами, с помощью нескольких строчек кода, сделали крутой дизайнерский элемент! И так работает всё оформление. Глаза боятся, а руки делают. В следующих постах мы продолжим разбирать магию псевдоэлементов, чтобы вы собрали свою копилку крутых фишек. 🔥 Кто уже пошел тестировать код на платформе? Жду ваши огонечки и скрины с результатами в комментариях! 👇 #СоветыОтГетшоп