Как легко и быстро верстать красивые списки с буллитами в Тильде
Наталья Чистякова
0:00 / 0:00
Как легко и быстро верстать красивые списки с буллитами в Тильде
612 просмотров · 2 г. назад
Наталья Чистякова
695 подписчиков
612 просмотров · 2 г. назад
Всем салют😘✌️
Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳
Меня зовут Чистякова Наталья, я UX/UI дизайнер, подготовила для вас небольшое видео о том, как на Тильде, не прибегая к растасовке по артборду буллитов руками, красиво и быстро верстать списки, перечисления, тарифы и т. п. 😻— благодаря паре строчек CSS и псевдоклассам👌
Много пользы, профессионального и человеческого общения на любые темы ждёт вас в нашем чате Pro.дизайн 👉 https://t.me/pro_design23
Если у вас есть вопросы о дизайну, типографике, креативным идеям, документам для сайта, общению с заказчиками (включая спорные ситуации) — пишите мне — разберёмся в любой задаче:
Мой ТГ — https://t.me/chistyakova_website
ВК — https://vk.com/chistyakovan
Инст (продукт Meta, в РФ признана экстремистской организацией) — / chistyakova.website
DProfile — https://mvp.dprofile.ru/chistyakovan
В видео использован следующий CSS (не забудьте проставить теги style в угловых скобках в начале и конце кода):
— Буллиты → меняете класс элемента и ссылку на свой буллит (https://...), а также корректируете, по необходимости, код в части width, height, top и left, чтобы поправить положение буллита относительно сетки или относительного самого элемента:
.класс_элемента::before {
content: url(https://ссылка_на_вашу_иконку/111.svg);
position: absolute;
width: 15px;
height: 15px;
top: 1px;
left: -29px;
}
— Зачёркивание → меняете класс элемента и цвет самой линии зачеркивания (больше информации о CSS-декорировании текста — напр., https://developer.mozilla.org/en-US/d...
.класс_элемента {
text-decoration: line-through;
text-decoration-color: #ffe700;
}
Не упомянула в видео: всё это работает и в адаптиве — просто проверяйте опубликованную страницу в симуляторе, как обычно, и если необходимо, корректируйте положение либо самих элементов (если буллит вправо-влево относительно сетки, двиньте соответственно элемент или сам буллит, но его — уже в коде через значения left, в данном случае).
До связи👋, мои контакты указаны выше☝️, вливайся в чат Pro.дизайн 👉 https://t.me/pro_design23 🥳 За разработкой сайта или поменторить проект пишите в ЛС🙌😘