Tìm hiểu về nghệ thuật "CSS Pixel Art"

Hoàng Anh

Ban Quản Trị
Tham gia
1/2/17
Bài viết
21
Xếp hạng
15
#1

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.



RjVHfgn.jpg
  • Ư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
    • ...
Yêu cầu: Như đã nói ở phần nhược điểm các bạn cần có một ít kiến thức về Sass, không quá nhiều chỉ cần biết sử dụng biến và vòng lặp, hàm là đủ, các thuộc tính nâng cao trong bài sẽ được giới thiệu bên dưới. Đương nhiên phải có kiến thức HTML, CSS căn bản.
- 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
Các bước chuẩn gần như là hoàn tất, các thuộc tính trên có vẻ hơi khó hiểu nếu mới biết về Sass, bây giờ chúng ta sẽ đi tới bước phân tích

Phân tích tổng quát

zBmguWl.jpg


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)
Đã có phác thảo xong, ở trên chỉ là hình trái tim đơn giản nên khá lên ý tưởng khá nhanh bước tiếp theo ta sẽ cùng tiến hành code cho nó.

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>
Bước 2: Sau phần HTML, ta cần tạo ra một danh sách màu và kích thước chuẩn của mỗi pixel

Mã:
// Danh sách mã màu
$colors: (
    'o': transparent,
    'r': red
);

// Kích thước của mỗi pixel
$size: 10px;
Bước 3: Sau bước phân tích ở trên ta đã phân tích được hình ảnh có 6 hàng và 9 cột và ta sẽ thay mỗi màu bằng kí tự đã qui đinh ở danh sách màu ở bước 2 và mỗi hàng chúng ta sẽ bao quanh một cặp ngoặc tròn ()

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)
    )
);
Bước 4: Có thể nói đây là phần quan trọng nhất, và ở phần này ta sẽ tạo ra một hàm để có thể sử dụng lại mà chỉ cần thay các phần ở bước 3

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);
}
Bước 5: Thiết lập shadow cho phần tử html

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)
}
Sau một hồi căng thẳng cùng với cú pháp và chức năng khó hiểu từ các biến vòng lặp thì ta đã hoàn thành một bức ảnh trái tim đơn giản, nếu muốn sử dụng hình khác bạn chỉ cần thay ma trận ở bước 2 hoặc thêm nó sau heart và ngăn cách chúng bằng dấu phẩu ","


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:
Thank for watching!
 
Sửa lần cuối bởi điều hành viên:
Tác giả Chủ Đề Tương Tự Nơi Đăng Trả lời Ngày Đăng
HTML & CSS 0

Bình luận bằng Facebook

Thành viên trực tuyến

Không có thành viên trực tuyến.

Chủ Đề Tương Tự

Thống kê diễn đàn

Chủ đề
1,325
Bài viết
2,682
Thành viên
5,209
Thành viên mới nhất
Lý Hoàng Long
Top Bottom