Chúng tôi nhảy về phía trước chỉ một chút ở đây. Đây là một loạt video screencast khá toàn diện, nhưng nó chỉ có 40 giờ hoặc lâu hơn và tất nhiên dự án thực tế này thực sự giống như một vài trăm. Trong trường hợp này, bước nhảy về phía trước là để tạo kiểu dàn trải hai trang một chút. Chúng tôi đi qua những thay đổi trong thời gian đầu.
Các trang bên trái và bên phải có một tên được chia sẻ và một tên lớp khác nhau. Điều này rất phổ biến mà tôi thấy trong rất nhiều trường hợp khác nhau trong thiết kế web. Trong trường hợp này, các trang có cùng độ dốc và cùng kích thước. Nhưng chúng khác nhau khi chúng tôi áp dụng skew()biến đổi CSS3 . Điều này cho chúng ta một hiệu ứng “mở sách” khá gọn gàng. Bởi vì tất cả các hiệu ứng này đều được tạo bằng CSS, chúng có quy mô độc đáo (theo cách mà một hình ảnh gần như chắc chắn sẽ không có).
Chúng tôi đã có một giải pháp thông minh về chiều cao bằng nhau, nhưng không may là do nội dung nghiêng về cuốn sách mở thông minh của chúng tôi, điều đó đã bị hỏng. Thay vào đó, chúng tôi chỉ sử dụng một chút JavaScript.
Đầu tiên, trong khi xem xét JavaScript, chúng tôi viết một dòng sẽ ẩn bất kỳ “chữ cái” nào không có con. Ví dụ: không có bộ chọn nào bắt đầu bằng chữ “Z” nhưng chúng tôi có một trang được xuất bản được gọi là chỉ để toàn diện. Chúng tôi khám phá những điều đó (và sau đó ẩn chúng) bằng :has()bộ chọn jQuery cực kỳ hữu ích .
Để có chiều cao bằng nhau, chúng tôi đo cả hai cột, quyết định cột nào cao nhất, sau đó đặt cả hai cột đó thành cột cao nhất. Chúng tôi phải sử dụng setTimeout hơi khó khăn để nó hoạt động chính xác vì việc tải @ font-face mất một chút thời gian và ảnh hưởng đến độ cao. Cuối cùng chúng tôi có thể sử dụng một số loại gọi lại trình tải phông chữ. (Hoặc, điều đó có thể là quá mức cần thiết).
Sau đó, chúng tôi chuyển sang các trang niên giám đơn lẻ. Vận tải nhanh chóng ngay bây giờ! Chúng tôi đã làm điều này rất nhiều lần nên không có gì ngạc nhiên khi chúng tôi đang tiến nhanh hơn. Về cơ bản, chúng tôi chỉnh sửa mẫu này thành hình dạng giống như cách chúng tôi tạo kiểu cho một bài đăng blog hoặc một trang chung chung hoặc bất cứ thứ gì tương tự.
Chúng tôi sử dụng “thanh màu đen” cho đường dẫn, gắn kết mẫu thiết kế này như một thứ mà chúng tôi sẽ sử dụng nhiều lần để điều hướng phần trang web.