Многим был интересен механизм работы "Читать далее". В этом посте я раскрою одну из его механик работы. Экспериментировать я буду на своём любимом блоке "Карточек".

Если вы хотите разметить много текста в описании вашего продукта в карточке, то логичнее не делать "портянку", а придерживаться единого ритма текстового контента, например, показывать лишь 3 строчки текста, чтобы всё остальное было скрыто. Но как так сделать? 🧐

Демонстрирую один из возможных вариантов:
1) Ставим блок карточек (см. скриншот)
2) Делаем описание карточки с подобной внутренней разметкой:

<p>... Очень много вашего текста...</p>
<p class="readmore"><a style="font-weight: bold;">Читать далее...</a></p>

3) Вставляем стили в Стили блока в "Подробные настройки":

.lt-tsr-content .description p {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

.lt-tsr-content .description p.opened {
-webkit-line-clamp: initial;
}

.lt-tsr-content .description p.changed a {
font-size: 0;
}

.lt-tsr-content .description p.changed a:before {
content: 'Скрыть';
font-size: 16px;
}

4) В самом низу страницы или под блок с карточками ставим блок с JS-кодом:

$(function() {
let readBtns = document.querySelectorAll('.readmore');

readBtns.forEach(el => {
el.addEventListener('click', function() {
this.classList.toggle('changed');
this.previousElementSibling.classList.toggle('opened');
})
})
})

И наслаждаемся чудесным механизмом "Читать далее", который безумно сильно сокращает полотна текста на карточках, а так же делает эстетически приятный однородный вид элементов 😉

#полезная_фишка #лёгкая_кастомизация

Ломаем систему одноблочности 😁

Речь пойдет про достаточно популярный блок "Обложка", которым пользуются чуть ли не 99% всех проектов уж точно. И зачастую жалуются на то, что его не особо можно разнообразить, например добавить свою колоночную систему нам этот блок не позволяет.

Что ж, придётся решить эту проблему, и навести немного красоты и разнообразия в этом "одноблочном" мире.

Дело в том, что зачастую в этом блоке используются в основном 2 типа элементов: текстовый и картинка. Поэтому будем опираться на них. Они имеют свои достаточно похожие классы, начинающиеся с part:

.part-text — текстовый элемент
.part-image — изображение

Прибегая к нехитрой манипуляции и математике, можем уменьшить их ширину в процентах оставляя им некую погрешность в расстоянии между друг-другом.

Если нужно сделать 2 текстовые колонки, внутрь вставляем следующее:

.part-text {
    display: inline-block;
    max-width: calc(50% - 10px);
    vertical-align: middle;
}

Если нужно сделать 3 колонки с картинкой по середине, внутрь вставляем следующее:

.part-text, .part-image {
    display: inline-block;
    max-width: calc(33% - 10px);
    vertical-align: middle;
}

Функция calc() будет постоянно пересчитывать эти значения при каждом уменьшении экрана, а значит проблем с адаптивностью данных колонок будет минимум 😉

Ну и конечно же вам сперва нужно по порядку поставить текстовые элементы и картинку так, как хотите чтобы они шли в колонках. То есть просто поставить в порядке очереди эти элементы, а потом вставлять соответствующий стилевой код ☺️

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

Как вы думаете, из какого блока был свёрстан этот блок на скриншоте №1? 🧐

На размышление 30 секунд 😂

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

На самом деле здесь используется блок "Две колонки с произвольным контентом". Всё, что нужно сделать это поставить блок желаемой картинки и блок текста друг за другом (скриншот №2). А затем применить чуть-чуть магии называемой CSS 😎

После того как мы поставили блоки так, как показано на скриншоте, нам нужно поставить следующие стили в блок:

.flex-container .flex-column {
align-items: center;
}

.part-image,
.part-text {
max-width: calc(50% - 20px);
}

.part-text {
padding-left: 30px;
}

Так мало стилей? Да! Мы всего лишь поменяли структуру ширины блоков изображения и текста, в следствии чего они встали в один ряд друг с другом, а так же зацентрировали их относительно друг-друга. Ну а дальнейшая стилизация уже зависит от вашей фантазии, дерзайте 😉

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

Тема кнопок всегда будет актуальна, ведь как-то надо привлекать внимание пользователей, верно? 😌

Из необычных эффектов на кнопке вот такое светлое пятно, которое придаёт соблазна на неё тыкнуть. В принципе можно положить заранее заготовленную подобную картинку на бэкграунд, правда тут есть "но". Картинка это растр. И если ваша кнопка достаточно большая, то при адаптации этот растр "пережмёт" в такое кривое нечто, что это будет безумно криво смотреться.

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

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

Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉

Есть несколько состояний корзины: закрытая и раскрытая.

Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект 😏

Стили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.

Сами стили будут ниже этого поста. Так как они не вмещаются в него 😆

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