Прилипающий контент. Смотрится отлично, практичен и дружелюбен в плане UX. К тому же и делается достаточно просто.
Нужно прописать контейнеру буквально одно свойство:
Но использовать его нужно грамотно и правильно. Потому что почти никто не понимает почему блок не прилипает и не ездит в след за прокруткой страницы.
Во-первых, обязательно должна присутствовать координата отступа, например
И второй важный момент я покажу на скриншоте к посту. У блока родителя, который содержит контейнер со свойством😉
P.S. Скрин и гифка чуть ниже)
#лайфхак #полезная_фишка
Нужно прописать контейнеру буквально одно свойство:
position: sticky;
Но использовать его нужно грамотно и правильно. Потому что почти никто не понимает почему блок не прилипает и не ездит в след за прокруткой страницы.
Во-первых, обязательно должна присутствовать координата отступа, например
top: 10px. Она будет означать что контент прилипнет при прокрутке сверху и будет отступать от края окна браузера 10px. Итого у плавающего контейнера свойства будут выглядеть примерно так:position: sticky;
top: 10px;
И второй важный момент я покажу на скриншоте к посту. У блока родителя, который содержит контейнер со свойством
position: sticky должно хватать высоты, по которой как раз будет ездить внутренний блок как лифт. Лучше всего чтобы это было автоматическое расстояние основанное на растянутости вашего контента. Ну или же до определённого момента — решать вам P.S. Скрин и гифка чуть ниже)
#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Как выглядят мои обучающие посты для большинства подписчиков 😂
Please open Telegram to view this post
VIEW IN TELEGRAM
Мне многие пишут, особенно уже когда мой стрим прошел, что хотели бы приобрести запись. Стримы в моём клубе Train IT это эксклюзивный контент, который не продаётся в свободном доступе, и его можно приобрести только в течение 3-4 недель после анонса до дня старта.
Поскольку мне часто писали после эфира что хотели приобрести тот или иной стрим, я решил превратить это в одно из событий в виде распродажи стримов. Встречайте:
СтримоБУМ💥
Целую неделю можно приобрести эксклюзивный контент со скидками. С 22 по 26 января включительно!
💣 https://train-it.ru/stream-boom 💣
Описание всех сезонов вы найдете на странице распродажи😉
P.S. Советую заранее залогиниться под вашим актуальным аккаунтом в клубе, чтобы точно знать какие сезоны у вас есть, чтобы понимать, какие хотели бы приобрести.
Поскольку мне часто писали после эфира что хотели приобрести тот или иной стрим, я решил превратить это в одно из событий в виде распродажи стримов. Встречайте:
СтримоБУМ
Целую неделю можно приобрести эксклюзивный контент со скидками. С 22 по 26 января включительно!
Описание всех сезонов вы найдете на странице распродажи
P.S. Советую заранее залогиниться под вашим актуальным аккаунтом в клубе, чтобы точно знать какие сезоны у вас есть, чтобы понимать, какие хотели бы приобрести.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделал прототип подсказок для инпута на своём тестовом сервере. Решил поделиться с вами, и спросить, нужно ли подобное для ГК под полями?
Учтите что это не предлагаемое автозаполнение, а именно "подсказки" под полем.
В общем, огонёчки если надо такое для Геткурса. Заодно в комментариях можете написать где бы вы такое применили и для чего☺️
Учтите что это не предлагаемое автозаполнение, а именно "подсказки" под полем.
В общем, огонёчки если надо такое для Геткурса. Заодно в комментариях можете написать где бы вы такое применили и для чего
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Мне многие пишут, особенно уже когда мой стрим прошел, что хотели бы приобрести запись. Стримы в моём клубе Train IT это эксклюзивный контент, который не продаётся в свободном доступе, и его можно приобрести только в течение 3-4 недель после анонса до дня…
Совсем забыл осветить прошлое напоминание в канале. Поэтому напоминаю сейчас и один раз 😜
Осталось всего 7 часов до конца распродажи стримов!
Событие СтримоБУМ 💥 начинает подходить к концу. А вместе с ним перестанут продаваться и записи стримов.
Все неоплаченные заказы будут отменены сегодня в 23:59.
💣 https://train-it.ru/stream-boom 💣
Все самые сочные практики ждут вас ещё совсем немного, а потом отправятся отдыхать в закрытом режиме без возможности покупки😊
Осталось всего 7 часов до конца распродажи стримов!
Событие СтримоБУМ 💥 начинает подходить к концу. А вместе с ним перестанут продаваться и записи стримов.
Все неоплаченные заказы будут отменены сегодня в 23:59.
💣 https://train-it.ru/stream-boom 💣
Все самые сочные практики ждут вас ещё совсем немного, а потом отправятся отдыхать в закрытом режиме без возможности покупки
Please open Telegram to view this post
VIEW IN TELEGRAM
Тема кнопок всегда будет актуальна, ведь как-то надо привлекать внимание пользователей, верно? 😌
Из необычных эффектов на кнопке вот такое светлое пятно, которое придаёт соблазна на неё тыкнуть. В принципе можно положить заранее заготовленную подобную картинку на бэкграунд, правда тут есть "но". Картинка это растр. И если ваша кнопка достаточно большая, то при адаптации этот растр "пережмёт" в такое кривое нечто, что это будет безумно криво смотреться.
Такой эффект достигается с помощью радиального градиента на самой кнопке. Вот пример CSS, который используется для кнопки на скриншоте к посту, и прочие стили, которые задают подобный формат кнопке:
В то же время важно в настройках кнопки оставить поля цветов пустыми (скриншот №2), и применить настройки. Тогда данный CSS вполне хорошо ляжет на саму кнопку. Вы можете поиграться и поставить свои цвета, которые являются главными у вас в проекте😊
#полезная_фишка
Из необычных эффектов на кнопке вот такое светлое пятно, которое придаёт соблазна на неё тыкнуть. В принципе можно положить заранее заготовленную подобную картинку на бэкграунд, правда тут есть "но". Картинка это растр. И если ваша кнопка достаточно большая, то при адаптации этот растр "пережмёт" в такое кривое нечто, что это будет безумно криво смотреться.
Такой эффект достигается с помощью радиального градиента на самой кнопке. Вот пример 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.: Когда сказали, что проект должен "выделяться" среди всех по дизайну😆
P.S.: Когда сказали, что проект должен "выделяться" среди всех по дизайну
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, друзья! И конечно же всех с наступившей пятницей и надвигающимися выходными.
Как многие заметили, в течение недели я не выкладывал ничего в канал, т.к. занят запуском достаточно крупного проекта (о котором я обязательно вам расскажу), а так же готовлюсь к конференции FARSH, о которой некоторые уже слышали, где я буду вещать хоть и не слишком высокотехнологичную тему, но зато одну из самых больных, которую я вижу чуть ли не во всех чатах с частой периодичностью😦
Такой пост покаяния получился😅
Всех с наступающими выходными, и отличного настроения!😉
Как многие заметили, в течение недели я не выкладывал ничего в канал, т.к. занят запуском достаточно крупного проекта (о котором я обязательно вам расскажу), а так же готовлюсь к конференции FARSH, о которой некоторые уже слышали, где я буду вещать хоть и не слишком высокотехнологичную тему, но зато одну из самых больных, которую я вижу чуть ли не во всех чатах с частой периодичностью
Такой пост покаяния получился
Всех с наступающими выходными, и отличного настроения!
Please open Telegram to view this post
VIEW IN TELEGRAM
В этот четверг (15 февраля), как вы знаете, я участвую на самой "мясной" конференции FARSH. Почему "мясной"? Потому что там будут самые сочные, как идеально приготовленный стейк технологии, которые помогают техническим специалистам и продюсерам привнести в проект технический БУМ.
Как я писал ранее, моя тема не является чем-то прям грандиозным из мира "высоких технологий". Я буду рассказывать про то, как кастомизировать скучные чекбоксы и радиокнопки на Геткурсе, ведь у самого Геткурса нет такой возможности в принципе. Зато эту самую боль я вижу во многих чатах, особенно там, где верстальщику или спецу дали необычный дизайн формы, где вместо чекбоксов и радиокнопок используются какие-то по истине красивые элементы выбора😉
Я дам вам единый механизм работы, и покажу пару примеров использования чтобы решить эту проблему раз и навсегда🤺
А тут скидка от меня на конференцию FARSH -10% !
Как я писал ранее, моя тема не является чем-то прям грандиозным из мира "высоких технологий". Я буду рассказывать про то, как кастомизировать скучные чекбоксы и радиокнопки на Геткурсе, ведь у самого Геткурса нет такой возможности в принципе. Зато эту самую боль я вижу во многих чатах, особенно там, где верстальщику или спецу дали необычный дизайн формы, где вместо чекбоксов и радиокнопок используются какие-то по истине красивые элементы выбора
Я дам вам единый механизм работы, и покажу пару примеров использования чтобы решить эту проблему раз и навсегда
А тут скидка от меня на конференцию FARSH -10% !
Please open Telegram to view this post
VIEW IN TELEGRAM
Зачастую мне хочется поделиться бОльшим, но в основную тематику данного канал это было бы не актуально 😉
Я уже обмолвился после конференции FARSH что создам второй канал, где я буду выкладывать сторонние посты об всём, включая Геткурс, но так же затрагивая остальные технологии и платформы, с которыми я работаю. И ещё там я буду делиться моментами своей повседневной жизни☀
В общем, приглашаю на мой второй канал — Чулан Макса Елисеева😦
Я уже обмолвился после конференции FARSH что создам второй канал, где я буду выкладывать сторонние посты об всём, включая Геткурс, но так же затрагивая остальные технологии и платформы, с которыми я работаю. И ещё там я буду делиться моментами своей повседневной жизни
В общем, приглашаю на мой второй канал — Чулан Макса Елисеева
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Чулан Максима Елисеева | Технически обо всём
Второй канал, где публикуются сторонние посты с разных платформ (AXL, Tilda, Wordpress, GetCourse и др.). А так же другие посты, который не относятся к тематике основного канала ;)
Остались вопросы? Пишите @Isagaya
Основной канал: https://t.me/closetgc
Остались вопросы? Пишите @Isagaya
Основной канал: https://t.me/closetgc
Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦
Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно😉
В CSS стили блока с формой ставим:
И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство
Должно выглядеть так:
#лайфхак #полезная_фишка
Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно
В 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-го марта✨
Эту страницу буду периодически пополнять новым материалом, так что следите😊
➡️ Посмотреть урок тут ⬅️
Быть может кто-то ещё не знает, но я сделал страницу с бесплатным уроком оформления личного кабинета Геткурса к празднику 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 марта (понедельник)
⏺ Зарегистрироваться можно здесь 😉
А это значит, что за 5 дней вы посмотрите 5 потрясающих практических уроков и виртуозно овладеете магией кода для преображения кнопок!
А теперь всё вместе:
Please open Telegram to view this post
VIEW IN TELEGRAM
Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉
Есть несколько состояний корзины: закрытая и раскрытая.
Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект😏
Стили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.
Сами стили будут ниже этого поста. Так как они не вмещаются в него😆
#полезная_фишка
Есть несколько состояний корзины: закрытая и раскрытая.
Для владеющих 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;
}
}