Каморка Геткурсовода 💻 | Канал Максима Елисеева
2.38K subscribers
194 photos
18 videos
10 files
107 links
Остались вопросы? Пишите — @Isagaya

Этот уютный канал посвещён фишкам и нестандартным решениям по дизайнам, интерфейсам и функционалам платформы от Куратора школы Магии Геткурса — Максима Елисеева.

Мой второй канал обо всём - https://t.me/closetmax ;)
Download Telegram
Тема кнопок всегда будет актуальна, ведь как-то надо привлекать внимание пользователей, верно? 😌

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

Такой эффект достигается с помощью радиального градиента на самой кнопке. Вот пример CSS, который используется для кнопки на скриншоте к посту, и прочие стили, которые задают подобный формат кнопке:

.btn {
background: radial-gradient(53.6% 103.93% at 28.4% 50.81%, #d58ecf 0%, #bb4056 100%);
border-radius: 10px;
font-size: 20px;
letter-spacing: -0.02em;
text-transform: uppercase;
padding-left: 45px;
padding-right: 45px;
}


В то же время важно в настройках кнопки оставить поля цветов пустыми (скриншот №2), и применить настройки. Тогда данный CSS вполне хорошо ляжет на саму кнопку. Вы можете поиграться и поставить свои цвета, которые являются главными у вас в проекте 😊

#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Разбавим субботний вечер подборкой самых ужасных UI для регулирования громкости.

P.S.: Когда сказали, что проект должен "выделяться" среди всех по дизайну 😆
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, друзья! И конечно же всех с наступившей пятницей и надвигающимися выходными.

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

Такой пост покаяния получился 😅

Всех с наступающими выходными, и отличного настроения! 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
В этот четверг (15 февраля), как вы знаете, я участвую на самой "мясной" конференции FARSH. Почему "мясной"? Потому что там будут самые сочные, как идеально приготовленный стейк технологии, которые помогают техническим специалистам и продюсерам привнести в проект технический БУМ.

Как я писал ранее, моя тема не является чем-то прям грандиозным из мира "высоких технологий". Я буду рассказывать про то, как кастомизировать скучные чекбоксы и радиокнопки на Геткурсе, ведь у самого Геткурса нет такой возможности в принципе. Зато эту самую боль я вижу во многих чатах, особенно там, где верстальщику или спецу дали необычный дизайн формы, где вместо чекбоксов и радиокнопок используются какие-то по истине красивые элементы выбора 😉

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

А тут скидка от меня на конференцию FARSH -10% !
Please open Telegram to view this post
VIEW IN TELEGRAM
Зачастую мне хочется поделиться бОльшим, но в основную тематику данного канал это было бы не актуально 😉

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

В общем, приглашаю на мой второй канал — Чулан Макса Елисеева 😦
Please open Telegram to view this post
VIEW IN TELEGRAM
Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦

Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно 😉

В CSS стили блока с формой ставим:

.form-content .builder {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.part-userField {
flex: 1 0 49%;
}

.part-header, .part-button {
flex-basis: 100%;
}


И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство flex-basis: 100%;

Должно выглядеть так:

.part-header, .part-button, .вашкласс {
flex-basis: 100%;
}


#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Жиза?

Всех с пятницей, друзья!
И отличных выходных 😎
Привет, друзья!

Быть может кто-то ещё не знает, но я сделал страницу с бесплатным уроком оформления личного кабинета Геткурса к празднику 8-го марта

Эту страницу буду периодически пополнять новым материалом, так что следите 😊

➡️ Посмотреть урок тут ⬅️
Please open Telegram to view this post
VIEW IN TELEGRAM
Наши милые девушки! Я поздравляю вас с Международным женским днём 8 марта! И желаю чтобы каждая из вас была такая же красивая, обоятельная, чтобы доход вырос троекратно, и конечно же всегда были счастливы. Ну а мы, мужчины, сделаем всё, чтобы создать для вас счастье 😌 🌸🌸💐
Please open Telegram to view this post
VIEW IN TELEGRAM
Кстати, если вы хотите прокачать свой скилл владением Геткурса, в частности овладеть красивыми эффектами на кнопках, поставить им анимации при наведении, сделать их необычной формы и заставить выполнять виртуозные трюки, то в Клубе Магии с понедельника (11 марта) стартует бесплатный марафон «Нажми на кнопку», который будет длиться 5 дней!

А это значит, что за 5 дней вы посмотрите 5 потрясающих практических уроков и виртуозно овладеете магией кода для преображения кнопок!

▶️ Регистрация на бесплатный марафон ◀️

А теперь всё вместе:
Подойдёт для начинающих, особенно тем, кто желает овладеть красивым оформлением
Один из уроков марафона представлен лично мной
Старт марафона 11 марта (понедельник)
Зарегистрироваться можно здесь 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉

Есть несколько состояний корзины: закрытая и раскрытая.

Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект 😏

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

Сами стили будут ниже этого поста. Так как они не вмещаются в него 😆

#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
/*** Стили закрытой корзины ***/

.lt-basket.basket-collapsed {
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 0 3px 5px 1px lightgrey;
}

.lt-basket .total-cost-str {
font-size: 1.3em;
font-weight: bold;
}

.lt-basket .old-total-cost-str {
color: #bbb;
}

/*** Общий стиль кнопок ***/

.lt-basket .buttons button,
.lt-basket .total-view button {
border: none;
background: #fff;
color: #777;
box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 15px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1),
0 5px 10px rgba(0, 0, 0, 0.1),
0 10px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

.lt-basket .total-view button {
position: absolute;
left: 50%;
transform: translate(-50%, 50%);
margin-left: 0 !important;
}

.lt-basket .buttons button:focus,
.lt-basket .total-view button:focus {
outline: none;
}

.lt-basket .buttons button:active:focus,
.lt-basket .total-view button:active:focus {
box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
inset 0 5px 10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
inset 0 5px 10px rgba(0, 0, 0, 0.15);
background-color: #fff;
color: #777;
outline: none;
}

/*****************************************************/

/*** Стили раскрытой корзины ***/

.lt-basket {
border-radius: 10px;
background: #fff;
color: #000;
box-shadow: 0 3px 5px 1px lightgrey;
}

.lt-basket .positions-table {
color: #777;
}

.lt-basket .positions-table .form-control {
height: 37px !important;
width: 37px !important;
border-radius: 50%;
}

.lt-basket .positions-table .old-total-price {
color: #bbb;
}

.lt-basket .positions-table .total-price,
.lt-basket .positions-table .total-row .offer-title {
font-weight: bold;
font-size: 1.3em;
color: #000;
}

@media (max-width: 430px) {
.lt-basket .positions-table .total-price,
.lt-basket .positions-table .total-row .offer-title,
.lt-basket .total-cost-str {
font-size: 1em;
}
}
Может кто-то уже знал, но для меня стало новостью, что Геткурс втихую уже перешел от использования FontAwesome 4.7 на 6.0 версию

Это значит что можно использовать более продвинутую библиотеку иконок при верстке. Гораздо больше выбор, быстрее отклик, в общем стало мега удобно 🤩
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса "Прожарки макетов" на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT.

➡️ Принять участие и посмотреть программу стрима

Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard2290р.
Обычная льготная цена — 2690р.

А уже 14 мая цена изменится и станет 3390р. для всех.
🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.

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

На стриме мастер-классе мы укротим этот редактор так, что вы навсегда перестанете его бояться, и будете делать свои собственные блоки со своим дизайном и наводить красоту. Конструктор тренингов, иначе говоря "старый редактор" используется не только в тренингах, но ещё и на страницах Оплаты заказа, Регистрации/Логина в школе, странице обратной связи, странице успешной оплаты и это далеко не весь список!

Что конкретно будет на стриме? Рассказываю:
— Сделаем полнейший разбор "старого редактора" Геткурса
— Расскажу вам неочевидные моменты и лайфхаки работы с сеткой и блоками так, что вы с легкостью сможете построить даже самую сложную структуру страницы
— Поделюсь с вами секретными приёмами лёгкой стилизации таких структур
— Поверстаем красоту
— Отвечу на все интересующие вас вопросы
— Как и всегда пообщаемся с вами в неформальной и весёлой обстановке

➡️ Принять участие и посмотреть программу стрима

Важные моменты:
Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.
Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.
Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.
Please open Telegram to view this post
VIEW IN TELEGRAM
Давно ли вы пользовались блоком "Плитки картинок"? 🤔

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

Я пошаманил с этим блоком, и придал ему новую жизнь (скриншот №2, №3). Так же я добавил поверх немного своих стилизаций, но самое главное я сделал ему вменяемый колоночный вид без переносов картинок. То есть до 768 пикселей мы имеем стабильно 3 колонки, до 480 пикселей — 2, и ниже — 1.

Стили в CSS-блоке следующие:

.thumbnails-list {
columns: 3;
column-gap: 20px;
}

.thumbnails-list a {
margin-right: 0;
width: inherit;
break-inside: avoid;
}

.thumbnails-list a img {
max-width: 100%;
border-radius: 15px;
}

@media (max-width: 768px) {
.thumbnails-list {
columns: 2;
}
}

@media (max-width: 480px) {
.thumbnails-list {
columns: 1;
}
}


Такой редизайн вполне гармонично и теперь уже деликатнее будет смотреться при верстке современных лендингов. Пользуйтесь

P.S.: предварительно блок у меня растянут в настройках на 12 колонок в ширину.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется "старый редактор" в котором я и собирал эти дизайны.

Новичка, или человека, который даже в средней степени разбирается в вёрстке, может смутить топорность и чрезмерная перенагруженность редактора, его непонятность и сложность в обращении. На своём стриме мастер-классе на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT, я научу вас укрощению этого редактора, покажу вам крутые фишки и приёмы, которые помогут делать вам такие дизайны, которые вы сами захотите, и наконец-то перестанете его бояться и сможете творить красоту и там!

➡️ Принять участие и посмотреть программу стрима

Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard2290р.
Обычная льготная цена — 2690р.

А уже 14 мая цена изменится и станет 3390р. для всех.
🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.

Как я уже писал ранее, "старый редактор" используется не только на страницах оплаты, но и в большинстве других системных страниц. С моим подходом к этому редактору вы станете на 130% всемогущи, так как сможете верстать не только на лендингах, но и в принципе переделать системные страницы под нужды онлайн-проектов.

Покорив старый редактор вы с уверенностью можете заявить, что знаете о вёрстке на платформе на 100% 😎

➡️ Принять участие и посмотреть программу стрима

Начало стрима 15 мая в 16:00
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Когда-то давно я создал мини-курс, который навсегда разорвал представление о скучном дизайне страниц оплат на Геткурсе. На странице оплаты используется "старый редактор" в котором я и собирал эти дизайны. Новичка, или человека, который даже в средней степени…
Друзья, напоминаю что до окончания действия льготной цены участия на стриме "Конструктор тренингов" осталось всего 7 дней!

➡️ Принять участие и посмотреть программу стрима

А уже 14 мая цена поднимется и станет 3390р. для всех. Все неоплаченные заказы будут отменены.

Стрим состоится 15 мая в 16:00 по МСК.
🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.

➡️ Принять участие и посмотреть программу стрима

Будем с вами безжалостно докапываться до самых тёмных секретов, который хранит старый редактор на Геткурсе 😱 Укротим и полностью подчиним его своей воле настолько, что вы сможете сами творить красоту на системных страницах, страницах оплаты заказа, и многих других где используется этот редактор

И, конечно же, лампово и весело проведем этот стрим мастер-класс 🏃 Буду вас ждать ☺️
Please open Telegram to view this post
VIEW IN TELEGRAM