Các mẫu Halftone, những hình ảnh chấm dữ dội đó, là nền tảng chính của in ấn và thiết kế web. Mặc dù theo truyền thống được sử dụng như một phương tiện tái tạo trung thực hình ảnh in, nó cũng đã trở thành một phong cách của riêng mình.
Ngày nay, các mẫu bán sắc được sử dụng làm nền hoặc để cung cấp một số hiệu ứng đặc biệt siêu thực cho hình ảnh. Và, khi CSS và JavaScript đã phát triển, các nhà thiết kế cũng đã tìm ra cách tích hợp hiệu ứng vào mã. Kết quả có thể tuyệt vời.
Chúng ta hãy xem một số ví dụ về cách halftone được thực hiện thông qua mã. Như bạn sẽ thấy, có một số bức ảnh và kỹ thuật khác nhau để đưa mô hình cổ điển này lên web.
Nhạc chuông ảnh của con mèo của bạn (hoặc không phải con mèo)
Đây có lẽ là cách thực hiện halftone quen thuộc nhất. Nó bao gồm thêm hiệu ứng vào một bức ảnh hiện có (một con mèo, trong trường hợp này). Nhưng đoạn trích này cũng hoàn toàn tùy biến. Bạn có thể thay thế các điểm bằng, ví dụ như biểu tượng cảm xúc hoặc văn bản. Ngoài ra, bạn có thể thay đổi kích thước của từng điểm. Và vâng, bạn có thể trao đổi con mèo với khuôn mặt, nhưng tại sao?
Xem bút
Ycw halftone
Báo chí cho midtones
Đây là một cách sử dụng rất sáng tạo cho Halftones. Một mô hình tinh tế được hiển thị trên nút này, với hiệu ứng cuộn mạnh hơn một chút. Nhưng nhấp vào sẽ kích hoạt một mẫu có độ tương phản cao, chắc chắn sẽ thu hút sự chú ý của bạn.
Xem bút
Nút Taylor Halftone
Tiết lộ bí mật
Hiệu ứng đèn pin đã trở nên khá phổ biến trong thời gian gần đây. Ở đây, nó được kết hợp với một mẫu bán sắc "làm sáng" văn bản ẩn. Đó là một sự tương tác thú vị, và người đội trưởng mang đến một chút rung cảm retro / tàn bạo.
Xem bút
Tiết lộ văn bản ẩn của Tyler Durrett
Lấy một giọng điệu tinh tế hơn
Không có luật nào cho rằng âm mid phải to, và đoạn này là bằng chứng. Các hiệu ứng halftone kết hợp hoàn hảo thành một mô hình nở chéo. Kết quả là một cái gì đó độc đáo và tinh tế. Điểm thưởng cho việc xây dựng với CSS thuần túy.
Xem bút
Devin Giá halftone chéo mẫu nở
Hiệu ứng cuộn từ xa
Đây là một đoạn trích trông giống như một cái gì đó từ một bộ phim kinh dị khoa học viễn tưởng. Một bức ảnh bán sắc màu xanh đen nhìn chúng tôi từ bên kia màn hình. Di chuột qua nó và một phần của hình ảnh sẽ mờ dần vào bóng tối.
Xem bút
Halftone Aberration của Théo Gil
Parallax Sans BS
Một hình ảnh siêu thực khác của hiệu ứng, bức ảnh này có một loạt các chấm màu chóng mặt. Ngoài ra, di chuyển con trỏ tạo ra hiệu ứng thị sai 3D cho thấy đường viền tinh tế nổi trên hình ảnh chính. Kích thước được thêm vào làm cho hiệu ứng thậm chí còn thú vị hơn.
Xem bút
Parallax Halftone của Eric Jackson Wood
Duet mọi thứ
Nhờ các chế độ hòa trộn CSS, hiệu ứng tách dòng có thể được thêm vào hầu hết mọi thứ. Trong ví dụ này, một sự pha trộn tuyệt đẹp được đặt lên trên cùng của nhiều bức ảnh. Di chuột qua một cho thấy màu sắc thực sự của nó. Đó là một sử dụng rất thực tế mà có sức thuyết phục, nhưng không được trên đầu trang.
Xem bút
Chế độ pha trộn CSS của Jos van Weesel
Nhiều hơn bóng văn bản trung bình
Hãy kết thúc mọi thứ với một trường hợp sử dụng thực tế khác. Ở đây chúng ta có một kiểu chữ ngắn cơ bản sử dụng màu bù. Hai ví dụ đầu tiên sử dụng một bóng màu rắn, hoạt động tốt. Nhưng bộ thứ hai có mô hình bán sắc, mang lại cảm giác nghệ thuật hơn.
Xem bút
Mark's Strokes, Shadows + Halftone Effects
Một mô hình của sự đổi mới
Điều tốt nhất về việc kết hợp mã với hiệu ứng hình ảnh cổ điển là nó mở ra một thế giới hoàn toàn mới. Chắc chắn, chúng ta có thể thêm một mẫu bán sắc cho một yếu tố thiết kế, nhưng tại sao dừng lại ở đó?
Các nhà thiết kế đang tìm kiếm cách sử dụng thông minh mới cho các hiệu ứng này. Trong các đoạn mã trên, halftone được sử dụng theo cả cách truyền thống và sáng tạo. Giới hạn cũ chỉ tồn tại nếu chúng ta muốn chúng tồn tại.
Bạn muốn xem thêm ví dụ về các mẫu halftone? Kiểm tra bộ sưu tập CodePen của chúng tôi để sử dụng sáng tạo khác.
