Đường dẫn, hình dạng, đường viền và mặt nạ

Quá trình kết xuất HTML được xây dựng dựa trên mô hình hộp, nhưng cuộc sống (và thiết kế web) không chỉ có hình chữ nhật. CSS hỗ trợ nhiều cách để thay đổi những vùng của một phần tử được kết xuất, giúp nhà phát triển tự do tạo ra những thiết kế hỗ trợ mọi hình dạng và kích thước. Tính năng cắt cho phép sử dụng các hình dạng hình học, trong khi tính năng che ảnh hưởng đến khả năng hiển thị ở cấp độ pixel.

Đường dẫn và hình dạng

CSS sử dụng các hàm để xác định hình dạng. Chúng ta sẽ đề cập đến thông tin chung về các hàm trong mô-đun Hàm CSS. Trong phần này, bạn sẽ tìm hiểu cách tạo hình dạng trong CSS. Tất cả các ví dụ sau đây đều sử dụng các hình dạng mà bạn tạo bằng thuộc tính clip-path, giúp giảm diện tích hiển thị xuống chỉ còn những gì nằm bên trong hình dạng. Điều này cho phép các phần tử khác biệt về mặt hình ảnh so với hộp của phần tử. Chúng ta sẽ thảo luận chi tiết hơn về việc cắt ở phần sau.

Hình dạng được xác định trong CSS có thể là hình dạng cơ bản (chẳng hạn như hình tròn, hình chữ nhật và đa giác) hoặc đường dẫn (có thể xác định hình dạng phức tạp và hình dạng kết hợp).

Hình dạng cơ bản

circle() và ellipse()

Hàm circle() và ellipse() xác định các hình tròn và hình bầu dục có bán kính tương ứng với một phần tử. Hàm circle() chấp nhận một kích thước hoặc tỷ lệ phần trăm duy nhất làm đối số. Theo mặc định, cả hai hàm này đều đặt hình dạng tương ứng với tâm của phần tử. Cả hai đều chấp nhận một vị trí không bắt buộc sau từ khoá at, có thể được biểu thị dưới dạng độ dài, tỷ lệ phần trăm hoặc từ khoá vị trí.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: circle(50%);
}

Ví dụ trước cho thấy một đường dẫn cắt hình tròn bằng cách sử dụng hàm circle(). Xin lưu ý rằng bán kính 50% sẽ tạo ra một hình tròn có chiều rộng bằng chiều rộng của phần tử. Hàm ellipse() chấp nhận 2 đối số đại diện cho bán kính ngang và bán kính dọc của hình dạng.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25%);
}

Ví dụ trước cho thấy một đường viền cắt hình elip bằng hàm ellipse(). Xin lưu ý rằng bán kính 50% sẽ tạo ra một hình elip có chiều rộng bằng chiều rộng của phần tử. Ví dụ sau đây cho thấy cùng một hình elip được đặt ở vị trí có tâm ở đầu phần tử.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: ellipse(50% 25% at center top);
}

rect() và inset()

Các hàm rect() và inset() cung cấp nhiều cách để xác định một hình chữ nhật bằng cách đặt vị trí của các cạnh tương ứng với các cạnh của một phần tử. Điều này cho phép bạn tạo các hình chữ nhật khác biệt về mặt hình ảnh so với hộp mặc định của phần tử. Chúng có thể chấp nhận từ khoá round (không bắt buộc) để tạo một hình chữ nhật có các góc bo tròn, sử dụng cùng cú pháp như thuộc tính rút gọn border-radius.

Hàm rect() xác định vị trí của các cạnh trên và dưới của hình chữ nhật so với cạnh trên cùng của phần tử, cũng như các cạnh trái và phải so với cạnh bên trái của phần tử. Hàm này chấp nhận 4 đơn vị kích thước hoặc tỷ lệ phần trăm làm đối số xác định các cạnh trên, phải, dưới và trái. Bạn có thể chọn hàm rect() khi muốn một hình chữ nhật không thay đổi tỷ lệ khi kích thước của phần tử thay đổi hoặc một hình chữ nhật giữ nguyên tỷ lệ khi phần tử thay đổi.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: rect(15px 75px 45px 10px);
}

Ví dụ trước cho thấy một đường viền cắt hình chữ nhật được xác định bằng hàm rect(). Các phương diện này tương ứng với các cạnh trên cùng và bên trái của phần tử như minh hoạ trong sơ đồ.

Hàm inset() xác định vị trí của các cạnh của hình chữ nhật theo khoảng cách vào trong từ mỗi cạnh của một phần tử. Hàm này chấp nhận từ 1 đến 4 đơn vị kích thước hoặc tỷ lệ phần trăm làm đối số, cho phép bạn xác định nhiều cạnh cùng một lúc. Bạn có thể chọn hàm inset() khi muốn có một hình chữ nhật có thể điều chỉnh tỷ lệ theo phần tử hoặc một hình chữ nhật có khoảng cách cố định so với các cạnh của phần tử.

.my-element {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px);
}

Ví dụ trước cho thấy một đường viền cắt hình chữ nhật được xác định bằng hàm inset(). Các phương diện này tương ứng với các cạnh của phần tử.

Các hàm rect() và inset() có thể chấp nhận từ khoá round để tạo một hình chữ nhật có các góc bo tròn, sử dụng cùng một cú pháp như thuộc tính viết tắt border-radius. Ví dụ sau đây minh hoạ các phiên bản bo tròn của hình chữ nhật đã trình bày trước đó.

.rounded-rect {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

.rounded-inset {
  width: 80px;
  height: 60px;
  background: blue;
  clip-path: inset(15px 5px 15px 10px round 5px);
}

polygon()

Đối với các hình dạng khác, chẳng hạn như hình tam giác, hình ngũ giác, hình ngôi sao, v.v., hàm polygon() cho phép bạn tạo hình bằng cách kết nối nhiều điểm bằng các đường thẳng. Hàm polygon() chấp nhận một danh sách các cặp bao gồm hai đơn vị chiều dài hoặc tỷ lệ phần trăm. Mỗi cặp mô tả một điểm trên đa giác: giá trị đầu tiên là khoảng cách từ cạnh trái của phần tử, giá trị thứ hai là khoảng cách từ cạnh trên của phần tử. Bạn không cần đóng đa giác vì hệ thống sẽ hoàn tất bằng cách kết nối điểm cuối cùng với điểm đầu tiên.

.my-element {
  width: 60px;
  height: 60px;
  background: blue;
  clip-path: polygon(
    50% 0,
    0 100%,
    100% 100%
  );
}

Ví dụ trên tạo một đường viền cắt hình tam giác bằng cách xác định 3 điểm.

Theo mặc định, hàm polygon() sẽ hiển thị các vùng chồng lên nhau dưới dạng vùng được tô. Bạn có thể thay đổi hành vi này bằng đối số đầu tiên không bắt buộc, được gọi là quy tắc tô. Để chuyển đổi giữa các vùng được tô và không được tô, hãy đặt quy tắc tô thành evenodd. Để sử dụng quy tắc tô màu mặc định, hãy đặt quy tắc này thành nonzero.

Ví dụ trên cho thấy hàm polygon() với các hàm lượng giác để tạo đa giác đều và hình ngôi sao. Thao tác này không tạo ra đa giác đều lớn nhất có thể nằm vừa bên trong một phần tử hoặc đặt phần tử đó ở giữa – bạn có thể tự thử làm việc này. Các hình ngôi sao trong ví dụ này cũng minh hoạ các quy tắc tô màu nonzero và evenodd.

Hình dạng phức tạp

Khi các hàm hình dạng cơ bản không đủ để mô tả một hình dạng phức tạp, CSS cung cấp các hàm sử dụng cú pháp phức tạp hơn để mô tả các đối tượng như đường cong và đường thẳng. Các hàm này cũng hữu ích cho các hình dạng kết hợp (hình dạng được tạo thành từ nhiều hình dạng, chẳng hạn như một hình tròn có lỗ).

path()

Hàm path() chấp nhận một chuỗi cú pháp đường dẫn SVG để mô tả một hình dạng. Điều này cho phép tạo các hình dạng phức tạp bằng cách sử dụng các chỉ dẫn mô tả đường thẳng và đường cong tạo nên hình dạng đó. Việc chỉnh sửa trực tiếp cú pháp SVG có thể phức tạp, vì vậy, bạn nên cân nhắc sử dụng một trình chỉnh sửa trực quan chuyên dụng có thể xuất cú pháp khi tạo hình dạng bằng hàm path().

Hàm path() không sử dụng các đơn vị định cỡ CSS và tất cả các giá trị đều được diễn giải là pixel. Điều này có nghĩa là các hình được tạo bằng hàm đường dẫn không phản hồi theo kích thước của phần tử hoặc vùng chứa. Bạn chỉ nên sử dụng path() cho những hình dạng có kích thước cố định.

shape()

Hàm shape() dùng cú pháp lệnh để mô tả một hình dạng, tương tự như hàm path(). Tuy nhiên, các lệnh hàm shape() là CSS gốc và có thể sử dụng các đơn vị kích thước CSS. Điều này cho phép các hình dạng được xác định bằng hàm shape() có kích thước thích ứng.

Ví dụ trước sử dụng các hàm path() và shape() để xác định một hình trái tim và một vòng tròn có lỗ ở giữa. Ví dụ này sử dụng cùng một giá trị tính bằng pixel cho cả hai hàm, nhưng các hàm shape() cũng có thể sử dụng các đơn vị kích thước CSS khác, chẳng hạn như tỷ lệ phần trăm hoặc đơn vị tương đối của vùng chứa.

Cắt

Thao tác cắt xác định những vùng của một phần tử có thể nhìn thấy, tương tự như thao tác cắt một hình ảnh trong tạp chí. Thuộc tính clip-path đặt đường dẫn dùng để xác định vùng cắt.

Như bạn đã thấy trong các ví dụ ở phần trước, bạn có thể dùng bất kỳ hàm cơ bản nào về hình dạng hoặc đường dẫn làm clip-path. Thuộc tính clip-path cũng hỗ trợ các đường dẫn được xác định trong phần tử clipPath SVG. Phần tử này có thể được nhúng hoặc nằm trong một tệp riêng.

Sơ đồ trên cho thấy cách việc thêm một clip-path vào một phần tử hình ảnh sẽ thay đổi vùng hiển thị của hình ảnh. Đường dẫn cắt trên sử dụng hàm circle(), trong khi đường dẫn cắt dưới sử dụng clipPath SVG. Xin lưu ý rằng theo mặc định, vòng tròn được tạo bằng hàm circle() sẽ nằm ở giữa phần tử.

Thuộc tính clip-path chỉ chấp nhận một đường dẫn duy nhất. Để cắt một phần tử bằng nhiều hình dạng không chồng lên nhau, hãy dùng hàm path() hoặc shape() để xác định một đường dẫn kết hợp hoặc dùng clipPath SVG. Một lựa chọn khác cho các trường hợp phức tạp là sử dụng mặt nạ thay vì cắt. Chúng ta sẽ đề cập đến lựa chọn này trong một phần sau.

Cắt bằng hình dạng

Để cắt bằng hàm đường dẫn hoặc hình dạng cơ bản, hãy đặt thuộc tính clip-path thành giá trị do hàm trả về, như trong các ví dụ trước. Mỗi hàm sẽ định vị hình dạng cắt theo cách khác nhau so với phần tử, vì vậy, hãy tham khảo thông tin tham chiếu cho từng hàm.

Trong ví dụ trước, hai phần tử có clip-path hình tròn được áp dụng bằng cách sử dụng lớp .clipped. Xin lưu ý rằng clip-path được định vị tương ứng với từng phần tử và văn bản trong clip-path không được sắp xếp lại để theo hình dạng.

Hộp tham chiếu của đường viền cắt

Theo mặc định, đường dẫn cắt cho một phần tử sẽ bao gồm đường viền của phần tử đó. Khi sử dụng một trong các hàm hình dạng cơ bản, bạn có thể đặt hộp tham chiếu của đường dẫn cắt để chỉ bao gồm vùng của phần tử trong đường viền. Các giá trị hợp lệ cho hộp tham chiếu là stroke-box (mặc định) và fill-box (chỉ bao gồm vùng bên trong đường viền).

Ví dụ trước cho thấy các phần tử có đường viền lớn (20px), mỗi phần tử sử dụng hàm inset() để đặt clip-path. Phần tử cắt tương ứng với đường viền của phần tử vẫn hiển thị một phần của đường viền. Các phần tử cắt theo vùng trong đường viền sẽ không hiển thị đường viền và có kích thước nhỏ hơn, ngay cả khi có cùng giá trị lồng ghép.

Cắt bằng đồ hoạ

Đường viền có thể được xác định trong tài liệu SVG, được nhúng trong tài liệu HTML hoặc được tham chiếu từ bên ngoài. Điều này có thể hữu ích khi xác định các đường viền phức tạp được tạo trong các chương trình đồ hoạ hoặc đường viền kết hợp nhiều hình dạng.

<img id="kitten" src="kitten.png">

<svg>
  <defs>
    <clipPath id="kitten-clip-shape">
      <circle cx="130" cy="175" r="100" />
    </clipPath>
  </defs>
</svg>

<style>
  #kitten {
    clip-path: url(#kitten-clip-shape);
  }
</style>

Trong ví dụ trước, clipPath có id là kitten-clip-shape được áp dụng cho phần tử <img>. Trong trường hợp này, tài liệu SVG được nhúng trong HTML. Nếu tài liệu SVG là một tệp bên ngoài có tên là kitten-clipper.svg, thì clipPath sẽ được tham chiếu dưới dạng url(kitten-clipper.svg#kitten-clip-shape).

Tạo mặt nạ

Tạo mặt nạ là một phương pháp khác để xác định những vùng của một phần tử được hiển thị hoặc ẩn. Trong khi việc cắt sử dụng các hình dạng hoặc đường dẫn cơ bản, thì việc tạo mặt nạ sử dụng các pixel từ một hình ảnh hoặc một chuyển màu để xác định khả năng hiển thị. Không giống như việc cắt, việc che phủ cho phép các vùng của một phần tử trong suốt một phần. Bạn có thể áp dụng nhiều hình ảnh mặt nạ cho một phần tử để tạo ra nhiều hiệu ứng.

Để áp dụng một mặt nạ, hãy đặt thuộc tính mask-image. Thuộc tính này chấp nhận một hoặc nhiều hình ảnh, chuyển màu hoặc các tham chiếu đến phần tử <mask> trong tài liệu SVG. Bạn có thể áp dụng nhiều hình ảnh mặt nạ bằng cách phân tách chúng bằng dấu phẩy.

.my-element {
  mask-image: url(my-mask.png),
              linear-gradient(black 0%, transparent 100%);
}

Trong ví dụ trước, .my-element được che bằng hình ảnh PNG, theo sau là một chuyển sắc tuyến tính. Theo mặc định, nhiều mặt nạ sẽ được thêm cùng nhau để tạo mặt nạ cuối cùng.

Ví dụ trước cho thấy một hình ảnh có một hoặc nhiều mặt nạ được áp dụng. Chuyển đổi từng mặt nạ để xem cách các mặt nạ kết hợp với nhau để tạo ra hiệu ứng cuối cùng.

Mặt nạ alpha so với mặt nạ độ chói

Bạn có thể áp dụng mặt nạ bằng cách sử dụng alpha hoặc luminance của hình ảnh. Khi che dựa trên alpha, độ trong suốt của từng pixel trong hình ảnh mặt nạ sẽ được áp dụng cho phần tử, bỏ qua mọi thông tin về màu của pixel đó. Khi tạo mặt nạ dựa trên luminance, cả độ trong suốt và giá trị của mỗi pixel (độ sáng hoặc độ tối) đều được áp dụng cho phần tử. Tính năng che phủ theo độ chói coi màu sáng là màu có thể nhìn thấy và màu tối là màu không nhìn thấy.

Để đặt chế độ che, hãy dùng thuộc tính mask-mode. Theo mặc định, thuộc tính mask-mode được đặt thành match-source, thiết lập một chế độ dựa trên loại hình ảnh mặt nạ. Đối với hình ảnh và chuyển màu, giá trị này sẽ mặc định là alpha. Đối với mặt nạ SVG, giá trị này sẽ mặc định là giá trị của thuộc tính mask-type trong phần tử <mask> hoặc luminance, nếu không có mask-type nào được xác định.

Trong ví dụ trước, một mẫu kiểm thử cho thấy các giá trị màu và alpha khác nhau được dùng làm mặt nạ. Bằng cách bật/tắt mask-mode, bạn có thể thấy chế độ alpha dựa trên độ trong suốt, trong khi chế độ luminance dựa trên cả độ sáng và độ trong suốt của màu.

Các thuộc tính che khác

CSS cung cấp các thuộc tính bổ sung để tinh chỉnh hành vi của mặt nạ. Mỗi thuộc tính chấp nhận một danh sách các giá trị được phân tách bằng dấu phẩy, danh sách này sẽ được so khớp với danh sách mặt nạ do thuộc tính mask-image đặt. Nếu có ít giá trị hơn số lượng mặt nạ, thì danh sách sẽ lặp lại cho đến khi bạn đặt giá trị cho từng mặt nạ. Nếu có nhiều giá trị hơn mặt nạ, mọi giá trị dư thừa sẽ bị loại bỏ.

Phím tắt mặt nạ

Bạn có thể đặt nhiều thuộc tính mặt nạ cùng một lúc bằng cú pháp rút gọn của mặt nạ. Bạn có thể đơn giản hoá việc thiết lập nhiều mặt nạ bằng cách nhóm tất cả các thuộc tính của từng mặt nạ lại với nhau. Cú pháp rút gọn cho mặt nạ tương đương với việc đặt các thuộc tính này theo thứ tự: mask-image, mask-mode, mask-position, mask-size, mask-repeat, mask-origin, mask-clip và mask-composite. Bạn không cần phải thêm mọi thuộc tính và mọi thuộc tính không được thêm sẽ được đặt lại về giá trị ban đầu. Với khả năng hỗ trợ tối đa 8 thuộc tính cho mỗi mặt nạ, bạn có thể tham khảo toàn bộ.

.longhand {
  mask-image: linear-gradient(white, black),
              linear-gradient(90deg, black, transparent);
  mask-mode: luminance, alpha;
  mask-position: bottom left, top right;
  mask-size: 50% 50%, 30% 30%;
}

.shorthand {
  mask: linear-gradient(white, black) luminance bottom left / 50% 50%,
        linear-gradient(90deg, black, transparent) alpha top right / 30% 30%;
}

Trong ví dụ trước, mỗi lớp có 2 mặt nạ được áp dụng. Cách đầu tiên sử dụng các thuộc tính riêng lẻ, còn cách thứ hai sử dụng cú pháp rút gọn mask. Cả hai kiểu này đều tương đương với nhau.

Văn bản tự ngắt dòng xung quanh các phần tử nổi

Khi cắt hoặc che một phần tử, bạn chỉ thay đổi vùng hiển thị trong hộp của phần tử đó, nhưng bản thân hộp vẫn không thay đổi. Điều này có nghĩa là một phần tử nổi sẽ ảnh hưởng đến luồng tài liệu dựa trên hộp giới hạn ban đầu của phần tử đó, chứ không phải phần hiển thị của phần tử. Để xác định luồng xung quanh một phần tử, hãy dùng thuộc tính shape-outside cùng với đường dẫn cắt.

Thuộc tính shape-outside xác định hình dạng mà nội dung sẽ chảy xung quanh một phần tử. Hình dạng này có thể là bất kỳ hàm hình dạng cơ bản nào, nhưng không phải là hình dạng được xác định bằng hàm path() hoặc shape(), hoặc clipPath được xác định trong tài liệu SVG.

Thuộc tính shape-outside cũng chấp nhận hình ảnh hoặc hiệu ứng chuyển màu. Tương tự như việc tạo mặt nạ, ranh giới của hình dạng sẽ được xác định bằng độ trong suốt của hình ảnh hoặc hiệu ứng chuyển màu. Thuộc tính shape-image-threshold đặt những mức độ trong suốt được coi là nằm bên trong hình dạng.

Hình dạng trong ảnh động

Tạo ảnh động cho clip-path

Bạn có thể tạo hiệu ứng cho thuộc tính clip-path, kết hợp từ hình dạng này sang hình dạng khác. Bạn phải sử dụng cùng một hàm hình dạng cho mỗi khung hình chính để tạo ra các ảnh động mượt mà. Khi sử dụng hàm polygon() hoặc shape(), bạn phải sử dụng cùng một số lượng điểm trong mỗi khung hình chính.

Trong ví dụ trước, clip-path của một phần tử chuyển đổi giữa hình ngũ giác và hình ngôi sao được xác định bằng hàm polygon(). Ví dụ này sử dụng quy tắc tô evenodd để cho biết cách các điểm chuyển động tạo ra các vùng chồng chéo.

Tạo ảnh động bằng offset-path

Bạn cũng có thể tạo ảnh động cho các phần tử dọc theo đường dẫn được tạo bằng các hàm hình dạng này. Thuộc tính offset-path đặt hình dạng sẽ dùng làm đường dẫn và offset-distance đặt vị trí dọc theo đường dẫn đó. Bạn cũng có thể dùng hàm ray() với thuộc tính offset-path để tạo ảnh động dọc theo một đường thẳng.

Ví dụ trước minh hoạ cách sử dụng cùng một đa giác cho cả clip-path và offset-path. Ảnh động này dùng offset-distance để di chuyển các ngôi sao nhỏ hơn dọc theo đa giác mà ngôi sao lớn dùng làm clip-path.

Kiểm tra mức độ hiểu biết của bạn