Что угодно, куда угодно 😜

В одном из предыдущих постов я делился безскриптовой возможностью поставить какой-либо блок в какой-либо блок :) В этом мы затронем менее "болезненный" и более безопасный способ, но с использованием небольшого скрипта, который позволяет это сделать.

На скриншотах выше я создал блок с тарифами и блок с раскрывающимся текстом, который в последствии я хочу поместить под цену во второй блок с тарифом. Как говорится: let's do it! 😉

Сперва я задам обоим блокам классы. Блоку с тарифами я присвоил класс offers, а блоку с раскрывашкой я поставил класс toggler. Далее, через панель разработчика (F12) я нахожу сам блок раскрывашки, который как раз и содержит видимый контент, и скрытый (см. скриншот). Он имеет класс modal-block-content.

Наконец-то переходим к самому интересному. Мы скриптом поставим наш блок под цену во втором блоке с тарифом. Блоки с тарифами имеют класс lt-tsr-block, и значит, чтобы выбрать второй блок, нам надо воспользоваться псведо-классом :nth-child(2) в нашем случае. Ставим блок с JS в самый низ страницы и там добавляем вот такой скрипт, исходя из всех наших данных:

$(function() {

$('.toggler .modal-block-content').clone(true).appendTo('.offers .lt-tsr-block:nth-child(2) .f-price');


})

Таким образом мы перенесем наш раскрывающийся текст в блок с тарифом и он будет работать :) А сам toggler мы можем скрыть в CSS, так как этот блок нам на странице больше не нужен.

Хочу отдельно обратить внимание на метод clone(). Данный метод - аналог метода cloneNode() из обычного JavaScript. В скобках он принимает значение deep. Если не ставить там ничего, то по-умолчанию это значение false, что означает, что скопируется лишь текстовая оболочка без обработчиков. А с помощью true мы перенесли ещё и скриптовую часть блока, которая заставляет правильно его работать :)

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

Решил поделиться красотой параллакса :) Сделано на библиотеке parallax.js 😊

Для оформления первого экрана, подобные решения выглядят очень круто! :)

#наработки

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

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

В этом посте я хочу поделиться с вами одной фишкой, которая поможет сократить длину страницы в разы и сделать её элементы более интересными для восприятия. Я буду использовать полезнейшее 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, а так же делюсь секретами и фишками на Тильде, и собственными авторскими решениями 😉