Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Nâng CSS Shape lên một cấp độ cao hơn

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong bài trước, chúng ta đã tìm hiểu cách tạo CSS Shape, cho phép chúng ta xác định hình dạng thật của một phần tử. Chúng ta đã đề cập đến khái niệm cơ bản; tạo ra một hình tròn và bao quanh nó một vài dòng văn bản. Bây giờ hãy khám phá những shape phức tạp hơn, làm cho layout của chúng ta phong phú hơn và ít bị tù túng hơn.

Tạo một hình đa giác

Ngoài các hình dạng đơn giản như hình tròn và hình chữ nhật chúng ta còn có thể tạo ra đa giác; các hình dạng bao gồm nhiều (thường là 5 hoặc nhiều hơn) cạnh, chẳng hạn như ngũ giác hoặc lục giác. Để tạo một cái, chúng ta sử dụng hàm polygon() của CSS, nó nhận nhiều giá trị được phân tách bằng dấu phẩy xác định tọa độ của hình dạng:

Với đoạn code ở trên, chúng ta đã thêm năm tọa độ, từ đó tạo ra một hình dạng ngũ giác. Thêm một toạ độ khác vào hàm sẽ biến hình thành một hình lục giác, một lần nữa cho một hình bảy cạnh, một cái nữa cho ra một hình tám cạnh, và vân vân.

Tạo ra một hình dạng đa giác theo cách thủ công không phải là dễ dàng như việc tạo ra một hình tròn hoặc một hình elip, đặc biệt là nếu đa giác của bạn là phức tạp và liên quan đến hàng chục tọa độ. May mắn thay, có một công cụ hữu ích làm cho việc tạo ra hình dạng CSS trở nên trực quan hơn.

Sử dụng CSS Shapes Editor

CSS Shapes Editor là một extension trong Chrome. Một khi bạn đã cài đặt nó, nó thêm một tab mới có tên là Shapes ở tron DevTools dưới tab Elements, ngang với các tab con khác (Styles, Computer, vv.)

Tab Shapes chứa một thuộc tính shape-outside kết hợp với một dấu + để giúp chúng ta thêm các hàm CSS Shape. Hãy chọn polygon() và phần tử trên trang, sau đó chúng ta có thể bắt đầu vẽ hình dạng ngay trong trình duyệt giống như một ứng dụng đồ họa.

Khi chúng ta vẽ, extension của trình duyệt sẽ cập nhật hàm đa giác của chúng ta bằng các tọa độ tương ứng của hình dạng được vẽ, đồng thời thêm nó như là một style trực tiếp vào phần tử. Sau khi thực hiện xong, sao chép code được tạo ra và dán nó vào stylesheet của bạn.

generated polygon coordinates
Tọa độ tạo đa giác

Sử dụng kỹ thuật tương tự chúng ta có thể dễ dàng vẽ và áp dụng bất kỳ hình thức hoặc hình dạng nào trên trang web của chúng ta, ví dụ:

Hình ảnh từ Cách thêm hiêu ứng kịch vào cảnh mưa với Adobe Photoshop

Chiết xuất hình ảnh

Một giá trị có thể có khác mà chúng ta có thể sử dụng trong thuộc tính shape-outside là hàm url(); hàm tương tự mà chúng ta sử dụng ở một nơi nào đó trong CSS để thêm một hình nền. Trong trường hợp này, hàm url() cho phép thuộc tính shape-outside xác định một hình dạng dựa trên hình ảnh.

Bạn có thể chọn sử dụng hàm url() thay vì polygon() khi bạn có một hình ảnh đặc biệt phức tạp, với nhiều đường cong và góc và bạn muốn nội dung của bạn bao bọc xung quanh nó một cách trơn tru. Hoặc, khi làm việc với người dùng tạo ra nội dung trong đó việc xác định hình dạng có thể rắc rối.

Chúng ta sẽ sử dụng hình con vẹt này từ Unsplash. Trước tiên, bạn sẽ cần phải tạo ra một phiên bản với độ trong suốt, ví dụ:

the shape of our macaw
Hình dạng con vẹt

Hình ảnh con vẹt ban đầu được thêm vào các container như là một hình nền:

Mức độ trong suốt

Đối với bản thân hình dạng, chúng ta sẽ thêm điều đó vào một phần tử khác bên trong container, và lần này chúng ta sẽ sử dụng một thuộc tính CSS Shape được gọi là shape-image-threshold.

Thuộc tính đặc biệt này thiết lập ngưỡng trong suốt tối thiểu định nghĩa hình dạng của hình ảnh; nó nhận một giá trị số từ 0 đến 1. Vì vậy, nếu bạn có một hình hơi trong suốt bạn có thể đặt nó ở 0.8 hay 0.5. Chúng ta đã thiết lập giá trị của chúng ta thành 0 vì khu vực xung quanh hình dạng con vẹt là hoàn toàn trong suốt.

Kết quả sẽ trông giống như thế này:

Cung cấp phương án dự phòng

Trình duyệt hỗ trợ cho tính năng CSS Shape cũng kha khá; mặc dù không mong đợi nhiều từ Firefox, Internet Explorer hoặc Edge. Ngoài ra, theo câu hỏi của Stephen ở trong bài trước, chúng ta có một vài lựa chọn.

"Điều này thật tuyệt, nhưng hỏi thật: dự phòng cho IE/FF là gì? Có vẻ như chúng hiển thị những hình dạng rỗng, kỳ lạ đối với nhiều người dùng." – Stephen Bateman

Trước tiên, chúng ta có thể sử dụng Modernizr. Modernizr là một thư viện JavaScript đáng tin cậy để thử các tính năng của trình duyệt. Đảm bảo là bạn đã bao gồm CSS Shapes và tuỳ chọn Add CSS khi tải về thư viện. Sau đó, bạn có thể chỉ định các phong cách của layout khi CSS Shape không được hỗ trợ, như sau:

Nếu việc tải Modernizr có vẻ quá nặng, vì bạn chỉ cần kiểm tra xem trình duyệt có CSS Shape được kích hoạt hay không, bạn có thể thêm những dòng JavaScript sau.

Mỗi thuộc tính trong CSS đi kèm với đối tượng phong cách JavaScript tương ứng, cho phép chúng ta chủ động thêm phong cách thông qua JavaScript. Code này phát hiện khi nào trình duyệt có phương thức shapeOutside, sau đó nếu không phải chúng ta thêm lớp no-css-shape mà chúng ta có thể sử dụng để thêm các phong cách dự phòng.

Cuối cùng, chúng ta có thể sử dụng cú pháp @support của CSS trong stylesheet, ví dụ.

Tuỳ thuộc vào quyết định của bạn sử dụng cách nào là phù hợp nhất với dự án của bạn.

Tổng kết

Trong hướng dẫn này, chúng ta đã khám phá cách làm thế nào để sử dụng hàm polygon() trong CSS Shape và học được cách làm thế nào để chúng ta có thể vẽ hình đa giác một cách dễ dàng bằng cách sử dụng một extension của Chrome. Chúng ta cũng học được cách tận dụng một hình ảnh để vẽ các hình dạng cho chúng ta; đặc biệt hữu ích với các hình dạng quá phức tạp. Cuối cùng, mặc dù có kha khá trình duyệt hỗ trợ CSS Shape, nhưng chúng ta cũng đã nói về cách sử dụng những sự thay thế đối với những trình duyệt không hỗ trợ.

Các minh hoạ

Những liên kết hữu ích

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.