Блок в стиле macOS на Tilda

От /

Пожалуйста, внимательно и пошагово выполняйте инструкцию, во избежание ошибок!

Недавно делал промо страницу, идея была стилизовать блоки под виджеты macOS и iOS, вроде получилось, итог можете посмотреть тут. Хотел добавить блок аккордеон для FAQ, но заказчик от него отказался, решил опубликовать код тут, может кому понадобится. Код под примером, он достаточно простой, нужно только заменить id блока.

Пример реализации

Инструкция

Шаг 1

  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>

Чат поддержки
Чат поддержки