SnippetUI
← Back to snippets

Секция с карточками фич

Раздел ознакомительных карточек функций для SaaS/лендинговых страниц. Компонент пользовательского интерфейса карты с градационной рамкой, которая мягко светится при наведении курсора.

HTMLCSS

Предварительный просмотр

Шесть функциональных карточек расположены в виде сетки, а граница градации загорается при наведении курсора.

Features

все здесь

⚡

высокая скорость обработки

Ответ в миллисекундах.

🛡️

безопасность

Архитектура нулевого доверия.

📊

аналитика

Аналитика в реальном времени.

🤝

сотрудничество

Слаженно вместе, как одна команда.

🌍

глобальный

Доступно в 148 странах мира.

🔧

настройка

Настраивается в соответствии с вашим брендом.

Варианты использования и функции

  • SaaS/целевая страница: раздел с описанием функций, который четко передает привлекательность продукта.

  • JavaScript не требуется: реализация на чистом CSS, включая эффекты наведения.

  • Цветовой код для каждой карты с использованием переменных CSS: централизованно управляйте цветом границы каждой карты с помощью переменной —card-color`.

  • эффект границы «маска-композит»: граница градиента четко отображается при наведении курсора мыши.

##Точки дизайна и UX

  1. Визуальное общение с помощью значков: значки мгновенно передают содержание каждой карточки.

  2. translateY(-4px) приподнятие: изысканное ощущение объема, не слишком глубокое, но слегка плавающее.

  3. opacity: 0 → 1 border: граница, которая появляется впервые при наведении курсора, вызывает удивление.

Как настроить

Измените количество карточек: просто добавьте/удалите элементы .feat-card в feat-grid.

изменить цвет границы:


.feat-c1 { --card-color: #f97316; } /* оранжевый */

Исправить количество столбцов сетки:


.feat-grid { grid-template-columns: repeat(3, 1fr); }

Код реализации

<section class="feat-section">

<div class="feat-header">

  <div class="feat-eyebrow">Features</div>

  <h2 class="feat-title">все здесь</h2>

</div>

<div class="feat-grid">

  <div class="feat-card feat-c1">

    <span class="feat-icon">⚡</span>

    <h3 class="feat-card-title">высокая скорость обработки</h3>

    <p class="feat-card-desc">Ответ в миллисекундах.</p>

  </div>

  <div class="feat-card feat-c2">

    <span class="feat-icon">🛡️</span>

    <h3 class="feat-card-title">безопасность</h3>

    <p class="feat-card-desc">Архитектура нулевого доверия.</p>

  </div>

  <div class="feat-card feat-c3">

    <span class="feat-icon">📊</span>

    <h3 class="feat-card-title">аналитика</h3>

    <p class="feat-card-desc">Аналитика в реальном времени.</p>

  </div>

  <div class="feat-card feat-c4">

    <span class="feat-icon">🤝</span>

    <h3 class="feat-card-title">сотрудничество</h3>

    <p class="feat-card-desc">Слаженно вместе, как одна команда.</p>

  </div>

  <div class="feat-card feat-c5">

    <span class="feat-icon">🌍</span>

    <h3 class="feat-card-title">глобальный</h3>

    <p class="feat-card-desc">Доступно в 148 странах мира.</p>

  </div>

  <div class="feat-card feat-c6">

    <span class="feat-icon">🔧</span>

    <h3 class="feat-card-title">настройка</h3>

    <p class="feat-card-desc">Настраивается в соответствии с вашим брендом.</p>

  </div>

</div>

</section>



<style>
.feat-section {

padding: 4rem 1rem;

font-family: system-ui, -apple-system, sans-serif;

color: white;

background: #0f172a;

box-sizing: border-box;

width: 100%;

}

.feat-section * { box-sizing: border-box; }

.feat-header {

text-align: center;

margin-bottom: 3rem;

}

.feat-eyebrow {

color: #6366f1;

font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

margin-bottom: 0.5rem;

}

.feat-title {

font-size: 2.5rem;

font-weight: 800;

margin: 0;

}

.feat-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));

gap: 1.5rem;

max-width: 1000px;

margin: 0 auto;

}

.feat-card {

position: relative;

background: rgba(255, 255, 255, 0.03);

border-radius: 1rem;

padding: 2rem;

text-align: center;

transition: transform 0.3s ease;

z-index: 1;

}

.feat-card::before {

content: '';

position: absolute;

inset: 0;

border-radius: inherit;

padding: 2px;

background: linear-gradient(135deg, var(--card-color, #6366f1), transparent);

-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

opacity: 0;

transition: opacity 0.3s ease;

z-index: -1;

}

.feat-card:hover {

transform: translateY(-4px);

}

.feat-card:hover::before {

opacity: 1;

}

.feat-icon {

font-size: 2.5rem;

display: block;

margin-bottom: 1rem;

}

.feat-card-title {

font-size: 1.25rem;

font-weight: 600;

margin: 0 0 0.5rem;

}

.feat-card-desc {

color: #9ca3af;

margin: 0;

line-height: 1.5;

}



.feat-c1 { --card-color: #f97316; }

.feat-c2 { --card-color: #3b82f6; }

.feat-c3 { --card-color: #10b981; }

.feat-c4 { --card-color: #8b5cf6; }

.feat-c5 { --card-color: #ec4899; }

.feat-c6 { --card-color: #06b6d4; }
</style>

Статус совместимости браузера

| Браузер | Статус совместимости |

|--------|-------|

| Хром 80+ | ✅ Полностью совместим |

| Firefox 99+ | ✅ Полностью совместим |

| Сафари 15.4+ | ✅ Совместимость |

| Край 80+ | ✅ Полностью совместим |