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

Cách sử dụng CSS Shape trong Thiết kế Web của bạn

by
Difficulty:BeginnerLength:ShortLanguages:

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

Các yếu tố của layout là các cột và các dòng, các góc và các đường thẳng mà chúng ta dùng để xây dụng các trang web ngày nay bị ảnh hưởng lớn bởi di sản từ kiểu in ấn của chúng. Và cho dù việc cài đặt grid trên web đang trở nên tốt hơn và đẹp hơn, web layout nhìn chung vẫn rắc rối so với việc in ấn, đặc biệt khi nó làm việc với dòng nội dung.

Các tạp chí và tờ báo đã luôn luôn thích các cách sắp xếp nội dung sang trọng, chẳng hạn như chữ bao quanh, hoặc bên trong, các hình dạng không vuông vức.

An example of simple magazine layout
Multipurpose Magazine bởi GreenSocks

Hãy khám phá cách CSS Shapes Module sẽ cho phép chúng ta tạo ra thứ tương tự như vậy trên web.

Giới thiệu nhanh về CSS Shapes

CSS Shapes cho phép các nhà thiết kế web tạo ra các layout hình học và trừu tượng hơn, bên cạnh các hình vuông và chữ nhật đơn giản. Chi tiết kỹ thuật cung cấp cho chúng ta các thuộc tính CSS mới bao gồm shape-outsideshape-margin. Trình duyệt hỗ trợ khá ít, vì các thuộc tính này hiện chỉ hoạt động trên Chrome, Opera, và Safari, với tiền tố -webkit-, giống như -webkit-shape-outside.

Thuộc tính shape-outside sẽ làm cho nội dung trong hàng bao quanh (bên ngoài) phía sau của thành phần có hình dạng cong, khác với box model. Ban đầu cũng có shape-inside để bao quanh nội dung bên trong một thành phần; văn bản bên trong một thành phần hình tròn sẽ được đóng khuôn bên trong một hình tròn. Tuy nhiên, việc cài đặt đã bị hoãn cho CSS Shapes cấp độ 2.

A paragraph wrapped inside and outside a circle
Từ đầu trên xuống dưới: minh hoạ shape-outside và shape-inside

Thuộc tính shape-margin thiết lập margin xung quanh cái shape nào mà đang sử dụng thuộc tính shape-outside.

Hãy xem một số ví dụ.

Tạo một Shape

Cách dễ nhất để xem cách CSS Shapes hoạt động là tạo một hình tròn. Vậy, dưới đây là một thẻ div (hình tròn của chúng ta), với một số đoạn văn kế bên.

Dưới đây là một số style cơ bản, bao gồm width và height của hình tròn của chúng ta, border-radius để định hình, và một float để đoạn văn bao quanh hình tròn.

Như chúng ta kỳ vọng, các đoạn văn bây giờ đã bao quanh hình tròn. Tuy nhiên, vì thuộc tính border-radius không định nghĩa thật sự thành phần có hình dạng như thế nào, nên đoạn văn bao quanh không định hình của một đường cong.

Nếu chúng ta phân tích thành phần thông qua DevTools của trình duyệt, chúng ta sẽ thấy thành phần thực tế là một hộp box. Vì thế, ngay cả khi thẻ div đã hiện thị như một hình tròn, thì border-radius đã không thưc sự tác động đến hình dạng của thành phần.

A paragraph wrap around an element
Lưu ý hình vuông đánh dấu xung quanh thành phần.

Để cho đoạn văn bám vào đường cong của shape, chúng ta cần thay đổi nó thành một shape thật sự thông qua thuộc tính shape-outside; trong trường hợp này, chúng ta sẽ thêm một hàm circle() truyền vào như là một giá trị.

Đoạn văn của chúng ta bây giờ quấn quanh gọn gàng xung quanh chu vi của hình tròn.

Ngoài ra, nếu bây giờ chúng ta phân tích các thành phần thông qua DevTools, chúng ta sẽ thấy rằng thành phần của chúng ta đã được kết xuất thành một vòng tròn.

A paragraph wrap around an circle shape element
Lưu ý phần đánh dấu đậm hơn.

Với một ít margin, hãy xem nó có thể cải thiện một layout đơn giản:

Tùy biến hình tròn

Hàm circle() cần một vài giá trị để xác định tọa độ tâmbán kính tương ứng: vòng tròn (r at x y). Mặc định, giá trị của bán kính được lấy từ kích thước của thành phần; Nếu thành phần rộng 300px, ví dụ vậy, thì bán kính sẽ là 150px (bán kính là một nửa đường kính vòng tròn).

Tương tự, toạ độ xy được đo tương đối so với kích thước của thành phần, và chúng mặc định là 50% 50%; ngay tại trung tâm của thành phần.

Diagram of circle coordinates
Vòng tròn được định vị trí ở trung tâm của thành phần.

Hai giá trị này sẽ có ích khi bạn muốn thay đổi kích thước của shape, trong khi vẫn giữ kích thước thực tế của thành phần, hoặc di chuyển hình dạng trong khi vẫn giữ vị trí thành phần. Trong ví dụ sau đây, chúng ta sẽ giảm bán kính vòng tròn xuống 60px và thiết lập tọa độ tâm thành 30% 70%, điều này sẽ di chuyển vòng tròn tới phía dưới bên trái của thành phần.

Position element
Đoạn văn bây giờ vượt qua qua hộp thành phần bám theo kích thước của vòng tròn. Hãy xem demo.

Nó không là gì nếu không thay đổi hình tròn, cả về toạ độ tâm và bán kính phải được định nghĩa một cách rõ ràng; thêm chỉ một trong hai cái sẽ vô hiệu.

Shape Box Model

CSS Shapes thừa kế các nguyên tắc của box model, nhưng được áp dụng bên ngoài phạm vi của chính thành phần đó. Điều này cho phép chúng ta thiết lập thành phần một cách riêng biệt, ví dụ, đối với border-box thì thiết lập cho shape là padding-box. Để thay đổi shape box model, thêm một trong các từ khoá box model, content-box, margin-box, border-box hoặc padding-box sau cái hàm.

box-model mặc định của shape là margin-box. Và trong ví dụ sau, chúng ta đã thay đổi nó thành padding-box để nói cho trình duyệt để loại trừ margin của thành phần khi xác định kích thước hoặc chiều dài của shape. Bây giờ, chúng ta sẽ thấy đoạn văn xuyên qua border, và ngay lập tức chạm vào padding của thành phần.

Cái hình vuông màu cam là margin, màu vàng là border, và xanh là padding,

Tôi thành thật khuyên bạn nên xem qua khoá học miễn phí của chúng tôi về Khái niệm cơ bản của CSS Box Model để biết thêm về chi tiết cách box-model hoạt động.

Tạo thêm Shape

Đặc tả kỹ thuật của CSS Shapes đi kèm với một vài hàm shape:

  • ellipse(): như tên của nó, chức năng này sẽ tạo ra một hình elip. Chúng ta có thể cấu hình bán kính của elip và đồng thời di chuyển toạ độ tâm của shape. Nhưng không giống như hàm circle(), hàm ellipse() áp dụng hai sự đo lường bán kính, ngang và dọc, do đó ellipse( 100px 180px at 10% 20% ).
  • polygon(): Hàm này cho phép chúng ta tạo ra các hình dạng phức tạp hơn như hình tam giác, hình lục giác, cũng như các hình dạng phi hình học . Sử dụng polygon không phải là dễ dàng như việc tạo ra một hình tròn, nhưng công cụ Path to Polygon Converter làm cho nó trở nên trực quan hơn một chút.

Tổng kết lại

Trong hướng dẫn này, chúng ta tìm hiểu các ứng dụng cơ bản của CSS Shapes; chúng ta tạo ra một shape, tùy chỉnh kích thước, vị trí và box model. Tại thời điểm viết bài, một số khía cạnh của CSS Shapes vẫn còn rất thô sơ, mà có lẽ đó là lý do tại sao chúng ta vẫn chưa thấy nó được sử dụng rộng rãi.

  • Như đã đề cập trước đó trong hướng dẫn này, thuộc tính shape-inside của CSS Shapes cho phép chúng ta để quấn quanh và định hình dạng nội dung bên trong một thành phần đã bị tạm ngưng.
  • Đặc tả kỹ thuật của CSS Shapes cung cấp một thuộc tính riêng biệt được shape-box để xác định shape-box-model, mặc dù hiện tại nó có vẻ như không thể dùng được với bất kỳ trình duyệt nào.
  • Safari yêu cầu tiền tố -webkit-, nhấn mạnh rằng tính năng này chỉ là thử nghiệm.

Tuy nhiên, dù tiến triển chậm và chênh lệch giữa các trình duyệt tại thời điểm hiện tại, tôi vẫn mong chờ CSS Shapes! Một khi các trình duyệt chính chọn cài đặt nó, thì tôi không thể chờ đợi hơn để xem một số layout thực sự sáng tạo trên web!

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.