Ca ngợi bóng tối

Được xuất bản lại bởi Plato

Người theo dõi: 0

Người bạn thân Robin của chúng ta có một bài luận mới tên là Ca ngợi bóng tối. Bây giờ, trước khi bạn đến đó để tìm kiếm các phần cố định về bóng hộp CSS, bóng văn bản và bộ lọc bóng… đây là không phải cái đó. Đó là một bài luận về nhiếp ảnh và những gì Robin đã học được về việc tạo bóng bằng máy ảnh.

Vậy tại sao lại chia sẻ điều này? Bởi vì thật tuyệt vời khi anh ấy đã tạo một trang hướng dẫn bài viết dành riêng cho một bài luận. Và bạn sẽ học được nhiều điều về CSS nếu bạn mở DevTools trên đó:

Các kỹ thuật định tâm. Lưu ý cách CSS Grid được sử dụng trên <body> chỉ đơn giản là để tập trung vào cuốn sách nhỏ. Sau đó Robin với lấy nó lần nữa trên mỗi .frame của bài luận để làm điều tương tự với nội dung.
Hình nền “giả”. Robin lẽ ra có thể tự mình làm được nhiều việc bằng cách tạo một lớp CSS cho mỗi .frame để có được hình ảnh nền. Thay vào đó, anh ta sử dụng object-fit: cover trên HTML nội tuyến <img>s để duy trì tỷ lệ khung hình trong khi điền vào .frame thùng đựng hàng. (Thực ra anh ấy đã viết về điều này trước đây.) Điều đó chắc chắn giúp tiết kiệm rất nhiều CSS, nhưng nó cũng cho phép anh ấy sử dụng văn bản thay thế nếu cần. Tôi tự hỏi liệu một <figure>/<figcaption> thay vào đó, cấu trúc có thể hoạt động ở đây nhưng tôi nghi ngờ rằng nó sẽ mang lại nhiều lợi ích bổ sung cho những gì đang diễn ra.
Xếp chồng bối cảnh. Một lợi ích khác của những hình nền giả đó? Họ sử dụng khả năng định vị tuyệt đối để tạo ra bối cảnh xếp chồng, cho phép Robin đặt z-index: 0 trên các hình ảnh. Bằng cách đó, văn bản được xếp ngay trên đầu với z-index: 1. Một lần nữa, CSS Grid đang xử lý tất cả việc căn giữa để mọi thứ được căn chỉnh đẹp mắt.
Chụp cuộn. tôi luôn luôn yêu nó khi tôi nhìn thấy cuộn CSS bị giật trong tự nhiên. Robin đã có một lựa chọn tuyệt vời khi sử dụng nó ở đây vì nó thực sự mang lại trải nghiệm lật trang toàn diện khi cuộn qua các khung. Cuộn ngang có thể gây khó chịu nhưng cũng cực kỳ thanh lịch khi được thực hiện tốt như ở đây khi nó nâng cao thiết kế cột hẹp. Nếu bạn muốn có một lời giải thích hay về cách thức hoạt động của nó, Robin cũng có viết về chụp ảnh cuộn ngang.