Вот и первое сентября — день знаний.
Значит, пора и нам набираться новых знаний!

Полосы прокрутки: неизбежность или красота? 🧐

Скорее всего большинство из вас, у кого на лендинге есть прокручивающийся контент, будь то окна информации или даже всё окно страницы, задавались вопросом: "А можно ли как-то стилизовать область прокрутки?"

Ответ прост: можно! Существуют псевдоклассы, с помощью которых мы можем влиять на полосу прокрутки (скроллбар), и стилизовать её как нам хочется. Таких псевдокласса три:

::-webkit-scrollbar — Отвечает за целиковый скроллбар (как контейнер для скролл-трека и передвижного тумблера)

::-webkit-scrollbar-track — Путь нашего скролл-бара (сюда применяются стили формы трека, например, скругления или бекграунд)

::-webkit-scrollbar-thumb — Передвижной тумблер прокрутки (так же воспринимает цвет, формы, скругления)

В качестве примера на скриншотах к посту маленькая демонстрация со своими собственными приукрашиваниями 😊 Я применил прокрутку к "полотну" текста и стилизовал:

.part-text::-webkit-scrollbar {
    width: 10px;
    border-radius: 5px;
}

.part-text::-webkit-scrollbar-track {
    background: lavender;
    border-radius: 5px;
}

.part-text::-webkit-scrollbar-thumb {
    background: violet;
    border-radius: 5px;
}

.part-text {
    height: 250px;
    border: 1px solid violet;
    border-radius: 5px;
    padding: 15px;
    overflow-y: scroll;
}

Если вы делаете крутой дизайн, то стандартные браузерные скроллбары уж точно никак не впишутся в ваш собственный стиль сайта. Таким образом вы можете подстроить под себя даже такую деталь браузера как скроллбар 😉

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

Свои красивые границы блоков 🥳

С каждым разом обычные границы блоков перестают удивлять заказчиков своим видом, и всегда хочется большего. Ровно так же и для собственных дизайнов. Освежить дизайн вам точно поможет генератор границ блоков на SVG — Get Waves

Пользоваться им достаточно просто:
1) Выбираете настройки
2) Генерируете волнообразные/прямоугольные границы блоков кубиком справа
3) Получаете SVG разметку нажав на облачко со стрелкой 😉

В самом Геткурсе вставляете в отдельный HTML-блок там, где вы хотите видеть эту границу. Удаляете внутри HTML всё, что вам предлагает Геткурс, и просто вставляете скопированный SVG внутрь. Вы так же можете задать нужный вам цвет под цвет вашего проекта найдя внутри тега <path> атрибут fill и задав свой цвет каким-нибудь хеш-номером 😊

С таким маленьким и очень полезным инструментом можно делать абсолютно разнообразные и не скучные границы блоков 😎

#лайфхак

Механики всплывающих блоков ✔️

Большинство из нас пользуются всплывающими блоками методами Геткурса, где можно настроить "Показ всплывающего блока", и соответственно вставить в окошко номер этого всплывающего блока, который обычно имеет номер формата b-27f1 (для примера).

Но не многие знают, что за это отвечает один из уже встроенных в Геткурс функций ltShowModalBlock(). И с помощью этой функции мы сами можем манипулировать тем, из какого места нам нужно открыть тот, или иной всплывающий блок 😉

Например, мы можем использовать эту функцию в тексте в любом месте, обернув её в тег ссылки <a></a> и использовав атрибут onclick чтобы вызвать данную функцию. Внутри скобок пишется номер блока в кавычках, который мы хотим вызвать. Пример использования в любом месте в тексте:

<a onclick="ltShowModalBlock('b-27f1')">Запишись здесь!</a>

А чтобы применить в вашем собственном JS-коде, вы можете просто поставить вызов функции ltShowModalBlock('b-27f1') с номером вашего блока 👍

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

Отправляем форму без формы! 😁

Все уже давно привыкли пользоваться формами в Геткурсе. Они являются неотъемлемой частью идентификации пользователя при создании заказа или регистрации. Но мало кто знает, что можно отправить форму не из самой формы 😋

И отсюда рождается много крутых механик, которые можно реализовать по нашим собственным правилам. Например, пользователь кликает на ссылку "Заказать в один клик!" и его сразу же перекидывает на страницу оплаты заказа без заполнения формы.

❗️Учтите: такой подход можно применять к тем, кто уже зарегистрирован в вашем проекте. В противном случае форма, конечно же, не отправится.

В моём примере (скриншот №1) мы создаем простой текст, который оборачиваем ссылкой, и в ссылке в атрибуте onclick пишем такой код:
$('.reg-form form').submit();

Целиковая конструкция выглядит так:

<a onclick="$('.reg-form form').submit();">Заказать в один клик!</a>

Далее, нам нужно поставить класс reg-form нашей форме, а так же скрыть её со страницы, как показано на скриншоте №2. Не забудьте также поставить туда предложение, которое будет "Выделено по умолчанию" в нашей форме, именно оно и будет передаваться в сформированный заказ.

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

P.S.: Если у вас будет 2 и более подобных ссылок, соответственно, вам нужно сделать столько же скрытых форм с предложениями и с разными классами.

P.P.S. Опять же, развивая фантазию, можно применить в собственных механиках на JS, т.к. заказ скриптами создать довольно проблематично 😜

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