Trang này được dịch bởi Cloud Translation API.

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

Bao bọc nội dung xung quanh các đường dẫn tuỳ chỉnh

Razvan Caliman

Trong một thời gian dài, các nhà thiết kế web đã bị buộc phải sáng tạo trong những giới hạn của hình chữ nhật. Hầu hết nội dung trên web vẫn bị giới hạn trong các hộp đơn giản vì hầu hết các thiết kế sáng tạo sử dụng bố cục không phải hình chữ nhật đều không thành công. Điều đó sắp thay đổi với việc ra mắt CSS Shapes, có sẵn 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, chẳng hạn 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ó thể bạn cũng ngây thơ như tôi khi lần đầu tiên thả nổi 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 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 Hình dạng CSS để 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>

Nội dung khai báo CSS shape-outside: url(image.png) cho trình duyệt biết cần 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ố chính ở đây. Mặc dù thuộc tính shape-outside xác định hình dạng của vùng xung quanh nội dung sẽ bao bọc, nếu không có số thực có độ chính xác đơn, bạn sẽ không thấy hiệu ứng của hình dạng.

Các phần tử có một vùng nổi ở phía đối diện với giá trị float. Ví dụ: nếu một phần tử có hình ảnh tách cà phê đang nổi sang 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ế 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 do thuộc tính float chỉ định, 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 nổi kèm theo quy tắc Loại trừ CSS.

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ể tự mã hoá các hình dạng đó. Bạn có thể chọn một trong số các 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 giúp thiết lập hệ toạ độ. Tìm hiểu thêm về hộp tham chiếu trong giây lát.

Hàm Round()

Chú thích đầy đủ cho giá trị hình dạng 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 của vòng tròn. Nếu bạn bỏ qua các giá trị này, thì tâm của phần tử (điểm giao nhau 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 bọc bên ngoài một đường dẫn tròn. Đối số duy nhất 50% chỉ định bán kính của vòng tròn, trong trường hợp cụ thể này, 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à 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, 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ừ tính năng Mặt nạ CSS – clip-path hoặc mask-image. Thuộc tính clip-path rất hữu ích vì nó tuân theo cùng một ký hiệu như Hình dạng CSS, nhờ đó 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 vòng tròn, giá trị này thực 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). Bạn nên hiểu điều này vì nó sẽ giúp bạn hình dung hình dạng vòng 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ạ độ của hàm hình dạng – px, em, rem, vw, vh, v.v. Bạn có thể chọn một phương pháp linh hoạt hoặc đủ cứng nhắc cho nhu cầu của mình.

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

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

Thao tác này sẽ đặt tâm của vòng 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 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ử, giúp thiết lập hệ toạ độ dùng để vẽ và định vị hình dạng. Điểm gốc của hệ toạ độ là ở góc trên bên trái với trục X trỏ về bên phải và trục Y hướng xuống.

Hãy nhớ rằng shape-outside sẽ thay đổi hình dạng của vùng nổi xung quanh nội dung sẽ được gói. Vùng nổi mở rộng đến các cạnh bên ngoài của hộp do thuộc tính margin xác định. Đâ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 khoảng đệm cho phần tử này. 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 của vòng tròn nằm ở góc trên bên trái của vùng nội dung của phần tử. Chế độ này sẽ thay đổi khi bạn đặt lề:

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

Giờ đây, gốc của hệ toạ độ nằm ngoài vùng nội dung của phần tử (100px lên và 100px sang trái), cũng như tâm của vòng tròn. Giá trị tính toán của bán kính vòng 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.