Trang chủ » Mã hóa » Cách tạo một thiết kế viền cắt bằng CSS

    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ỡ

    tương đối với chiều rộng của khung nhìn, do đó việc sử dụ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 - vwvh các đơn vị

    Đơ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.

    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.

     .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);  

    Đây là cách bản demo được cho là giống như bây giờ:

    Kích thước hình nền

    Chúng tôi cần hình nền để bao gồm toàn bộ khu vực của

    bao gồm cả khu vực biên giới, vì vậy hình nền cần phải là có kích thước phù hợp.

    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ũng. Đối với mã được sử dụng trong bài viết cho đến nay, đây là 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);  

    Các chiều rộng của hình nền [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)].

    Tương tự, chiều cao của hình nền [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)].

    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 div (bao gồm cả khu vực biên giới).

    Các trung tâm từ khóa căn chỉnh hình nền đến trung tâm của div.

    Chú thích: Nếu bạn đang thêm phần đệm vào 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.

    Đây là những gì chúng ta có ngay bây giờ:

    Bao phủ khu vực không biên giới

    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 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);  

    Bóng ngang có giá trị 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ộp

    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 bó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);  

    Các 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

    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 .áp phích1 để

    để đạt được mục tiêu này.

     .áp phích1 --tbgc: rgba (0,120,237, .5); hình nền: url ("http://bit.ly/2eQBij2");  

    Kể từ khi 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.

    Để đặt giá trị của 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

    Vì kích thước là tất cả trong đơn vị 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;  

    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.

    © Savtec
    Thông tin hữu ích và lời khuyên phát triển web. Lập trình, thiết kế web, CSS, HTML, JAVASCRIPT. Cấu hình và cài đặt lại WINDOWS. Tạo các trang web và ứng dụng từ đầu.