# 97: Chụp ảnh Almanac - Thủ thuật CSS

Anonim

Almanac là một thứ được đưa ra trong phiên bản 9 và không bao giờ hoàn thành. Nó đang ngày càng gần hơn và gần hơn mỗi ngày. Vì vậy, trong phiên bản v10, chúng tôi sẽ thiết kế xung quanh giả định rằng nó đã “xong”.

Chúng tôi xem xét thiết kế v9 hiện có, khá tốt nhưng không phục vụ nội dung quá tốt. Nói nhanh sang một bên, chúng ta thấy rằng việc di chuyển cho các chữ cái in đậm khi di chuột, thường là không (thường đẩy văn bản khác ra xa và trông kỳ lạ) nhưng nó là một hiệu ứng tuyệt vời đối với các chữ cái có vị trí bị khóa này.

Chúng tôi đã có sẵn đồ họa tiêu đề tùy chỉnh, vì vậy chúng tôi đưa nó vào Photoshop để chúng tôi có thể chỉnh sửa thiết kế theo ngữ cảnh. Một phần điều tôi thích ở bức tranh minh họa của Giovanni là nó khiến tôi nhớ đến cuốn sách vật lý thường thấy ở nơi tôi lớn lên: The Farmer's Almanac. Chúng tôi quyết định sử dụng phép ẩn dụ cuốn sách vật lý và đưa nó vào thiết kế này. Không phải biến hình hay bất cứ thứ gì, mà chỉ là một điểm nhấn về chiều hướng.

Chúng tôi làm cho nó trải rộng hai trang và sử dụng gradient để gợi ý về bóng và ràng buộc. Chúng tôi chơi với một số bóng tối để mở rộng hiệu ứng.

Một lần nữa mở rộng phép ẩn dụ “cuốn sách”, chúng tôi chọn ra một phông chữ viết tay để hiển thị các chữ cái trong cuốn sách, khiến nó giống một cuốn nhật ký hơn là cuốn sách mà tôi thấy ổn.

Khu vực này được chia thành hai (hoạt động tốt với bố cục 2 trang). Một bên dành cho thuộc tính CSS và bên kia dành cho bộ chọn CSS. Để giúp hiển thị rõ ràng hơn về mặt trực quan (ngoài việc đánh dấu hai trang), hai mặt có màu cơ bản khác nhau.

Chúng tôi suy nghĩ về kiểu chữ một chút và vật lộn với một số quyết định về nơi chúng tôi có thể sử dụng phông chữ viết tay này và nơi nào chúng tôi không thể. Chúng tôi cũng phải vật lộn một chút với thực tế là chúng tôi đã (một lần nữa) sử dụng toàn bộ trang để khám phá nội dung. Chắc chắn là một điều tốt, nhưng một lần nữa chúng tôi đã xóa quảng cáo khá quan trọng đối với sự tồn tại của trang web.