Hướng dẫn css shapes generator - trình tạo hình dạng css

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

Nội dung chính Show

Giới thiệu nhanh về CSS Shapes
Tạo một Shape
Tùy biến hình tròn
Shape Box Model
Tạo thêm Shape
Tổng kết lại

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.

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-outside và shape-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ó

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

0 để 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.

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ẻ

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

3 (hình tròn của chúng ta), với một số đoạn văn kế bên.

<div class="circle"></div>
<p>Lorem ipsum…</p>
<p>Lorem ipsum…</p>
<p>Lorem ipsum…</p>

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,

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

4 để định hình, và một float để đoạn văn bao quanh hình tròn.

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

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ì

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

4 đã không thưc sự tác động đến hình dạng của thành phần.

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

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

6 trong trường hợp này, chúng ta sẽ thêm một hàm

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

7 truyền vào như là một giá trị.

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

Đ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.

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 { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

7 cần một vài giá trị để xác định tọa độ tâm và bán kính tương ứng: vòng tròn

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

9. 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

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

0, ví dụ vậy, thì bán kính sẽ là

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

1 (bán kính là một nửa đường kính vòng tròn).

Tương tự, toạ độ

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

2 và

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

3 đượ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à

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

4; ngay tại trung tâm của thành phần.

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

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

5 và thiết lập tọa độ tâm thành

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

6, đ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.

Đ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.

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

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

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

7 thì thiết lập cho shape là

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

8. Để thay đổi shape box model, thêm một trong các từ khoá box model,

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

7 hoặc

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

8 sau cái hàm.

.circle {
  width: 250px;
  height: 250px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  padding: 10px;
  border: 20px solid #ccc;
  margin: 30px;
  -webkit-shape-outside: circle() padding-box;
    shape-outside: circle() padding-box;
}

box-model mặc định của shape là

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

0. Và trong ví dụ sau, chúng ta đã thay đổi nó thành

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

8 để 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:

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

5: 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 { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

7, hàm

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

5 áp dụng hai sự đo lường bán kính, ngang và dọc, do đó

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

```
circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.
```
9: 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
```
.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}
```
0 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

.circle {
  width: 250px;
  height: 250px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  padding: 10px;
  border: 20px solid #ccc;
  margin: 30px;
  -webkit-shape-outside: circle() padding-box;
    shape-outside: circle() padding-box;
}

1 để 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!