Sau sự nhầm lẫn kỳ lạ trong video trước về tiêu đề chúng tôi thực sự đang làm, lần này chúng tôi thực sự sẽ triển khai tiêu đề tùy chỉnh cho trang Giao dịch! Cái này do Meg Hunt thực hiện.
Giống như tất cả các tiêu đề, chúng tôi đã dành một chút thời gian để xem các tệp gốc và tìm ra cách nó sẽ có vị trí tốt nhất trên trang. Chúng tôi thử một vài tùy chọn, nhưng cuối cùng quyết định đặt nó trong một hộp hạn chế là tốt nhất (trái ngược với một cái gì đó như tiêu đề Demos trong đó tiêu đề tan thành một đường viền xung quanh nội dung.
Khi xuất nó, chúng tôi chơi với rất nhiều định dạng đồ họa khác nhau. Điều thú vị là phong cách cụ thể này là sự ngang nhau về cả chất lượng và kích thước tệp giữa PNG và JPG.webp. Chúng tôi xuất nó ở độ rộng 2000px, trông đẹp trên mọi màn hình. Chúng tôi cũng đạt khoảng 150k, một con số lớn nhưng đối với một đồ họa anh hùng như thế này, là một mục tiêu OK.
Chúng tôi bắt đầu lấy mẫu cho các giao dịch theo thứ tự, bao gồm việc xem xét cách các giao dịch là từng trường tùy chỉnh riêng lẻ được ngẫu nhiên hóa trước khi xuất. Chúng tôi sẽ dành nhiều thời gian hơn cho phần đánh dấu này và tất cả những điều đó sau đó, nhưng vì chúng tôi đang ở trong mẫu này, chuẩn bị mọi thứ sẵn sàng cho phần tiêu đề, chúng tôi cũng có thể dọn dẹp nó.
Chúng tôi xem xét một số khả năng khác nhau để đưa hình ảnh tiêu đề tùy chỉnh lên trang. Hình nền có ý nghĩa nhất, vì chúng tôi đang sử dụng một ngữ nghĩa
để thay thế tiêu đề và hình ảnh. Việc sử dụng background-size, chúng tôi kiểm tra cover, nhưng điều đó có thể gây ra sự cố. Chúng tôi kiểm tra có chứa, nhưng điều đó cho phép không gian bên ngoài. 100%thực hiện thủ thuật này, nhưng chúng ta sẽ cần tạo một hộp kiểu tỷ lệ khung hình để nó hoạt động độc đáo. Tuy nhiên, điều đó thật dễ dàng, chúng tôi chỉ tạo chiều cao bằng 0 và sử dụng phần trăm đệm trên cùng để làm cho điều đó hoạt động (hộp đệm).
Đây là tiêu đề tùy chỉnh thứ bảy mà chúng tôi đã thực hiện và mỗi một tiêu đề trong số chúng đều được thực hiện khác nhau. Thiết kế web hả? Thật là một chuyến đi.