📊 Tạo Biểu Đồ Wireframe Đơn Giản với FSCSS
Bạn đã bao giờ muốn tạo một biểu đồ mang lại cảm giác hiện đại, tối giản và giống wireframe chưa? Trong bài viết này, tôi sẽ hướng dẫn bạn cách xây dựng biểu đồ giao dịch trong 24 giờ bằng FSCSS, nơi mà các mảng và cách viết tắt giúp mọi thứ trở nên sạch sẽ hơn.
👉 Xem demo trực tiếp trên CodePen tại đây.
🔹 Cấu Trúc HTML
Chúng ta giữ mọi thứ đơn giản:
- Một
<section>để bao bọc tất cả - Một
<header>cho tiêu đề & phụ đề - Một container
.chartcho các thanh - Một footer
.legend
html
<section class="crypto-trans wireframe" aria-label="Giao dịch tiền điện tử (24h)">
<header>
<h3>24h PPGM — Khung</h3>
<small>Gem tranf</small>
</header>
<div class="chart" role="img" aria-describedby="chart-desc">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<p id="chart-desc" class="sr-only">
Biểu đồ cột hiển thị dữ liệu giao dịch tiền điện tử trong 24 giờ.
</p>
<footer class="legend">
<span class="dot"></span>
<span>GMframe = ! • NGPP = 10% bước</span>
</footer>
</section>🔹 Thiết Lập Mảng FSCSS
Thay vì viết CSS lặp đi lặp lại, FSCSS cho phép chúng ta lưu trữ các giá trị trong các mảng và ánh xạ chúng lên các thanh.
scss
/* Mảng dữ liệu */
@arr tokens[PPGM, Wthdr, Spins, fel, NGPP, NGGM, PP]
@arr heights[65%, 82%, 58%, 74%, 33%, 49%, 71%]
@arr colors[#0ff, #77f, #8af, #9cf, #6df, #4ef, #2dd]
@arr length[1,2,3,4,5,6,7]- tokens: nhãn dưới mỗi thanh
- heights: chiều cao của các thanh (theo %)
- colors: màu sắc đường viền cho mỗi thanh
- length: chỉ số số cho tooltip
🔹 Kiểu Dáng và Các Đặc Tính Cơ Bản
Chúng ta định nghĩa lề, chiều rộng thanh, màu sắc và nền bảng. Grid của .chart tự động tạo ra một cột cho mỗi thanh.
scss
$pad: 1.25rem;
$radius: 14px;
$barW: 56px;
$gap: 14px;
$grid: rgba(255,255,255,.08);
$muted: #9fb1d9;
$bg: #0b1020;
$panel: rgba(255,255,255,.03);
.crypto-trans {
width: min(90%, 1000px);
margin: 4rem auto;
padding: $pad!;
color: #dfe7ff;
background: $bg!;
border-radius: $radius!;
box-shadow: 0 20px 60px rgba(0,0,0,.4),
inset 0 0 0 1px rgba(255,255,255,.06);
}🔹 Các Thanh và Hiệu Ứng Wireframe
Mỗi thanh được định kiểu bằng box-shadow thay vì màu nền rắn — tạo ra hiệu ứng glow như wireframe. Chiều cao, nhãn và màu sắc được tự động gán thông qua các mảng.
scss
/* Kiểu dáng thanh cơ bản */
.bar {
position: relative;
height: 0;
border-radius: 10px 10px 0 0;
background: transparent;
box-shadow: inset 0 0 0 2px currentColor,
0 0 12px rgba(0,255,255,.08);
transition: height 900ms cubic-bezier(.2,.8,.2,1);
}
/* Chiều cao */
.bar:nth-child(@arr.heights[]) {
height: @arr.heights[];
}
/* Màu sắc */
.bar:nth-child(@arr.colors[]) {
color: @arr.colors[];
}
/* Nhãn */
.bar:nth-child(@arr.tokens[]):after {
content: "@arr.tokens[]";
position: absolute;
inset: auto 0 -1.6rem 0;
text-align: center;
font-size: .8rem;
color: var(--muted);
}🔹 Tooltip Khi Di Chuyển Chuột
Di chuyển chuột qua bất kỳ thanh nào để xem tên token + chiều cao.
scss
.bar:nth-child(@arr.length[]):hover::before {
$length: @arr.length[];
content: "@arr.tokens[$length!] • @arr.heights[$length!]";
position: absolute;
left: 50%;
bottom: calc(100% + .6rem);
transform: translateX(-50%);
padding: .35rem .55rem;
font-size: .75rem;
border-radius: 8px;
background: rgba(5,12,28,.95);
}🔹 Điều Chỉnh Responsive
Trên các màn hình nhỏ hơn, chúng ta thu hẹp chiều rộng thanh và ẩn các thanh thừa để giữ cho mọi thứ dễ đọc.
scss
@media (max-width: 900px) {
.crypto-trans { $barW: 44px; }
.chart { height: 19rem; }
}
@media (max-width: 700px) {
.crypto-trans { $barW: 40px; }
.chart { height: 17rem; }
.chart .bar:nth-child(n+7) { display: none; }
}
@media (max-width: 520px) {
.crypto-trans { $barW: 38px; }
.chart { height: 15rem; }
.chart .bar:nth-child(n+6) { display: none; }
}🎯 Kết Luận
Chỉ với một khối HTML + các mảng FSCSS, chúng ta đã xây dựng một biểu đồ giao dịch tiền điện tử kiểu dáng wireframe mà:
- ✔ tự động gán nhãn, chiều cao và màu sắc
- ✔ có tooltip khi di chuyển chuột
- ✔ có khả năng co giãn responsive
🙏 Cảm ơn bạn đã đọc
