Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Làm quen với Hình dạng CSS

Gói nội dung xung quanh đường dẫn tuỳ chỉnh

Razvan Caliman

Trong một thời gian dài, các nhà thiết kế web đã buộc phải sáng tạo trong giới hạn của hình chữ nhật. Hầu hết nội dung trên web vẫn bị kẹt trong các hộp đơn giản vì hầu hết các nỗ lực sáng tạo trong bố cục không phải hình chữ nhật đều kết thúc trong thất vọng. Điều này sắp thay đổi khi chúng tôi ra mắt Hình dạng CSS, bắt đầu từ Chrome 37. Hình dạng CSS cho phép nhà thiết kế web gói nội dung xung quanh các đường dẫn tuỳ chỉnh, như hình tròn, hình elip và đa giác, nhờ đó thoát khỏi các quy tắc ràng buộc của hình chữ nhật.

Bạn có thể xác định hình dạng theo cách thủ công hoặc suy luận từ hình ảnh.

Hãy xem một ví dụ rất đơn giản.

Có lẽ bạn cũng ngây thơ như tôi khi lần đầu tiên đặt một hình ảnh có các phần trong suốt, mong đợi nội dung sẽ bao bọc và lấp đầy các khoảng trống, nhưng rồi lại thất vọng vì hình dạng bao bọc hình chữ nhật vẫn tồn tại xung quanh phần tử. Bạn có thể sử dụng CSS Shapes để giải quyết vấn đề này.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

Khai báo CSS shape-outside: url(image.png) yêu cầu trình duyệt trích xuất một hình dạng từ hình ảnh.

Thuộc tính shape-image-threshold xác định mức độ mờ tối thiểu của các pixel sẽ được dùng để tạo hình dạng. Giá trị của thuộc tính này phải nằm trong khoảng từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn mờ đục). Vì vậy, shape-image-threshold: 0.5 có nghĩa là chỉ những pixel có độ mờ từ 50% trở lên mới được dùng để tạo hình dạng.

Thuộc tính float là yếu tố then chốt ở đây. Mặc dù thuộc tính shape-outside xác định hình dạng của vùng mà nội dung sẽ bao quanh, nhưng nếu không có thuộc tính float, bạn sẽ không thấy hiệu ứng của hình dạng.

Các phần tử có vùng nổi ở phía đối diện với giá trị float của chúng. Ví dụ: nếu một phần tử có hình ảnh tách cà phê được đặt nổi sang bên trái, thì vùng nổi sẽ được tạo ở bên phải tách cà phê. Mặc dù bạn có thể thiết kế một hình ảnh có khoảng trống ở cả hai bên, nhưng nội dung sẽ chỉ bao quanh hình dạng ở phía đối diện được chỉ định bởi thuộc tính float, bên trái hoặc bên phải, không bao giờ là cả hai.

Trong tương lai, bạn có thể sử dụng shape-outside trên các phần tử không được thả nổi bằng cách sử dụng CSS Exclusions.

Tạo hình dạng theo cách thủ công

Ngoài việc trích xuất hình dạng từ hình ảnh, bạn cũng có thể lập trình hình dạng theo cách thủ công. Bạn có thể chọn một trong số ít giá trị hàm để tạo hình dạng: circle(), ellipse(), inset() và polygon(). Mỗi hàm hình dạng chấp nhận một tập hợp toạ độ và được ghép nối với một hộp tham chiếu thiết lập hệ toạ độ. Chúng ta sẽ tìm hiểu thêm về hộp tham chiếu sau giây lát.

Hàm circle()

Hình minh hoạ giá trị hình dạng circle()

Ký hiệu đầy đủ cho giá trị hình tròn là circle(r at cx cy), trong đó r là bán kính của hình tròn, còn cx và cy là toạ độ của tâm hình tròn trên trục X và trục Y. Bạn không bắt buộc phải cung cấp toạ độ cho tâm đường tròn. Nếu bạn bỏ qua các giá trị này, thì tâm của phần tử (giao điểm của các đường chéo) sẽ được dùng làm giá trị mặc định.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

Trong ví dụ trên, nội dung sẽ bao quanh bên ngoài một đường tròn. Đối số duy nhất 50% chỉ định bán kính của hình tròn, trong trường hợp cụ thể này, bán kính bằng một nửa chiều rộng hoặc chiều cao của phần tử. Việc thay đổi kích thước của phần tử sẽ ảnh hưởng đến bán kính của hình tròn. Đây là một ví dụ cơ bản về cách Hình dạng CSS có thể thích ứng.

Trước khi đi sâu hơn, hãy lưu ý nhanh: điều quan trọng cần nhớ là Hình dạng CSS chỉ ảnh hưởng đến hình dạng của vùng nổi xung quanh một phần tử. Nếu phần tử có nền, thì nền đó sẽ không bị hình dạng cắt bớt. Để đạt được hiệu ứng đó, bạn phải sử dụng các thuộc tính từ CSS Masking – clip-path hoặc mask-image. Thuộc tính clip-path rất hữu ích vì thuộc tính này tuân theo cùng một ký hiệu như Hình dạng CSS, vì vậy, bạn có thể sử dụng lại các giá trị.

Hình minh hoạ hình dạng `circle()` + clip-path

Hình minh hoạ trong tài liệu này sử dụng tính năng cắt để làm nổi bật hình dạng và giúp bạn hiểu rõ các hiệu ứng.

Quay lại hình tròn.

Khi sử dụng tỷ lệ phần trăm cho bán kính hình tròn, giá trị thực tế sẽ được tính bằng một công thức phức tạp hơn một chút: sqrt(width^2 + height^2) / sqrt(2). Việc hiểu rõ điều này sẽ giúp bạn hình dung được hình tròn thu được sẽ như thế nào nếu kích thước của phần tử không bằng nhau.

Bạn có thể sử dụng tất cả các loại đơn vị CSS trong toạ độ hàm hình dạng – px, em, rem, vw, vh, v.v. Bạn có thể chọn loại linh hoạt hoặc cứng nhắc tuỳ theo nhu cầu của mình.

Bạn có thể điều chỉnh vị trí của hình tròn bằng cách đặt giá trị rõ ràng cho toạ độ của tâm hình tròn.

.element{
  shape-outside: circle(50% at 0 0);
}

Thao tác này sẽ đặt tâm hình tròn tại gốc của hệ toạ độ. Hệ toạ độ là gì? Đây là nơi chúng tôi giới thiệu các hộp tham chiếu.

Hộp tham chiếu cho Hình dạng CSS

Hộp tham chiếu là một hộp ảo xung quanh phần tử, thiết lập hệ toạ độ dùng để vẽ và định vị hình dạng. Điểm gốc của hệ toạ độ nằm ở góc trên bên trái, với trục X hướng sang phải và trục Y hướng xuống dưới.

Hãy nhớ rằng shape-outside thay đổi hình dạng của vùng nổi mà nội dung sẽ bao quanh. Vùng nổi mở rộng đến các cạnh bên ngoài của hộp được xác định bằng thuộc tính margin. Đây được gọi là margin-box và là hộp tham chiếu mặc định cho một hình dạng nếu không có hộp nào được đề cập rõ ràng.

Hai nội dung khai báo CSS sau đây có kết quả giống hệt nhau:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Chúng ta chưa đặt lề cho phần tử. Tại thời điểm này, bạn có thể giả định rằng gốc của hệ toạ độ và tâm hình tròn nằm ở góc trên bên trái của vùng nội dung của phần tử. Điều này sẽ thay đổi khi bạn đặt lề:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

Điểm gốc của hệ toạ độ hiện nằm ngoài vùng nội dung của phần tử (lên trên 100px và sang trái 100px), cũng như tâm của hình tròn. Giá trị được tính toán của bán kính hình tròn cũng tăng lên để tính đến bề mặt tăng lên của hệ toạ độ do hộp tham chiếu margin-box thiết lập.