Hướng dẫn Cách sử dụng CSS Shapes để tạo hình

[PVS]

Cách sử dụng CSS Shapes để tạo hình

Trước kia với một vài kỹ thuật sử dụng CSS với đường viền chúng ta có thể tạo ra một số hình khối căn bản với CSS, đó là thủ thuật kết hợp các thuộc tính, có thể kể đến bộ sưu tập một số hình khối ở trang css-tricks, đó là những shape không chính thống và giờ đây shape mới thực sự là shape.
Hiện tại W3C đã và đang xây dựng bộ thuộc tính mới cho CSS với khả năng tạo ra đa hình khối như SVG hay Canvas chỉ với những giá trị đơn giản, các trình duyệt hiện đại sẽ sớm cập nhật thuộc tính này (hãy cứ tin như vậy) còn hiện tại để trải nghiệm ta có thể dùng Chrome Canary.

Sẽ có 2 loại thuộc tính shape đó là shape-outside và shape-inside, theo W3C hiện tại chúng ta chỉ thử được với shape-ouside, còn shape-inside sẽ được có trong tương lai.
Shape-outside sẽ được kết hợp với thuộc tính float trong CSS để tạo ra đường văn bản bao quanh hình khối một cách đẹp mắt, shape-inside có thể đặt văn bản hay các phần từ vào bên trong hình khối.
Giá trị của thuộc tính shape sẽ được hỗ trợ bởi một số hàm với các tham số để tạo hình, hiện tại có một số hàm đã công bố:

• circle()
• ellipse()
• inset()
• polygon()

Để kết hợp tạo khoảng cách với hình khối thì sẽ có thêm hai thuộc tính shape hữu ích nữa là shape-margin và shape-padding.

circle()

circle() = circle( [<shape-radius>]? [at <position>]? )

Bạn có thể sử dụng bất kỳ một đơn vị của CSS nào (%, px, em, pt,..) trong tham số, nhưng ở tham số radius ta có 2 giá trị đặc biệt là closest-side mặc định và farthest-side. closest-side nghĩa là giá trị radius sẽ là khoảng cách ngắn nhất tính từ tâm của shape, còn farthest-side là khoảng cách xa nhất tính từ tâm của shape (lúc này ta không cần ước chừng hoặc tính giá trị radius cho đủ để tròn góc, đỡ được ít time và nơ ron). Ví dụ:

shape-outside: circle();
/* Mặc định là ở giữa và radius là closest-side */
shape-outside: circle(60px at 50% 50%);
/* radius là 60px, vị trí tâm của circle là 50% trục hoành so với left, 50% trục tung so với top (50% tâm đang ở giữa phần tử), thực tế viết 50% 50% là thừa vì đó là mặc định, ngoài ra còn có thể viết là center, vậy thì 0% 0% là tương đương với cách viết left top còn 100% 100% là tương đương với right bottom */
shape-outside: circle(farthest-side at 50px 60px);
/* radius là farthest-side */

ellipse()

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )

Hàm này cũng giống như circle() chỉ khác là nó có 2 tham số radius cho trục hoành và trục tung (ở đây hình tròn sẽ thành hình trứng)

inset()

inset() = inset( offset{1,4} [round <border-radius>]? )

Hàm này có từ 1 cho tới 4 tham số đầu, đó là khoảng cách từ 4 cạnh của shape so với biên của phần tử, điều này hiểu cụ thể là sẽ có một shape hình chữ nhật nhỏ hơn bên trong phần tử, 4 giá trị này được viết tắt thông thường như các thuộc tính CSS khác nghĩa là top, right, bottom, left. Tham số tuỳ chọn cuối là bo tròn các góc và cũng có cách hiểu như thuộc tính border-radius thông thường chỉ lưu ý ta sẽ sử dụng với từ khoá round. Ví dụ:

shape-outside: inset(40px round 60px);
/* cả 4 cạnh đều có khoảng cách 40px và có radius 4 góc là 60px */
shape-outside: inset(40px 40px 40px 50px round 0 0 0 60px);
/* tuỳ các cạnh và chỉ góc left-bottom có radius là 60px */

polygon()

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

Hàm này sẽ định nghĩa một hình khối phức tạp sử dụng một số lượng điểm bất kỳ. Tham số tuỳ fill-rule là thuộc tính được mô tả trong SVG có thể là một trong hai giá trị là 'nonzero' mặc định hoặc 'evenodd', các tham số còn lại là các cặp giá trị của điểm shape, cặp giá trị này sẽ xác định vị trí của điểm theo 2 trục hoành và tung. Ví dụ:

shape-outside: polygon(0 0, 100% 100%, 0 100%);
/* Được tam giác vuông bên phải */
shape-outside: polygon(100% 0, 100% 100%, 0 100%);
/* Được tam giác vuông bên trái */

Vấn đề là shape tạo ra dựa trên phần tử với mô hình chữ nhật vậy làm sao cắt được phần hình shape để hiển thị được phần shape với background, W3C đã có bản phác thảo mô đun CSS masking (sẽ được bàn đến ở bài viết sau) ta có một bộ thuộc tính clip để cắt phần tử theo hình khối. Thuộc tính clip-path sẽ có giá trị là hàm như với shape-outsie, lúc này ta sẽ thêm thuộc tính clip-path:

shape-outside: polygon(0 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
/* Hiện Chrome chỉ hổ trợ với -webkit- */

shape-outside: polygon(0 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
/* Hiện Chrome chỉ hổ trợ với -webkit- */

Ngoài ra shape-outside còn có thể làm việc với giá trị url để có thể tạo shape theo hình png hoặc SVG, lúc này để cắt phần tử theo shape ta sẽ không dùng clip-path nữa mà sẽ dùng mask-image, bài viết sau sẽ bàn đến bộ thuộc tính CSS masking.

​

Đã có một số công cụ để giúp tạo shape từ tác giả Bear Travis, nhưng điều tuyệt vời nhất phải đến từ Brackets editor, một trình soạn thảo mới nổi dành cho các front-end, nó luôn được cập nhật mới, là mã nguồn mở và được phát triển bởi những người thích sử dụng javaScript. Để tạo shape một cách trực quan sau khi cài Brackets cần cài thêm một extension CSS shape của Adobe.

Chúc các bạn thành công.

Nguồn: sothichweb.com​

 

[hathutrang]

hay quá

 

[dongoca22019]

Đỉnh

 

[trinhha]

tuyệt vời luôn. bỏ nghề lâu rồi lấy ra xem lại mà thực tế thấy mình chưa từng làm mấy cái này bao giờ.