Обрезаем полотно 👏

Порой требуется уместить на страницу море информации, из-за чего она превращается в полотно (или как люблю говорить я "в рулон туалетной бумаги" 😁). И ведь действительно, пользователь устанет листать страницу с тучей монотонной информации.

В этом посте я хочу поделиться с вами одной фишкой, которая поможет сократить длину страницы в разы и сделать её элементы более интересными для восприятия. Я буду использовать полезнейшее CSS-правило overflow.

В качестве примера, я превратил блок с карточками (а именно блок "Иконка-заголовок-текст") в своего рода "слайдер", уместив все элементы в него, и не растягивая страницу вниз ;)

В качестве второго примера, я взял обычные текстовые элементы в пределах одного блока (это очень важно), и разместил их друг за другом, затем воспользовался магией свойства overflow, которое значительно сократило растягивание страницы вниз.

Для блока с карточками я использовал следующий CSS:
.flex-row {
flex-wrap: nowrap;
overflow-x: scroll;
}

Т.е. я отменил правила переноса флекс элементов и сделал их в одну строку, а затем свойством overflow-x я сделал скролл этих элементов по оси Х.

Для блока с текстом я использовал следующий CSS (хочу обратить внимание, что блок с заголовком это совсем отдельный блок):
.builder {
max-height: 300px;
overflow-y: scroll;
border: 5px dashed #000;
border-radius: 10px;
padding: 15px;
}

Здесь я сделал контейнеру с текстом высоту, не превышающую 300 пикселей, и разрешил скролить этот контейнер внутри себя по оси Y. Остальные свойства – это просто импровизация для красоты.

К слову, саму панельку скролла можно тоже красиво закастомизировать, но это тема уже для отдельного поста 😉

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

Привет, друзья!
Вы хотели научиться понимать код? А ещё круче - писать его самому? Тогда лучшего повода, чем сейчас, вы не найдёте. Потому что в моём клубе Train IT стартовала Чёрная Пятница 😉

✅ Всегда мечтали не просто конструировать сайты из статичных блоков, а писать их самим?

✅ Добавлять крутые фишки, а, может, даже придумывать свои самостоятельно?

✅ Понимать весь код, с которым вы работаете?

✅ Быть уверенным в своих знаниях и иметь под рукой мощную опору в виде уроков клуба?

Тогда, лучшего повода, чем сейчас, вы не найдёте 😊

❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈

Для партнёров клуба эта распродажа ещё выгоднее 🤝

Ознакомиться с уроками по направлениям клуба можно здесь — https://train-it.ru/#current

В Train IT вы получите универсальные знания, которые можете применять везде и не зависеть от платформы. Приобретённые знания сделают вас поистине крутым специалистом.

Если вы хотите повысить свою ценность как крутого специалиста, то почему бы не начать делать это сейчас? 😉

Всем хорошего воскресенья, друзья 😉

Хочу напомнить, что до конца распродажи в моём клубе остались считанные часы.

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

Знания, которые я даю в своём клубе — это универсальные инструменты, с помощью которых вы сможете покорить любые платформы. Не говоря уже о самом Геткурсе 😁

❗️СТРАНИЦА РАПРОДАЖИ❗️
👉 https://train-it.ru/blackfriday 👈

Поэтому торопитесь, потому что в полночь карета превратится в тыкву 😌

Витрина как в магазине 😎

Вы, конечно же, видели стеклянные красивые витрины в магазине, как красиво на них презентуется товар. Он завораживает взгляд и поселяет в сознании мысль купить его...

Что если я скажу вам, что подобный эффект "стеклянной витрины" мы можем сотворить на лендинге?

Мало кто знает, но существует специальное CSS правило box-reflect, которое делает отражение элементов в заданных внутри правила значениях. Насколько красиво это выглядит даже на простых элементах, можно убедиться на скриншоте 😉

Пользоваться правилом довольно просто, box-reflect принимает значения по порядку:
1. Направление отражения
2. Расстояние между элементом и началом его отражения
3. Маска, url() с путём к изображению или полупрозрачный градиент, который будет использоваться для отражения в качестве маски

Мой вариант на скриншоте имеет такие значения:
box-reflect: below 15px linear-gradient(transparent, transparent, transparent, rgba(0,0,0,0.2));

P.S. Используйте префикс -webkit- к свойству для совместимости с другими браузерами помимо Chrome.
P.S.S. Применял к классу .lt-tsr-content в данном случае, с небольшой накруткой собственных стилей.

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

А что, так можно было? 😳

В этом посте я хочу поделиться с вами абсолютно неочевидной возможностью CSS-свойства box-shadow.

Многие специалисты, которые изучают CSS, рано или поздно сталкиваются с необходимостью сделать на блоке повторяющиеся декоративные элементы. Первое, что приходит на ум — сделать их с помощью :before и :after.

Но вот проблема: псевдоэлемента всего два. А что, если повторяющихся декоративных элементов надо сделать, к примеру три или четыре?

Тут-то нам и понадобится хитрость использования свойства box-shadow. Дело в том, что этим свойством мы отбрасываем тень нашего объекта, но при отключенных параметрах размытия мы копируем сам псевдоэлемент! И можем спокойно двигать его по координатам относительно псевдоэлемента.

На моём примере я поставил блок отзывов. И поставил на отзыв класс qoute-container. От него я делаю декоративный элемент, который вешаю на :before, и по задумке мне нужен ещё один рядом с ним. Я просто пишу свойство box-shadow и по первой координате X двигаю его на расстояние нужное мне от моего псевдоэлемента (смотрите скриншоты).

Таким образом я делаю 2 декоративных элемента за единственное использование псевдоэлемента 😉

#лайфхак

Друзья, всем привет 😉

У нас там происходит нечто...
А именно Чёрная Пятница!
Не простая, а совместная с партнёрскими проектами 👍

🔥 Школа Магии Геткурса
🔥 «Тонкая настройка» Оли Скороходовой
🔥 Мой клуб Train IT
🔥 КПД клуб Оли Скороходовой и Петра Петипака
🔥 PRO.Design School Веры Кулешовой

Общая распродажа тут
👉 https://gcwithme.ru/bf21 👈
Распродажа длится до 28 ноября, 23:59

Это ещё одна прекрасная возможность приобрести с большой скидкой доступ в клуб Train IT, где я учу понимать и писать CSS/HTML/JS, а так же делюсь секретами и фишками на Тильде, и собственными авторскими решениями 😉

Друзья, привет всем 😉
Хотел поделиться с вами двумя новостями:

Первая.
Сегодня последний день совместной распродажи. Закончится она сегодня (28 ноября) в 23:59, и ровно в 0:00 страницы распродажи закроются и нельзя будет оплатить созданные заказы.

Поэтому, кто хотел, но никак не мог решиться, у вас есть последняя возможность:
👉 https://gcwithme.ru/bf21 👈


Вторая.
Может быть для кого-то это всё ещё секрет, но мы проводим с 29 ноября очередную Неделю Магии 6 в Школее Магии Геткурса!

В этот раз мы сделали так, что у вас есть шанс побороться за призовой денежный фонд, который будет разделён между прошедшими Неделю Магии 6 участниками. Такое предложение доступно тем, кто выберет тариф "Экстрим".

Запись на Неделю Магии 6 👉 https://gcwithme.ru/magicweek6

P.S. По секрету, первый день Недели Магии 6 открываю Я 😁 И подготовил для вас очень крутой урок по вёрстке, чтобы вы смотрели и кайфовали от того, на сколько на самом деле круто верстать и видеть все изменения на странице 😊 А так же почерпнули для себя огромнейшие знания и фишки в вёрстке 👍

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

Вчера (29 ноября 2021 года) был мой первый открывающий день в Неделю Магии 6. Хотелось бы собрать немного фидбеков о своём дне проведении урока. Он получился довольно длинным, на 45 минут. Но в него я вложил душу и дал вам максимально плотную и полезную информацию по прокачке ваших навыков в вёрстке. 😊

Всё буквально снималось одним дублем. Всего около 2х раз я останавливал видео, чтобы хотя бы дать отдохнуть своему голосу на 1 минуту 😁 Честно признаться, я очень боялся, что подобный формат не зайдет)

Полезно ли вам было окунуться в такую наглядную вёрстку с нуля? Много ли вы для себя узнали? Делитесь впечатлениями 😊