Bài viết dưới đây của mình sẽ chia sẻ cách vẽ một hình ảnh pixel bằng thuộc tính box-shadow của CSS Mong rằng bài viết của mình sẽ đem lại cho các bạn những phút giây thoải mái cũng như một số trải nghiệm thú vị với CSS

1. Xây dựng

Đầu tiên, tạo một block bằng cách sử dụng div

Box-shadow của một block sẽ phụ thuôc theo width và height của nó. Bạn có thể áp dụng nhiều “lớp” box-shadow cho nó bằng cách tách các thuộc tính position-x,position-y, blur-radius, color của từng lớpbox-shadow bằng dấu phẩy

Một block thuộc loại “basic” nhất:

/ CSS
.block {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 black, 10px 0 0 black;
}

// HTML
<div class="block"></div>
 

Tiếp theo, xây dựng hình ảnh bằng cách sử dụng toạ độ

Dưới đây là tọa độ của hình trái tim mà chúng tra muốn xây dựng:

Việc bây giờ là sử dụng những tọa độ đã được đánh dấu ở hình trên để tạo thành một hình trái tim hoàn chỉnh. Sử dụng công thức áp dụng nhiều lớp box-shadow và điều chỉnh toạ độ theo hình trên, ta được kết quả dưới đây:

Source code hoàn chỉnh:

Link CodePen:

2. Lời kết

Với thuộc tính box-shadow, mọi người hoàn toàn có thể sáng tạo ra nhiều hình ảnh pixel độc đáo và mới lạ hơn hình trái tim đơn giản này. Mong rằng bài viết này sẽ giúp ích được phần nào cho mọi người trong việc sáng tạo cũng như nghĩ những ý tưởng hay ho với CSS.

Nguồn: Sưu tầm từ Devmaster via Viblo