Gói nội dung xung quanh các đường dẫn tuỳ chỉnh
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 mà nội dung sẽ bao bọc, nhưng nếu không có float, 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 bằng cách giới thiệu 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ể tự mã hoá các hình dạng đó. Bạn có thể chọn một trong số các giá trị chức năng để 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ạ độ. Chúng ta sẽ nói thêm về hộp tham chiếu trong giây lát.
Hàm circle()

Chú thích đầy đủ cho giá trị hình dạng vòng tròn là circle(r at cx cy)
, trong đó r
là bán kính của vòng tròn, còn cx
và cy
là toạ độ của tâm vòng 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 quanh bên ngoài một đường dẫn hình 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 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ị 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, vì vậy, bạn có thể sử dụng lại các giá trị.

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ạ độ 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 ta 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ử, 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ạ độ 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.

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 bao bọc. 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ử. Điều 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ị được tính toán của bán kính vòng tròn cũng tăng lên để tính đến diện tích tăng lên của hệ toạ độ do hộp tham chiếu margin-box
thiết lập.


Bạn chỉ có thể sử dụng một hộp tham chiếu tại một thời điểm nhất định với phần khai báo shape-outside
. Mỗi hộp tham chiếu sẽ ảnh hưởng đến hình dạng theo cách khác nhau và đôi khi rất tinh tế. Có một bài viết khác đi sâu hơn và giúp bạn tìm hiểu về hộp tham chiếu cho Hình dạng CSS.
Hàm ellipse()

Hình elip trông giống như hình tròn bị bẹp. Các tham số này được xác định là ellipse(rx ry at cx cy)
, trong đó rx
và ry
là bán kính của hình elip trên trục X và trục Y, còn cx
và cy
là toạ độ của tâm hình elip.
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
Giá trị phần trăm sẽ được tính toán từ các kích thước của hệ toạ độ. Bạn không cần phải làm toán học phức tạp. Bạn có thể bỏ qua toạ độ của tâm hình elip và hệ thống sẽ suy ra toạ độ đó từ tâm của hệ toạ độ.
Bạn cũng có thể xác định bán kính trên trục X và Y bằng các từ khoá: farthest-side
tạo ra bán kính bằng khoảng cách giữa tâm hình elip và cạnh của hộp tham chiếu xa nhất, trong khi closest-side
có nghĩa hoàn toàn ngược lại – sử dụng khoảng cách ngắn nhất giữa tâm và cạnh.
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
Điều này có thể hữu ích khi kích thước của phần tử (hoặc hộp tham chiếu) có thể thay đổi theo cách không thể đoán trước, nhưng bạn muốn hình elip thích ứng.
Bạn cũng có thể sử dụng các từ khoá farthest-side
và closest-side
tương tự cho bán kính trong hàm hình dạng circle()
.
Hàm polygon()

Nếu hình tròn và hình elip quá hạn chế, thì hàm hình đa giác sẽ mở ra nhiều lựa chọn. Định dạng là polygon(x1 y1, x2 y2, ...)
, trong đó bạn chỉ định các cặp toạ độ x y cho mỗi đỉnh (điểm) của đa giác. Số lượng cặp tối thiểu để chỉ định một đa giác là ba, một tam giác.
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
Các đỉnh được đặt trên hệ toạ độ. Đối với đa giác thích ứng, bạn có thể sử dụng giá trị phần trăm cho một số hoặc tất cả các toạ độ.
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
Có một tham số fill-rule
không bắt buộc, được nhập từ SVG, hướng dẫn trình duyệt cách xem xét "bên trong" của đa giác trong trường hợp các đường dẫn tự giao nhau hoặc các hình dạng khép kín. Joni Trythall giải thích rất rõ cách hoạt động của thuộc tính fill-rule trong SVG. Nếu không được xác định, fill-rule
sẽ mặc định là nonzero
.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
Hàm inset()
Hàm hình dạng inset()
cho phép bạn tạo các hình chữ nhật xung quanh để gói nội dung. Điều này có vẻ như trái ngược với trực giác khi xem xét giả định ban đầu rằng CSS Shapes giải phóng nội dung web khỏi các hộp đơn giản. Có thể là như vậy. Tôi chưa tìm thấy trường hợp sử dụng nào cho inset()
mà không thể thực hiện được bằng các phần lơ lửng và lề hoặc bằng polygon()
. Mặc dù inset()
cung cấp biểu thức dễ đọc hơn cho các hình chữ nhật so với polygon()
.
Chú thích đầy đủ cho hàm hình dạng lồng ghép là inset(top right bottom left border-radius)
. Bốn đối số vị trí đầu tiên là độ dời vào trong từ các cạnh của phần tử. Đối số cuối cùng là bán kính đường viền cho hình chữ nhật. Đây là thông tin không bắt buộc nên bạn có thể bỏ qua. Mã này tuân theo ký hiệu viết tắt border-radius
mà bạn đã sử dụng trong CSS.
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
Tạo hình dạng từ hộp tham chiếu
Nếu không chỉ định hàm hình dạng cho thuộc tính shape-outside
, bạn có thể cho phép trình duyệt lấy một hình dạng từ hộp tham chiếu của phần tử. Hộp tham chiếu mặc định là margin-box
. Đến đây thì chưa có gì lạ, đó là cách hoạt động của số thực. Tuy nhiên, khi áp dụng kỹ thuật này, bạn có thể sử dụng lại hình học của một phần tử. Hãy xem thuộc tính border-radius
.
Nếu sử dụng thuộc tính này để bo tròn các góc của một phần tử nổi, bạn sẽ có hiệu ứng cắt, nhưng vùng nổi vẫn giữ nguyên hình chữ nhật. Thêm shape-outside: border-box
để bao quanh đường viền do border-radius
tạo.

.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
Tất nhiên, bạn có thể sử dụng tất cả các hộp tham chiếu theo cách này. Dưới đây là một cách sử dụng khác cho các hình dạng phái sinh – trích dẫn lồng ghép.

Bạn có thể đạt được hiệu ứng trích dẫn lề bằng cách chỉ sử dụng các thuộc tính float và margin. Tuy nhiên, bạn cần đặt phần tử trích dẫn trong cây HTML tại điểm bạn muốn phần tử đó hiển thị.
Dưới đây là cách đạt được hiệu ứng trích dẫn lề tương tự với độ linh hoạt cao hơn:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
Chúng ta đặt hộp tham chiếu content-box
một cách rõ ràng cho hệ toạ độ của hình dạng. Trong trường hợp này, lượng nội dung trong trích dẫn sẽ xác định hình dạng mà nội dung bên ngoài sẽ bao bọc. Thuộc tính margin-top
được dùng ở đây để định vị (bù) trích dẫn, bất kể vị trí của trích dẫn trong cây HTML.
Lề hình dạng
Bạn sẽ nhận thấy rằng việc gói nội dung xung quanh một hình dạng có thể khiến nội dung đó cọ xát quá gần với phần tử. Bạn có thể thêm khoảng cách xung quanh hình dạng bằng thuộc tính shape-margin
.
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
Hiệu ứng này tương tự như hiệu ứng mà bạn thường thấy khi sử dụng thuộc tính margin
thông thường, nhưng shape-margin
chỉ ảnh hưởng đến khoảng trống xung quanh giá trị shape-outside
. Phương thức này sẽ chỉ thêm khoảng cách xung quanh hình dạng nếu có chỗ trong hệ toạ độ. Đó là lý do tại sao trong ví dụ trên, bán kính vòng tròn được đặt thành 40% chứ không phải 50%. Nếu bán kính được đặt thành 50%, thì vòng tròn sẽ chiếm tất cả không gian trong hệ toạ độ, không còn chỗ cho hiệu ứng của shape-margin
. Hãy nhớ rằng hình dạng cuối cùng sẽ bị ràng buộc với margin-box
của phần tử (phần tử cộng với margin
xung quanh). Nếu hình dạng lớn hơn và tràn, hình dạng đó sẽ được cắt bớt thành margin-box
và bạn sẽ có hình chữ nhật.
Điều quan trọng cần hiểu là shape-margin
chỉ chấp nhận một giá trị dương. Không có ký hiệu viết tay dài. Dù sao thì shape-margin-top cho hình tròn là gì?
Tạo ảnh động cho hình dạng
Bạn có thể kết hợp các hình dạng CSS với nhiều tính năng CSS khác, chẳng hạn như hiệu ứng chuyển đổi và ảnh động. Tuy nhiên, tôi phải nhấn mạnh rằng người dùng sẽ cảm thấy rất khó chịu khi bố cục văn bản thay đổi trong khi họ đang đọc. Hãy chú ý đến trải nghiệm nếu bạn quyết định tạo ảnh động cho các hình dạng.
Bạn có thể tạo ảnh động cho bán kính và tâm của các hình dạng circle()
và ellipse()
, miễn là các hình dạng này được xác định theo các giá trị mà trình duyệt có thể nội suy. Bạn có thể chuyển từ circle(30%)
sang circle(50%)
. Tuy nhiên, việc tạo ảnh động giữa circle(closest-side)
và circle(farthest-side)
sẽ làm trình duyệt bị nghẽn.
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}

Bạn có thể đạt được các hiệu ứng thú vị hơn khi tạo ảnh động cho các hình dạng polygon()
, lưu ý quan trọng là đa giác phải có cùng số đỉnh giữa hai trạng thái ảnh động. Trình duyệt không thể nội suy nếu bạn thêm hoặc xoá các đỉnh.
Một mẹo là thêm số lượng đỉnh tối đa mà bạn cần và đặt các đỉnh đó lại với nhau ở trạng thái ảnh động mà bạn muốn hình dạng có ít cạnh hơn.
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

Gói nội dung bên trong một hình dạng

Bản thảo ban đầu của quy cách Hình dạng CSS bao gồm một thuộc tính shape-inside
cho phép bạn gói nội dung bên trong một hình dạng. Thậm chí, có thời điểm Chrome và Webkit cũng triển khai tính năng này. Tuy nhiên, việc gói nội dung được đặt vị trí tuỳ ý bên trong một đường dẫn tuỳ chỉnh đòi hỏi nhiều nỗ lực và nghiên cứu hơn để bao gồm tất cả các trường hợp có thể xảy ra và tránh lỗi. Đó là lý do thuộc tính shape-inside
đã được hoãn sang CSS Shapes cấp 2 và các phương thức triển khai thuộc tính này đã bị rút lại.
Tuy nhiên, với một chút nỗ lực và sự điều chỉnh, bạn vẫn có thể đạt được hiệu ứng gói nội dung bên trong một hình dạng tuỳ chỉnh. Cách hack là sử dụng hai phần tử nổi với shape-outside
, được đặt ở hai bên đối diện của vùng chứa. Giải pháp dung hoà là bạn phải sử dụng một hoặc hai phần tử trống không có ý nghĩa ngữ nghĩa, nhưng đóng vai trò là các thanh chống để tạo ảo giác về một hình dạng bên trong.
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
Vị trí của các phần tử strut .left-shape
và .right-shape
ở đầu vùng chứa rất quan trọng vì các phần tử này sẽ được nổi sang trái và phải để bao quanh nội dung.
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}

Kiểu này khiến hai thanh chống nổi chiếm toàn bộ không gian trong phần tử, nhưng các thuộc tính shape-outside
lại tạo không gian cho phần nội dung còn lại.
Nếu trình duyệt không hỗ trợ Hình dạng CSS, thì điều này sẽ tạo ra các hiệu ứng xấu xí bằng cách đẩy tất cả nội dung xuống. Đó là lý do bạn cần sử dụng tính năng này theo cách nâng cao dần.
Trong các ví dụ về ảnh động hình dạng trước đó, bạn sẽ nhận thấy việc văn bản di chuyển xung quanh có thể gây phiền toái. Không phải trường hợp sử dụng nào cũng cần có hình ảnh động. Tuy nhiên, bạn có thể tạo ảnh động cho các thuộc tính khác tương tác với Hình dạng CSS để thêm hiệu ứng khi cần thiết.
Trong phần minh hoạ Alice in Wonderland (Alice ở xứ sở thần tiên) về Hình dạng CSS, chúng tôi đã sử dụng vị trí cuộn để thay đổi lề trên cùng của nội dung. Văn bản bị ép giữa hai phần tử nổi. Khi di chuyển xuống, phần tử này phải bố trí lại theo shape-outside
của hai phần tử nổi. Điều này tạo cảm giác văn bản đang đi xuống hố thỏ và góp phần vào trải nghiệm kể chuyện. Nội dung gần ranh giới vi phạm chính sách? Có thể. Nhưng nó trông rất ngầu.
Vì bố cục văn bản được trình duyệt thực hiện theo cách gốc, nên hiệu suất sẽ tốt hơn so với việc sử dụng giải pháp JavaScript. Tuy nhiên, việc thay đổi margin-top khi cuộn sẽ kích hoạt nhiều sự kiện bố cục lại và vẽ lại, điều này có thể làm giảm đáng kể hiệu suất. Hãy thận trọng khi sử dụng! Tuy nhiên, việc sử dụng Hình dạng CSS mà không tạo ảnh động cho các hình dạng đó sẽ không làm giảm hiệu suất đáng kể.
Cải tiến tăng dần
Bắt đầu bằng cách giả định rằng trình duyệt không hỗ trợ CSS Shapes và xây dựng dựa trên giả định đó khi bạn phát hiện tính năng này. Modernizr là một giải pháp hiệu quả để phát hiện tính năng và có một bài kiểm thử cho Hình dạng CSS trong phần "Phát hiện không phải lõi".
Một số trình duyệt cung cấp tính năng phát hiện trong CSS thông qua quy tắc @supports
mà không cần thư viện bên ngoài. Google Chrome cũng hỗ trợ Hình dạng CSS và hiểu được quy tắc @supports
. Dưới đây là cách bạn sử dụng tính năng này để cải thiện dần:
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
Lea Verou đã viết thêm về cách sử dụng quy tắc @supports CSS.
Phân biệt với các tiêu chí loại trừ CSS
Những gì chúng ta biết ngày nay là Hình dạng CSS từng được gọi là Hình dạng và phần loại trừ CSS trong những ngày đầu của thông số kỹ thuật. Việc chuyển đổi tên có vẻ như là một chi tiết nhỏ, nhưng thực sự rất quan trọng. CSS Exclusions (Từ khoá loại trừ CSS) hiện là một thông số riêng, cho phép gói nội dung xung quanh các phần tử được đặt vị trí tuỳ ý mà không cần thuộc tính float. Hãy tưởng tượng việc gói nội dung xung quanh một phần tử được định vị tuyệt đối; đó là một trường hợp sử dụng cho CSS Exclusions. Hình dạng CSS chỉ xác định đường dẫn mà nội dung sẽ bao bọc.
Vì vậy, hình dạng và tiêu chí loại trừ không phải là một, nhưng chúng bổ sung cho nhau. Các hình dạng CSS hiện có trong trình duyệt, trong khi các tiêu chí loại trừ CSS chưa được triển khai với hoạt động tương tác hình dạng.
Các công cụ để xử lý Hình dạng CSS
Bạn có thể tạo đường dẫn trong các công cụ tạo hình ảnh cổ điển, nhưng tại thời điểm viết bài này, không có công cụ nào xuất cú pháp bắt buộc cho các giá trị Hình dạng CSS. Ngay cả khi có, cách làm như vậy cũng không thực tế lắm.
Hình dạng CSS được dùng trong trình duyệt, nơi các hình dạng này phản ứng với các phần tử khác trên trang. Việc hình dung hiệu ứng của việc chỉnh sửa hình dạng đối với nội dung xung quanh hình dạng đó sẽ rất hữu ích. Có một số công cụ giúp bạn thực hiện quy trình công việc này:
Brackets: Tiện ích Trình chỉnh sửa hình dạng CSS cho Brackets sử dụng chế độ xem trước trực tiếp của trình chỉnh sửa mã để phủ một trình chỉnh sửa tương tác nhằm chỉnh sửa các giá trị hình dạng.
Google Chrome: Tiện ích Trình chỉnh sửa hình dạng CSS cho Google Chrome mở rộng Công cụ cho nhà phát triển của trình duyệt bằng các chế độ điều khiển để tạo và chỉnh sửa hình dạng. Thao tác này sẽ đặt một trình chỉnh sửa tương tác lên trên phần tử đã chọn.
Trình kiểm tra trong Google Chrome có hỗ trợ tích hợp để làm nổi bật các hình dạng. Di chuột qua một phần tử có thuộc tính shape-outside
và phần tử đó sẽ sáng lên để minh hoạ hình dạng.
Hình dạng từ hình ảnh: Nếu bạn muốn tạo hình ảnh và yêu cầu trình duyệt trích xuất hình dạng từ hình ảnh đó, Rebecca Hauck đã viết một hướng dẫn hay về Photoshop.
Polyfill: Google Chrome là trình duyệt lớn đầu tiên cung cấp CSS Shapes. Tính năng này sẽ sớm được hỗ trợ trên iOS 8 và Safari 8 của Apple. Các nhà cung cấp trình duyệt khác có thể cân nhắc việc này trong tương lai. Cho đến lúc đó, bạn có thể sử dụng CSS Shapes polyfill để hỗ trợ cơ bản.
Kết luận
Trên web, nội dung chủ yếu được giới hạn trong các hộp đơn giản, nhưng CSS Shapes cung cấp một cách để tạo bố cục biểu đạt, thu hẹp khoảng cách về độ trung thực giữa thiết kế web và thiết kế in. Tất nhiên, bạn có thể lạm dụng hình dạng và tạo sự phân tâm. Tuy nhiên, khi được áp dụng một cách tinh tế và có sự đánh giá đúng đắn, hình dạng có thể nâng cao khả năng trình bày nội dung và tập trung sự chú ý của người dùng theo cách riêng biệt.
Tôi để lại cho bạn một bộ sưu tập tác phẩm của những người khác, chủ yếu là từ bản in, minh hoạ các cách sử dụng thú vị cho bố cục không phải hình chữ nhật. Tôi hy vọng bài viết này sẽ truyền cảm hứng để bạn thử dùng CSS Shapes và thử nghiệm các ý tưởng thiết kế mới.
Cảm ơn Pearl Chen, Alan Stearns và Zoltan Horvath đã xem xét bài viết này và cung cấp thông tin chi tiết có giá trị.