🧡 🧡🧡🧡🧡🧡 🧡🧡🧡🧡🧡 😍 🥳

Возвращаемся после праздников в работу 😉

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

На скриншоте я показываю как можно разнообразить блок с картинкой, придав ему декоративную рамку, из которой изображение как бы "вылетело", что придаёт некий шарм самому блоку 😊

Зачастую класс блока с картинкой называется part-image, от него и будем отталкиваться. Саму картинку мы оставим не тронутой, а вот заднюю рамку со смещением повесим на псевдоэлемент. Получится примерно следующее:

.part-image {
position: relative;
z-index: 5;
}

.part-image:before {
content: '';
position: absolute;
z-index: -1;
display: block;
width: 100%;
height: 100%;
border: 10px solid #FFCA42;
transform: scale(0.95) translate(30px, 40px);
}

Как итог, мы чуть-чуть поигрались со слоями, а рамку отправили позади самого элемента задав ему z-index: -1. Приукрасили стилями как надо и сместили и чуть сузили с помощью свойства transform. Пользуйтесь ✅

#полезная_фишка

Прилипающий контент. Смотрится отлично, практичен и дружелюбен в плане UX. К тому же и делается достаточно просто.

Нужно прописать контейнеру буквально одно свойство:

position: sticky;

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

Во-первых, обязательно должна присутствовать координата отступа, например top: 10px. Она будет означать что контент прилипнет при прокрутке сверху и будет отступать от края окна браузера 10px. Итого у плавающего контейнера свойства будут выглядеть примерно так:

position: sticky;
top: 10px;

И второй важный момент я покажу на скриншоте к посту. У блока родителя, который содержит контейнер со свойством position: sticky должно хватать высоты, по которой как раз будет ездить внутренний блок как лифт. Лучше всего чтобы это было автоматическое расстояние основанное на растянутости вашего контента. Ну или же до определённого момента — решать вам 😉

P.S. Скрин и гифка чуть ниже)

#лайфхак #полезная_фишка

Как выглядят мои обучающие посты для большинства подписчиков 😂

Мне многие пишут, особенно уже когда мой стрим прошел, что хотели бы приобрести запись. Стримы в моём клубе Train IT это эксклюзивный контент, который не продаётся в свободном доступе, и его можно приобрести только в течение 3-4 недель после анонса до дня старта.

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

СтримоБУМ 💥

Целую неделю можно приобрести эксклюзивный контент со скидками. С 22 по 26 января включительно!

💣 https://train-it.ru/stream-boom 💣

Описание всех сезонов вы найдете на странице распродажи 😉

P.S. Советую заранее залогиниться под вашим актуальным аккаунтом в клубе, чтобы точно знать какие сезоны у вас есть, чтобы понимать, какие хотели бы приобрести.

Сделал прототип подсказок для инпута на своём тестовом сервере. Решил поделиться с вами, и спросить, нужно ли подобное для ГК под полями?

Учтите что это не предлагаемое автозаполнение, а именно "подсказки" под полем.

В общем, огонёчки если надо такое для Геткурса. Заодно в комментариях можете написать где бы вы такое применили и для чего ☺️

Совсем забыл осветить прошлое напоминание в канале. Поэтому напоминаю сейчас и один раз 😜

Осталось всего 7 часов до конца распродажи стримов!
Событие СтримоБУМ 💥 начинает подходить к концу. А вместе с ним перестанут продаваться и записи стримов.

Все неоплаченные заказы будут отменены сегодня в 23:59.

💣 https://train-it.ru/stream-boom 💣

Все самые сочные практики ждут вас ещё совсем немного, а потом отправятся отдыхать в закрытом режиме без возможности покупки 😊

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

P.S.: Когда сказали, что проект должен "выделяться" среди всех по дизайну 😆

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

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

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

Всех с наступающими выходными, и отличного настроения! 😉

В этот четверг (15 февраля), как вы знаете, я участвую на самой "мясной" конференции FARSH. Почему "мясной"? Потому что там будут самые сочные, как идеально приготовленный стейк технологии, которые помогают техническим специалистам и продюсерам привнести в проект технический БУМ.

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

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

А тут скидка от меня на конференцию FARSH -10% !

Зачастую мне хочется поделиться бОльшим, но в основную тематику данного канал это было бы не актуально 😉

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

В общем, приглашаю на мой второй канал — Чулан Макса Елисеева 😦

Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦

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

В 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%;
}

#лайфхак #полезная_фишка

Привет, друзья!

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

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

➡️ Посмотреть урок тут ⬅️

Наши милые девушки! Я поздравляю вас с Международным женским днём 8 марта! И желаю чтобы каждая из вас была такая же красивая, обоятельная, чтобы доход вырос троекратно, и конечно же всегда были счастливы. Ну а мы, мужчины, сделаем всё, чтобы создать для вас счастье 😌 🌸🌸💐

Кстати, если вы хотите прокачать свой скилл владением Геткурса, в частности овладеть красивыми эффектами на кнопках, поставить им анимации при наведении, сделать их необычной формы и заставить выполнять виртуозные трюки, то в Клубе Магии с понедельника (11 марта) стартует бесплатный марафон «Нажми на кнопку», который будет длиться 5 дней!

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

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

А теперь всё вместе:
⏺ Подойдёт для начинающих, особенно тем, кто желает овладеть красивым оформлением
⏺ Один из уроков марафона представлен лично мной ✨
⏺ Старт марафона 11 марта (понедельник)
⏺ Зарегистрироваться можно здесь 😉