Перейти к содержимому

Как легко и быстро верстать красивые списки с буллитами в Тильде

Наталья Чистякова

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 🥳 За разработкой сайта или поменторить проект пишите в ЛС🙌😘