Cách tạo một thiết kế viền cắt bằng CSS
Với một thiết kế viền cắt chúng tôi có thể chỉ cho người dùng những gì có thể tìm thấy bên dưới khu vực viền của một phần tử HTML. Nhiệm vụ này thường được giải quyết bằng xếp chồng hai hoặc nhiều phần tử khối (trong hầu hết các trường hợp div) có kích thước khác nhau chồng lên nhau. Đầu tiên, đây có vẻ là một giải pháp dễ dàng, nhưng sẽ khó chịu hơn khi bạn muốn sử dụng lại bố cục nhiều lần, di chuyển xung quanh các yếu tố, tối ưu hóa thiết kế cho thiết bị di động hoặc duy trì mã.
Trong bài đăng này, tôi sẽ cho bạn thấy một giải pháp chỉ CSS thanh lịch sử dụng chỉ có một yếu tố HTML để đạt được hiệu quả tương tự. Kỹ thuật này cũng tuyệt vời cho khả năng tiếp cận, vì nó tải hình nền trong CSS, tách ra khỏi HTML.
Đến cuối bài này, bạn sẽ biết cách hiển thị hình ảnh nền trong khu vực viền để tạo ra thiết kế viền cắt bạn có thể xem bên dưới Tôi cũng sẽ chỉ ra cách bạn có thể làm cho thiết kế đáp ứng sử dụng các đơn vị khung nhìn.
Mã ban đầu
Yêu cầu duy nhất trong mặt trận HTML là một yếu tố khối:
Chúng ta sẽ cần tái sử dụng kích thước (chiều rộng và chiều cao) và giá trị độ rộng đường viền của div, vì vậy tôi đang giới thiệu họ như các biến CSS. Biến --w biểu thị chiều rộng của .cb yếu tố khối, --h chỉ ra nó Chiều cao, --b đi cho chiều rộng biên giới, và --b2 cho chiều rộng đường viền nhân với 2. Sau này chúng ta sẽ thấy việc sử dụng biến cuối cùng.
Tôi đang định cỡ Đơn vị Hãy cải thiện mã trên bằng cách thêm nền và đặt đường viền, chiều cao và chiều rộng bằng cách sử dụng các biến CSS được xác định trước của chúng tôi. Đây là cách bản demo được cho là giống như bây giờ: Chúng tôi cần hình nền để bao gồm toàn bộ khu vực của Nếu bạn muốn cung cấp cho hình nền có kích thước cố định, chỉ cần đảm bảo kích thước bạn cung cấp cho phép nó bao phủ khu vực viền của Các chiều rộng của hình nền [ Tương tự, chiều cao của hình nền [ Bằng cách này, chúng tôi đã định cỡ hình nền cho một khu vực giống với kích thước của Các Chú thích: Nếu bạn đang thêm phần đệm vào Đây là những gì chúng ta có ngay bây giờ: Bây giờ chúng tôi đã bao phủ khu vực bao gồm biên giới với hình ảnh nền, tất cả những gì còn lại là bao phủ khu vực trung tâm bên trong biên giới (khu vực không có biên giới) với một màu đơn sắc, mà chúng tôi đạt được Bóng ngang có giá trị Trong bản demo Codepen, bạn có thể thấy một viền trắng xung quanh hình ảnh. Có một mẹo nổi tiếng về sử dụng bóng hộp để tạo nhiều đường viền-chúng ta có thể sử dụng cùng một kỹ thuật để thêm một hoặc nhiều đường viền màu theo thiết kế của chúng tôi. Đã cập nhật Các Trong bản demo Codepen cuối cùng của mình, tôi đã đặt mã cho hình nền và màu bóng hộp vào một lớp riêng. Đây là không bắt buộc, nhưng có thể cực kỳ hữu ích nếu bạn muốn tái sử dụng bố trí của thiết kế viền cắt trong nhiều yếu tố và thêm tính thẩm mỹ (hình nền + màu) cho từng yếu tố một cách độc lập. Tôi đã thêm một lớp có tên Kể từ khi Để đặt giá trị của Vì kích thước là tất cả trong đơn vị Chú thích: Đừng quên thêm thẻ meta chế độ xem đến trang HTML của bạn nếu bạn đã quyết định tối ưu hóa nó cho chế độ xem trên thiết bị di động.vw đơn vị (bạn có thể sử dụng các đơn vị cố định nếu bạn muốn). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Giải thích nhanh -
vw và vh các đơn vịvw Đại diện cho 1/100thứ về chiều rộng của khung nhìn. Ví dụ, 50vw là 50 phần của chiều rộng khung nhìn cắt dọc thành 100 phần bằng nhau, trong khi 50vh là 50 phần của chiều cao khung nhìn cắt ngang thành 100 phần bằng nhau. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); nền: url (bg.jpg); viền: var (- b) rắn trong suốt; chiều cao: var (- h); chiều rộng: var (- w);
Kích thước hình nền
lý lịch giá trị tôi đang cho nó: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); nền: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); viền: var (- b) rắn trong suốt; chiều cao: var (- h); chiều rộng: var (- w);
calc (var (- w) + var (- b2))] là tổng của chiều rộng của div [var (- w)] và chiều rộng của biên trái và phải [var (- b2)].calc (var (- h) + var (- b2))] là tổng của chiều cao của div [var (- h)] và chiều rộng của đường viền trên và dưới [var (- b2)].div (bao gồm cả khu vực biên giới).trung tâm từ khóa căn chỉnh hình nền đến trung tâm của div.div, nhớ bao gồm khu vực đệm đến kích thước nền cũng giống như khu vực viền.
Bao phủ khu vực không biên giới
bóng hộp hình nhỏ. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); nền: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); viền: var (- b) rắn trong suốt; hộp bóng: in var (- w) 0 0 rgba (0,120,237, .5); chiều cao: var (- h); chiều rộng: var (- w);
var (- w) bao gồm toàn bộ chiều rộng của div. Việc sử dụng rgba chức năng màu cho phép một số minh bạch được thêm vào trong hỗn hợp, tuy nhiên bạn cũng có thể sử dụng màu đục nếu bạn muốn che phủ hoàn toàn khu vực trung tâm.
Thêm một đường viền phụ với
bóng hộpbóng hộp giá trị là: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); nền: url (bg.jpg) centre / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); viền: var (- b) rắn trong suốt; hộp bóng: in var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) màu trắng; chiều cao: var (- h); chiều rộng: var (- w);
calc (var (- b) / 2) chức năng tạo ra một bóng của một nửa chiều rộng đường viền.
Tùy chọn: Bố cục & thẩm mỹ riêng biệt
.áp phích1 để .áp phích1 --tbgc: rgba (0,120,237, .5); hình nền: url ("http://bit.ly/2eQBij2"); lý lịch là một tài sản tốc ký, thuộc tính longhand của nó có thể được ghi đè / thiết lập riêng lẻ. Do đó, chúng ta có thể thiết lập hình nền trong .áp phích1, và xóa giá trị url khỏi lý lịch tài sản trong .cb.bóng hộp, chúng ta có thể sử dụng một biến CSS khác. Các --tbgc biến giữ giá trị màu chúng tôi muốn cung cấp cho bóng hộp (lightblue trong bản demo), vì vậy trong số các quy tắc kiểu cho .cb chúng tôi thay thế giá trị màu của bóng hộp tài sản với var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); nền: tâm / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); viền: var (- b) rắn trong suốt; hộp bóng: in var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) màu trắng; chiều cao: var (- h); chiều rộng: var (- w);
Mã cho chế độ dọc
vw, nó sẽ nhìn quá nhỏ khi bạn đang xem thiết kế ở chế độ dọc (chiều rộng nhỏ hơn so với chiều cao) - mặc định tất cả các thiết bị di động đều ở trong đó. Để giải quyết vấn đề này, công tắc điện vw với vh, và thay đổi kích thước thiết kế như bạn thấy phù hợp với chế độ chân dung. @media (định hướng: chân dung) .cb --w: 35vh; --h: 40vh; --b: 4vh;
