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 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 tạo ra trong những hạn chế của hình chữ nhật. Hầu hết nội dung trên web vẫn bị mắc kẹt trong các hộp đơn giản bởi vì hầu hết mạo hiểm sáng tạo vào bố cục không phải hình chữ nhật sẽ kết thúc với sự thất vọng. Khả năng này sẽ thay đổi khi CSS Shapes ra mắt kể từ Chrome 37. Hình dạng CSS cho phép nhà thiết kế web bao bọc nội dung quanh đường dẫn tuỳ chỉnh, như hình tròn, hình elip và đa giác, nhờ đó có thể thoát khỏi các hạn chế của hình chữ nhật.

Hình dạng có thể được xác định theo cách thủ công hoặc có thể được suy ra 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 làm nổi một hình ảnh có các phần trong suốt, hy vọng nội dung sẽ gói và lấp đầy các khoảng trống, nhưng rồ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>

Phần 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 pixel sẽ 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 (trong suốt hoàn toàn) đến 1.0 (mờ hoàn toàn). Vì vậy, shape-image-threshold: 0.5 có nghĩa là chỉ các pixel có độ mờ 50% trở lên mới được dùng để tạo hình dạng.

Thuộc tính float đóng vai trò quan trọng ở đâ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, nhưng nếu không có dấu phẩy động, thì 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 giá trị float của chúng. Ví dụ: nếu một phần tử có hình ảnh cốc cà phê đang được nổi ở bên trái, thì vùng nổi sẽ được tạo ở bên phải của cốc. Mặc dù bạn có thể thiết kế hình ảnh với cá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 độ chính xác đơn, bên trái hoặc bên phải, không được bao quanh 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 cùng với phần Loại trừ CSS ra mắt.

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 cho hình dạng đó theo cách thủ công. Bạn có thể chọn trong số một vài 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 các toạ độ và nó đi kèm với một hộp tham chiếu để thiết lập hệ toạ độ. Vui lòng chờ để biết thêm thông tin về hộp tham chiếu.

Hàm rotation()

Hình minh hoạ giá trị hình dạng vòng tròn()

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à các toạ độ của tâm đường tròn trên trục X và trục Y. Không bắt buộc phải có toạ độ của tâm đường tròn. Nếu bạn bỏ qua các phần tử này, 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ố đơn 50% chỉ định bán kính của hình tròn, mà trong trường hợp cụ thể này, bán kính tương đương với 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 CSS Shapes có thể thích ứng.

Trước khi tiếp tục, lưu ý nhỏ: bạn cần nhớ rằng 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ị cắt theo hình dạng. Để đạt được hiệu ứng đó, bạn phải sử dụng các thuộc tính trong CSS Masking (Tạo mặt nạ CSS) clip-path hoặc mask-image. Thuộc tính clip-path rất hữu ích vì tuân theo cùng 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()" + đường dẫn đoạn video

Hình minh hoạ trong tài liệu này sử dụng tính năng cắt xén để làm nổi bật hình dạng và giúp bạn hiểu được 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 sự được tính bằng 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 được điều này là rất hữu ích vì nó sẽ giúp bạn hình dung hình tròn thu được sẽ như thế nào nếu kích thước của các 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 loại đủ linh hoạt hoặc cứng theo nhu cầu của bạn.

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

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

Thao tác này định vị tâm vòng tròn tại gốc toạ độ 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ử, có tác dụng thiết lập hệ toạ độ được 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 trỏ sang phải và trục Y chỉ xuống.

Hãy nhớ rằng shape-outside thay đổi hình dạng của vùng nổi xung quanh nội dung sẽ bao bọc. Vùng dấu phẩy động mở rộng đến các cạnh ngoài của hộp được xác định theo thuộc tính margin. Thuộc tính nà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ó mục nào được đề cập rõ ràng.

Hai nội dung khai báo CSS sau đây có kết quả giống 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, có thể giả định rằng gốc của hệ toạ độ và tâm 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ử. Đ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 bên ngoài vùng nội dung của phần tử (100 px phía trên và 100 px bên trái), cũng như tâm vòng tròn. Giá trị tính toán của bán kính hình tròn cũng tăng để bù cho bề mặt tăng lên của hệ toạ độ do hộp tham chiếu margin-box thiết lập.