SnippetUI
← Back to snippets

Section Card Tính Năng

Phần thẻ giới thiệu tính năng cho SaaS/trang đích. Thành phần giao diện người dùng thẻ có đường viền chuyển màu phát sáng dịu nhẹ khi di chuột.

HTMLCSS

Xem trước

Sáu thẻ chức năng được sắp xếp theo dạng lưới và đường viền chuyển màu sẽ sáng lên khi di chuột.

Features

mọi thứ đều ở đây

⚡

xử lý tốc độ cao

Phản hồi tính bằng mili giây.

🛡️

an ninh

Kiến trúc không tin cậy.

📊

phân tích

Thông tin chi tiết theo thời gian thực.

🤝

sự hợp tác

Liền mạch với nhau như một đội.

🌍

toàn cầu

Có mặt ở 148 quốc gia trên thế giới.

🔧

tùy biến

Có thể tùy chỉnh để phù hợp với thương hiệu của bạn.

Trường hợp sử dụng và tính năng

  • SaaS/Landing Page: Phần giới thiệu chức năng truyền tải rõ nét sự hấp dẫn của sản phẩm.

  • Không cần JavaScript: Triển khai CSS thuần túy bao gồm các hiệu ứng di chuột.

  • Mã màu theo thẻ sử dụng biến CSS: Quản lý tập trung màu đường viền của từng thẻ bằng biến --card-color.

  • mask-composite: Đường viền chuyển màu xuất hiện rõ ràng khi di chuột.

Điểm thiết kế và UX

  1. Giao tiếp trực quan với các biểu tượng: Các biểu tượng truyền tải ngay nội dung của từng thẻ.

  2. translateY(-4px) nâng lên: Cảm giác tinh tế về âm lượng không quá sâu nhưng nổi nhẹ.

  3. opacity: 0 → 1 border: Đường viền xuất hiện lần đầu tiên khi di chuột tạo ra trải nghiệm bất ngờ.

Cách tùy chỉnh

Thay đổi số lượng thẻ: Chỉ cần thêm/xóa phần tử .feat-card trong feat-grid.

thay đổi màu đường viền:


.feat-c1 { --card-color: #f97316; } /* trái cam */

Sửa số lượng cột lưới:


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

Mã triển khai

<section class="feat-section">

<div class="feat-header">

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

  <h2 class="feat-title">mọi thứ đều ở đây</h2>

</div>

<div class="feat-grid">

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

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

    <h3 class="feat-card-title">xử lý tốc độ cao</h3>

    <p class="feat-card-desc">Phản hồi tính bằng mili giây.</p>

  </div>

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

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

    <h3 class="feat-card-title">an ninh</h3>

    <p class="feat-card-desc">Kiến trúc không tin cậy.</p>

  </div>

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

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

    <h3 class="feat-card-title">phân tích</h3>

    <p class="feat-card-desc">Thông tin chi tiết theo thời gian thực.</p>

  </div>

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

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

    <h3 class="feat-card-title">sự hợp tác</h3>

    <p class="feat-card-desc">Liền mạch với nhau như một đội.</p>

  </div>

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

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

    <h3 class="feat-card-title">toàn cầu</h3>

    <p class="feat-card-desc">Có mặt ở 148 quốc gia trên thế giới.</p>

  </div>

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

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

    <h3 class="feat-card-title">tùy biến</h3>

    <p class="feat-card-desc">Có thể tùy chỉnh để phù hợp với thương hiệu của bạn.</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>

Trạng thái tương thích với trình duyệt

| Trình duyệt | Trạng thái tương thích |

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

| Chrome 80+ | ✅ Hoàn toàn tương thích |

| Firefox 99+ | ✅ Hoàn toàn tương thích |

| Safari 15.4+ | ✅ Tương thích |

| Cạnh 80+ | ✅ Hoàn toàn tương thích |