Раскрывающиеся карточки в стиле macOS на Tilda

Из блока "Текст" - TX16N
Раскрывающиеся карточки в стиле macOS на Tilda
Недавно делал промо страницу, идея была стилизовать блоки под виджеты macOS и iOS, вроде получилось, итог можете посмотреть тут. Хотел добавить блок аккордеон для FAQ, но заказчик от него отказался, решил опубликовать код тут, может кому понадобится. Код под примером, он достаточно простой, нужно только заменить id блока. Видео внизу.

Как сделать блок в стиле macOS на Tilda?

Пример

High Quality
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.
Good Support
Our managers are always ready to answer your questions. You can call us at the weekends and at night. Also you can visit our office for personal consultation.
Individual Approach
Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.

Реализация

  1. Создаем текстовый блок TX16N;
  2. Делаем настройки:
    Стили карточки:
    ✅ Цвет фона иконки - #ff5e57;
    ✅ Цвет фона иконки при наведении - #ff5e57;
    ✅ Толщина бордюра - 0px;
    ✅ Отступ заголовка - 0px;
    ✅ Толщина линий уконки - 0px;
    Типографика:
    ✅ Заголовок цвет - #ffffff;
    ✅ Размер шрифта заголовка - 16px;
    ✅ Заголовок межстрочное расстояние - 1;
    ✅ Описание цвет - #ffffff;
    ✅ Описание отступ сверху - 0px;
    ✅ Описание отступ снизу - 0px;
  3. Копируем код и вставляем его в блок T123;
  4. Копируем id блока TX16N;
  5. Заменяем id TX16N в коде на свой;
  6. Публикуем страницу.
<!-- раскрывающиеся карточки в стиле macOS | anku.im/blog/macos-style-accordion -->
<script>
    $('#rec285487923').addClass('macOS-style-accordion'); //Замените id блока TX16N на свой - он в первых скобках строки
</script>
<style>
    .macOS-style-accordion .t585__wrapper {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 24px;
    }
    .macOS-style-accordion .t585__header {
        border-top: none!important;
        padding: 8px 8px 4px 8px!important;
        background: #1E1E1E;
        border-radius: 10px 10px 0px 0px;
        text-align: center;
        box-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.15), inset 0px -0.5px 0px rgba(0, 0, 0, 0.05);
    }
    .macOS-style-accordion .t585__content {
        background: rgba(40, 40, 40, 0.6);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px)
        padding: 8px;
        border-radius: 0px 0px 10px 10px;
    }
    .macOS-style-accordion .t585__textwrapper {
        text-align: center;
        padding: 8px!important;
    }
    .macOS-style-accordion .t585__header .t585__title {
        position: relative!important;
        top: -2px!important;
    }
    .macOS-style-accordion .t585__circle {
        width: 12px;
        height: 12px;
        top: 12px;
    }
    .macOS-style-accordion .t585__circle::after {
        content:'';
        display:block;
        position:relative;
        background:#FFBB2E;
        border-radius:100%;
        width: 12px;
        height: 12px;
        left: 20px;
        top: -12px;
    }
    .macOS-style-accordion .t585__circle::before {
        content:'';
        display:block;
        position:relative;
        background:#38C149;
        border-radius:100%;
        width: 12px;
        height: 12px;
        left: 40px;
    }
    .macOS-style-accordion .t585__header:hover .t585__icon {
        opacity:1!important;
    }
    .macOS-style-accordion .t585__icon {
        left: 8px;
        right:auto;
        top: 0;
        width: 8px;
        height: 8px;
        padding: 0;
    }
    .macOS-style-accordion .t585__lines {
        display: none;
    }
</style>
Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)
AnKu
Тот, кто пишет
Нужен видео разбор?
Не нашли что искали?
Напишите свой вопрос или предложение через форму ниже
Понравился материал? Поблагодари проект!
Made on
Tilda