tại đây vì nó chứa một nhóm thông tin về trang web tạo nên các chi tiết hội nghị quan trọng và điều hướng đến tất cả các liên kết. Trong trường hợp một trình đọc màn hình đang đọc nó, nó ngắn gọn và dễ truy cập cho người dùng.
Ok, bây giờ hãy nói về các phong cách. Những gì mà Yêu cầu của thành phần này là như sau:
Lan truyền các yếu tố theo chiều cao của khung nhìn
Căn chỉnh các mục ở đầu
Sửa nó vào cửa sổ
Hiển thị văn bản ở bên cạnh
CSS yêu cầu khoảng cách bằng nhau và có thể căn chỉnh ở đầu hoặc giữa là trường hợp sử dụng hoàn hảo cho Flexbox. Chúng tôi không phải làm quá nhiều để có được điều đó.
Đối với phần tử cha mẹ .site__header và .site__nav-list chúng tôi sẽ thêm kiểu flex này:
.site__ tiêu đề,
.site__nav-list {
hiển thị: flex;
}
Điều này làm cho những đứa trẻ trực tiếp của các yếu tố đặt cạnh nhau và sắp xếp ở đầu các yếu tố.
Dành cho những đứa trẻ trực tiếp của .site__header chúng tôi muốn chúng phát triển để lấp đầy không gian có sẵn bằng cách thêm vào như sau:
.site__ tiêu đề> * {
flex: 1 1 tự động;
}
Tài sản flex là một tài sản tốc ký cho trẻ em flex. Ba giá trị đại diện cho flex-grow flex-co và flex-cơ sở . Các giá trị này biểu thị tăng lên không gian có sẵn và có thể thu nhỏ / thu nhỏ hơn nếu cần và auto là giá trị mặc định cho trình duyệt xem thuộc tính chiều rộng hoặc chiều cao của phần tử thay vì chỉ định giá trị chiều rộng cụ thể như tỷ lệ phần trăm.
Cuối cùng cho .site__nav-list chúng tôi sẽ thêm justify-content: space-between để các yếu tố trải đều trong không gian có sẵn.
.site__nav-list {
justify-content: không gian giữa;
}
Được rồi, bây giờ hãy để Hoàn thành tiêu đề bằng cách xoay nó về phía nó và sửa nó vào cửa sổ!
.site__ tiêu đề {
chiều cao: 100%;
đệm: 1.25rem 0;
vị trí: cố định;
phải: 1,25rem;
đầu trang: 0;
chế độ viết: dọc-rl;
}
Để văn bản xoay 90 độ, chúng tôi cung cấp cho chế độ viết chế độ viết giá trị của dọc-rl . Thuộc tính chế độ viết xác định nếu các dòng văn bản là ngang, dọc và các khối nên được đặt theo hướng nào.
Tiếp theo, chúng tôi sửa vị trí của tiêu đề, có nghĩa là phần tử vẫn ở một điểm cụ thể so với cửa sổ khi một cuộn, vì vậy người dùng luôn nhìn thấy nó và không bao giờ cuộn khỏi nó. Nó thực hành tốt nhất để đặt ít nhất một giá trị Y hoặc X cho các phần tử cố định và tuyệt đối. Chúng tôi có giá trị Y là trên cùng: 0 và giá trị X của bên phải: 1.25rem để di chuyển nó lên trên cùng và bên phải của cửa sổ. Sau đó, chúng tôi muốn có một số phần đệm ở cả hai đầu để văn bản không chạm vào các cạnh của cửa sổ bằng cách thêm `1.25rem` tương đương với 20px.
Lưu ý: vì chúng tôi đang xử lý một chế độ viết khác, chúng tôi có phần đệm trên và dưới thay vì phần đệm bên trái / bên phải vì phần tử hiện hoạt động như một phần tử dọc. Và để có được tiêu đề kéo dài toàn bộ chiều cao của cơ thể, chúng tôi thêm 100% vào thuộc tính chiều cao.
Xem Tạp chí Bút bỏ bố cục cơ bản – 1 của Bri Camp Gomez (@brianacamp) trên CodePen.light
Thành phần chính
Những gì chúng ta có cho đến nay là một nền tảng đáp ứng của điều hướng và nền cố định. Công việc tuyệt vời để làm cho nó tất cả theo cách này, độc giả thân mến. Bây giờ, hãy để che phủ
và phần cắt lưới.
HTML của chúng tôi trông như sau:
2020
Các nhà sản xuất vàng
Giải thưởng & amp; Lễ
Cắt bỏ tạp chí
Đối với phần tử chúng tôi có các kiểu sau:
. Chính là {
đệm: 5rem 0;
hiển thị: flex;
justify-content: trung tâm; // trung tâm nội dung theo chiều ngang
align-item: trung tâm; // trung tâm nội dung theo chiều dọc
chiều cao tối thiểu: 100vh; // tạo nội dung ít nhất cao bằng khung nhìn
chiều rộng: 100%;
}
.thùng đựng hàng {
vị trí: tương đối;
}
Tiêu đề
. . Chúng tôi sẽ thực hiện điều này thông qua thuộc tính và truy vấn phương tiện. Vì chúng tôi sẽ định vị hoàn toàn tiêu đề, chúng tôi cần thêm vị trí : tương đối cho phần tử cha của nó để giá trị vị trí tiêu đề có liên quan đến .container so với cửa sổ.
Để thực hiện bố cục này, chúng tôi sẽ để lại cho nó một phần tử định vị tĩnh (có nghĩa là nó trong luồng tài liệu thông thường), và sau đó định vị hoàn toàn nó trên các màn hình lớn hơn 40rem (640px) trở lên. Chúng tôi đặt nó 6rem (92px) từ đầu phần tử và để chính xác ở cạnh trái vì chúng tôi sẽ cần điều đó cho màn hình máy tính bảng và thiết bị di động.
. Tiêu đề {
cỡ chữ: 1,5rem;
biến đổi văn bản: chữ hoa;
lề dưới: 2rem;
Màn hình @media và (chiều rộng tối thiểu: 40rem) {
cỡ chữ: 2rem;
trái: 0;
vị trí: tuyệt đối;
đầu trang: 6rem;
chỉ số z: 10; // để ở trên cùng của lưới
}
}
Chúng tôi cũng thay đổi một chút kích thước phông chữ thành 1.5rem trên thiết bị di động và 2rem trên màn hình lớn hơn:
Đối với tiêu đề, chúng tôi sử dụng phần tử HTML cho các kiểu tô sáng thay vì vì nó có ngữ nghĩa hơn một chút. Nó cách mà chúng ta có được màu nền để hiển thị bên dưới văn bản.
đánh dấu {
màu: #FFF;
màu nền: # 000;
chiều cao dòng: 1,35;
đệm: .375rem;
}
Xem Tạp chí Bút bỏ bố cục cơ bản – 2 của Bri Camp Gomez (@brianacamp) trên CodePen.light
Cắt bỏ Tạp chí
Bây giờ là thời gian cho việc cắt bỏ tạp chí. Vì có rất nhiều hình ảnh chồng chéo lên nhau, nên chúng tôi sẽ sử dụng CSS Grid. Wahoo, hãy để bắt đầu!
Được rồi, chúng ta hãy xem cách chúng ta có thể thực hiện điều này tốt nhất thông qua lưới.
Hình ảnh này cho chúng ta thấy đường viền lưới và đường dẫn clip của hình ảnh để chúng ta có thể dễ dàng nhìn thấy những gì xảy ra ở đây với các lớp khác nhau. Thiết kế cho phép chúng ta chia lưới thành 12 cột bằng nhau. Hoàn hảo! Hình ảnh này sẽ là hướng dẫn sơ bộ của chúng tôi về nơi đặt từng mục vào lưới.
Hãy cùng nhóm thiết lập cấu trúc HTML bắt đầu:
Chúng tôi có một div cha sẽ chứa lưới và kiểu của nó với thuộc tính aria-hidden = Hồi true " để cho người đọc màn hình không thêm phần tử này và con của nó vào Cây Trợ năng hoặc trong nói cách khác, bỏ qua yếu tố này vì nó hoàn toàn là để trang trí. Nếu bạn muốn tìm hiểu thêm về khi nào nên sử dụng aria-hidden =, true true hoặc vai trò = trình bày thuyết minh , Tôi khuyến khích đọc bài viết tuyệt vời này để giải thích sự khác biệt và khi nào nên sử dụng cái gì.
Đối với các kiểu lưới, chúng tôi sẽ thêm:
.grid-container {
lề: 0 tự động; // trung tâm chính nó theo chiều ngang
đệm: 0 10%;
chiều rộng tối đa: 65rem; // hạn chế lưới điện trở nên quá lớn
}
.grid {
hiển thị: lưới;
lưới-mẫu-cột: lặp lại (12, 1fr);
lưới-mẫu-hàng: lặp lại (12, 1fr);
vị trí: tương đối;
}
Để lưới hoạt động giống như lưới, chúng tôi xác định thuộc tính hiển thị là, lưới . Tiếp theo, chúng tôi muốn rõ ràng về số lượng cột và hàng chúng tôi muốn cho lưới này vì chúng tôi sẽ đặt các hình ảnh ở một giá trị cột và hàng cụ thể.
Dòng này: cột lưới mẫu: lặp lại (12, 1fr) có nghĩa là tạo 12 cột bằng nhau với không gian có sẵn là 1fr . fr là một đơn vị linh hoạt cho biết tỷ lệ không gian có sẵn trong lưới. Để tìm hiểu thêm, tôi đã khuyên bạn nên đọc bài viết này và bài viết này để xem các trường hợp sử dụng đơn vị fr khác nhau.
Điều tương tự cũng xảy ra với lưới-mẫu-hàng ; chúng tôi muốn 12 hàng cách đều nhau. Điều này cho phép các hình ảnh có tỷ lệ đẹp và giữ vị trí của chúng trong lưới sau khi trình duyệt được thay đổi kích thước. Cuối cùng, chúng tôi thêm vị trí : tương đối cho khả năng chồng lấp các hình ảnh mà chúng tôi sẽ sớm đưa ra.
Chúng ta hãy xem xét các tài sản cần thiết cho việc này:
Vì chúng tôi xử lý hình ảnh, chúng tôi sẽ muốn chúng hoạt động như một yếu tố cấp khối và chiếm toàn bộ không gian của container. Vì vậy, chúng tôi sẽ thêm điều này vào tất cả các hình ảnh của chúng tôi:
img {
hiển thị: khối;
chiều rộng: 100%;
}
Tiếp theo, chúng tôi thêm các phần tử con .grid__item với các lớp và vị trí cụ thể của chúng. Tôi sẽ viết về một vài người trong số họ để bạn có thể thấy suy nghĩ đằng sau họ.
.grid__item - bg {
cột lưới: 2 / nhịp 9;
chỉ số z: 0;
hàng lưới: 1 / -1;
}
Đối với mỗi phần tử .grid__item chúng tôi có 3 thuộc tính rất quan trọng mà chúng tôi sẽ sử dụng để đặt phần tử nơi chúng tôi muốn vào lưới và vị trí trong ngăn xếp z mà chúng tôi muốn cư trú.
Thuộc tính cột cột là một tốc ký lấy các giá trị thuộc tính [cộtcộtcộtlưới và được phân tách bằng một cột / Siêng năng. Hãy để cột lấy cột lưới: 2 / span 9 . Quy tắc này nói bắt đầu từ cột lưới thứ hai và kéo dài 9 cột. Tôi khuyên bạn nên sử dụng các công cụ dev của Firefox khi bạn làm việc với lưới để bạn có thể dễ dàng nhìn thấy các đường lưới. Thuộc tính lưới-hàng hoạt động rất giống với cột lưới ; đó là một tài sản tốc ký kết hợp lưới-hàng-bắt đầu và lưới-cuối-hàng . Dòng này lưới-hàng: 1 / -1 cho biết bắt đầu ở hàng lưới 1 và kéo dài đến hết -1. Nó giống như câu nói lưới-hàng: 1 / span 12 . Cuối cùng, chúng ta có thuộc tính z-index ở dưới cùng hoặc nền của lưới, đó là những gì chúng ta nhận được với giá trị 0.
Một lưới__item là một nửa chân dung:
Chúng tôi làm rất gần với những gì chúng tôi đã làm với nền nhưng chuyển nó sang bên phải của lưới:
.grid__item - nửa chân dung {
cột lưới: 6 / nhịp 6;
chỉ số z: 1;
hàng lưới: 1 / -1;
}
Chúng tôi bắt đầu ở cột cột 6 và cột 6, làm cho nó kéo dài toàn bộ chiều cao của lưới bằng thuộc tính hàng lưới và với chỉ số z cao hơn nền, vì vậy nó ngồi ngay trên nền.
Vì có tổng cộng 10 yếu tố lưới tôi đã giành được danh sách tất cả chúng ở đây nhưng ở đây, một bản demo để bạn có thể thấy những gì tôi đã làm cho từng người trong số họ:
Xem phần Cắt bỏ Tạp chí Bút - Đường dẫn Sans Clip - 3 của Bri Camp Gomez (@brianacamp) trên CodePen.light
Đường dẫn clip
Bây giờ chúng tôi muốn thêm các đường dẫn clip để làm cho các hình dạng cutout xuất hiện trên hình ảnh. Mát mẻ mát mẻ, nhưng những gì một đường dẫn clip?
Tôi vui mừng khi bạn hỏi! Đường dẫn clip là khu vực cắt xác định phần nào của phần tử có thể được nhìn thấy. Những gì bên trong khu vực được hiển thị, trong khi những gì bên ngoài khu vực bị ẩn. Đường dẫn clip có thể mất một vài giá trị, nhưng chúng tôi sẽ sử dụng hình dạng đa giác cho hầu hết các phần.
Giải phẫu của giá trị thuộc tính đường dẫn là:
clip-path: đa giác (x1 y1, x2 y2, x3 y3);
Bạn có thể thêm nhiều hơn 3 giá trị x / y mà chúng tôi sẽ thực hiện cho hình ảnh của mình. Vì việc viết ra các giá trị đường dẫn clip có thể rất phức tạp, tôi thấy cần phải sử dụng các công cụ đường dẫn clip để tạo các hình dạng đường dẫn clip. Tôi thích sử dụng các công cụ phát triển Clippy và Firefox, để tạo đường dẫn clip bởi vì cả hai đều giúp dễ dàng có được hình dạng chính xác mà bạn muốn và cung cấp cho bạn các giá trị cho nó. Thật tốt!
Để tạo hình này:
Nó bao gồm các giá trị sau: giá trị điểm đầu tiên (các chấm trắng trong ảnh trên) biểu thị 5% từ bên trái và 10% từ trên cùng, sau đó điểm thứ hai là 27% từ bên trái và 3% từ đầu trang, vân vân và vân vân cho tất cả các điểm.
.grid__item - nửa chân dung {
clip-path: đa giác (5% 10%, 27% 3%, 94% 25%, 84% 98%, 39% 98%, 11% 98%, 4% 66%, 4% 34%);
}
Tôi áp dụng các đường dẫn clip khác nhau cho từng yếu tố để làm cho mỗi hình ảnh trông thật độc đáo và độc đáo. Tôi thực sự khuyên bạn nên thử nghiệm với các điểm khác nhau, nó có rất nhiều niềm vui!
Xem phần Cắt bỏ Tạp chí Bút - Với Đường dẫn Clip - 4 của Bri Camp Gomez (@brianacamp) trên CodePen.light
Và ở đó bạn có nó, một bố cục dễ tiếp cận, có thể truy cập sử dụng CSS hiện đại và HTML ngữ nghĩa. Bạn có thể suy nghĩ, tuyệt, nhưng làm thế nào chúng ta có thể thêm gia vị này một chút? Trong phần tiếp theo, chúng tôi sẽ làm cho các lớp hình ảnh trở nên sống động!
Tiền thưởng: Tương tác và Hoạt hình
Để bắt đầu bữa tiệc gia vị này, có hai điều chúng ta có thể làm:
1. Thêm một số thị sai nhỏ
2. Làm sinh động đường dẫn clip trên di chuột với thuộc tính chuyển đổi
Tôi khuyên bạn nên làm một thay vì cả hai. Tôi yêu thích hoạt hình nhiều như vậy, có một ranh giới tốt giữa một chút gia vị và hoàn toàn vượt qua tâm lý hàng đầu.
Theo ý kiến của chúng tôi, chúng tôi sẽ đưa ra tùy chọn đầu tiên, một chút thị sai, vì các hình ảnh chồng chéo gọi nó, theo ý kiến của tôi! Nếu bạn muốn xem một ví dụ về đường dẫn clip hoạt hình, hãy xem bản demo trong phần tham chiếu ở cuối bài viết này.
Thêm hoạt hình đi kèm với trách nhiệm lớn. Chúng ta cần lưu ý những người dùng bị rối loạn tiền đình có thể bị chóng mặt khi nhìn thấy thị sai. Sau khi chúng tôi triển khai thị sai, chúng tôi sẽ đề cập đến cách loại bỏ nó nếu người dùng có Ưu tiên chuyển đổi Giảm thích Chuyển động được bật thông qua hệ điều hành của họ.
Phần này sẽ bao gồm một triển khai cơ bản của thư viện thị sai rất nhỏ gọi là rellax.js. Chúng tôi chỉ cần một dòng JavaScript để thực hiện, điều đó thật tuyệt!
Tùy thuộc vào dự án của bạn, bạn có thể nhập thư viện qua npm / Sợi hoặc thêm tệp được rút gọn trong dự án của bạn. Chúng tôi sẽ tiếp tục với phần sau bằng CDN của họ. Vì vậy, trước khi kết thúc thẻ thân đóng, chúng tôi sẽ thêm:
Trong tệp JavaScript của chúng tôi, tất cả những gì chúng tôi cần làm để khởi tạo đối tượng Rellax trong dòng sau:
const rellax = new Rellax (‘. Js-rellax ');
Có nhiều tùy chọn bạn cũng có thể chuyển qua JavaScript nhưng với mục đích của chúng tôi, chúng tôi chỉ cần dòng này. Chúng tôi sẽ xử lý các tốc độ cuộn khác nhau trong HTML.
Để Rellax biết những yếu tố nào nên được sử dụng cho thị sai, chúng ta cần thêm lớp js-rellax cho chúng. Tôi muốn thêm js vào các lớp chỉ được sử dụng trong JavaScript để có thể dễ dàng biết được nếu nó gắn liền với JavaScript, tức là nếu bạn xóa lớp đó khỏi HTML, có thể sẽ có thứ gì đó bị hỏng!
Chúng tôi sẽ thêm lớp vào tất cả các yếu tố trong .grid để nó dễ dàng kiểm soát những gì chúng ta muốn. Tiếp theo, Rellax có một thuộc tính dữ liệu tiện dụng được gọi là data-rellax-speed xử lý tốc độ cuộn của phần tử. Nếu bạn không chỉ định tốc độ, nó sẽ quay trở lại tốc độ mặc định là -2 . Nó khuyên bạn nên sử dụng các giá trị của -10 đến 10 . -10 là chậm nhất trong khi 10 là nhanh nhất. Để thêm tốc độ, chúng tôi thêm dòng này vào mỗi thành phần có giá trị khác nhau, ví dụ: data-rellax-speed = "3" . Tôi khuyến khích bạn chơi xung quanh với các tốc độ khác nhau, tôi thấy đó là một niềm vui!
Tại đây, đầu ra cuối cùng:
Xem phần Cắt bỏ Tạp chí Bút - Với Hoạt hình - 5 của Bri Camp Gomez (@brianacamp) trên CodePen.light
Ảnh động và khả năng truy cập
Đối với người dùng bị rối loạn tiền đình (hoặc tai trong), nơi họ có thể bị chóng mặt khi nhìn thấy hình ảnh động, họ có thể nói với hệ điều hành của mình để giảm chuyển động trong sở thích hệ thống. Thật kỳ diệu, có một truy vấn phương tiện nắm bắt thông tin đó và được gọi là thích chuyển động giảm và lấy các giá trị của không ưu tiên và giảm . Đọc thêm về nơi các trình duyệt tìm kiếm các hệ điều hành khác nhau tại đây: thích chuyển động giảm trên MDN
Vì chúng tôi không hoạt hình bất cứ thứ gì thông qua CSS và chỉ có JS, nên chúng tôi sẽ phát hiện truy vấn phương tiện thông qua JavaScript và giết hoạt hình thị sai nếu truy vấn phương tiện được đặt thành giảm .
Để tắt hình động cho người dùng thích chuyển động giảm, chúng tôi sẽ thêm hai dòng mã này:
// lấy truy vấn phương tiện
const motionMediaQuery = window.matchMedia ('(thích-giảm-chuyển động: giảm)');
// nếu có một truy vấn phương tiện chuyển động thích-giảm-chuyển động được đặt để giảm, hủy hoạt ảnh
if (motionMediaQuery.matches) rellax.destroy ();
Đọc thêm về chủ đề ở đây: Di chuyển Ya! Hoặc có thể, don lồng, nếu người dùng thích chuyển động giảm!
Xem phần cuối cùng của Tạp chí Pen - Với hoạt hình có thể truy cập - 6 của Bri Camp Gomez (@brianacamp) trên CodePen.light
Nếu bạn đi xa đến thế, bạn sẽ nhận được 5 sao vàng! Đây là một hướng dẫn đầy đủ được xây dựng từ tệp Figma, phản hồi nhanh, sử dụng CSS hiện đại, HTML ngữ nghĩa và hình ảnh động có thể truy cập. Tôi hy vọng bạn thích nó!
Tài nguyên & Tín dụng
