Hình ảnh trên các "website" là một vấn đề khiến cho các nhà phát triển web quan tâm đến vì nó ảnh hưởng hầu hết đến tốc độ của website, hiện nay nhờ các kĩ thuật như SVG và Canvas thì nó đã giảm bớt được phần nào nhưng vẫn còn khá tốn thời gian viết code đặc biệt là Canvas được trình duyệt biên dịch từ Javascript cũng tốn khá nhiều thời gian. Và để giải quyết cho chủ đề này CSS có một kĩ thuật để tạo ra các bức ảnh đơn giản dạng pixel từ các màu sắc và cách thực hiện rất đơn giản.
- Ưu điểm:
- Dễ thực hiện
- Tốc độ xử lí nhanh
- Không bị vỡ pixel như ảnh thông thường
- Có thể sử dụng cấu trúc này cho các hình vẽ khác nhau
- Hỗ trợ tốt cho các trình duyệt cũ
- ...
- Nhược điểm:
- Các hình ảnh chỉ ở mức độ đơn giản
- Cần một ít kĩ thuật về Sass
- ...
- Các thuộc tính Sass nâng cao sử dụng trong bài:
- length($list): Trả về chiều dài của một danh sách
- nth($list, $n): Trả về một mục cụ thể trong danh sách
- map-get($map, $key): Trả về giá trị của một phần tử lấy từ key trong một map, list
Phân tích tổng quát
Như ở bức ảnh trên bức ảnh ta sẽ bắt đầu phân tích một tấm ảnh pixel trái tim đơn giản, rút ra từ hình ta có các nhận xét sau
- Tỉ lệ khung hình 6/9 (6 dòng, 9 cột)
- Màu sắc: Red & White (Ở đây có thể dùng Transparent thay cho White cũng được)
Thực hiện bản nháp
Bước 1: Phần HTML chỉ cần tạo một span hoặc div là đủ và có id và class tùy ý, ở đây mình đặt là #icon
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<span id="icon"></span>
</body>
</html> Mã:
// Danh sách mã màu
$colors: (
'o': transparent,
'r': red
);
// Kích thước của mỗi pixel
$size: 10px; CSS:
$pixel-art: (
heart: (
(o o r r o r r o o)
(o r r r r r r r o)
(o r r r r r r r o)
(o o r r r r r o o)
(o o o r r r o o o)
(o o o o r o o o o)
)
); Mã:
// Truyền vào 2 tham số là ma trận là list đã xây dựng ở bước 3 và kích thước mỗi pixel
@function pixelize($matrix, $size) {
// Tạo một biến shadow rỗng
$shadow: '';
// Lấy số hàng của ma trận hình trái tim ở bước 2
$rows: length($matrix);
// Lặp để lấy từng nội dung của từng hàng
@for $row from 1 through $rows {
$row-num: nth($matrix, $row);
// Lấy từng phần tử trong một hàng (Lấy số cột)
@for $col from 1 through length($row-num) {
// Biến lấy phần tử trong một hàng
$dot: nth($row-num, $col);
// Lấy mã màu phù hợp từ list color từ phần tử phù hợp
$get-color: map-get($colors, $dot);
// Tạo shadow từ các dữ liệu đã có (Lấy số cột và hàng nhân với kích thước của pixel để lấy vị trí)
$shadow: $shadow + ($col * $size) + ' ' + ($row * $size) + ' ' + $get-color;
// Thêm dấu phẩy vào mỗi lần tạo một shadow trừ shadow cuối
@if not ($col == length($row-num) and $row == $rows) {
$shadow: $shadow + ',';
}
}
}
// Trả về $shadow
// Do khi nối chuỗi nó sẽ xuất hiện cặp dấu quote bao quanh "", hàm unquote sẽ loại bỏ cặp dấu này vì CSS sẽ không đọc nó được
@return unquote($shadow);
} CSS:
#icon {
display: block;
width: $size;
height: $size;
// Chạy hàm pixelize và truyền tham số
box-shadow: pixelize(map-get($pixel-art, heart), $size)
}Lời kết
Kĩ thuật này nghe có vẽ đơn giản nhưng cũng chưa chắc chắn với một số bạn, ngay từ khi mình bắt đầu tìm hiểu nó cũng thấy nó rất mông lung và khó hiểu ở phần thiết lập hàm nhưng nếu hiểu và tách từng công đoạn dễ phân tích hơn . Đây cũng là một kĩ thuật rất hay và hữu ích. Các bạn cũng có thể tham khảo thêm về css pixel từ một số nguồn sau:
- Let's Build A CSS Game
- Fun Times With CSS Pixel Art | CSS-Tricks
- Sass Pixel Art | Una Kravets Online
Thank for watching!
Sửa lần cuối bởi điều hành viên:
