Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

Hướng dẫn cơ bản về CSS - Hình dạng: Cẩm nang cho người mới bắt đầu tạo dòng chảy nội dung

Xin chào các bạn设计师 web tiềm năng! Hôm nay, chúng ta sẽ nhảy vào thế giới thú vị của CSS shapes. Là người thầy thân thiện trong lĩnh vực máy tính, tôi sẽ dẫn đường cho bạn từng bước trong hành trình này. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Vậy, hãy lấy một tách cà phê (hoặc trà, nếu đó là sở thích của bạn), và chúng ta cùng bắt đầu nhé!

CSS - Shapes

CSS Shapes là gì?

Trước khi chúng ta đi sâu vào chi tiết, hãy hiểu về CSS shapes. Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng. Bạn không muốn mọi thứ đều là hình chữ nhật hoàn hảo, phải không? Đó là lúc CSS shapes phát huy tác dụng - chúng cho phép chúng ta tạo ra những bố cục thú vị bằng cách xác định các khu vực mà văn bản có thể bao quanh.

Thuộc tính shape-outside

Tại trung tâm của CSS shapes là thuộc tính shape-outside. Thuộc tính kỳ diệu này cho phép chúng ta xác định một hình dạng mà văn bản sẽ bao quanh. Nó giống như nói với văn bản của bạn, "Hey, có một hình dạng vô hình ở đây. Đừng đụng vào nó!"

Cú pháp

Cú pháp cơ bản cho shape-outside rất đơn giản:

.element {
  shape-outside: value;
}

Dễ dàng phải không? Nhưng niềm vui thực sự bắt đầu khi chúng ta bắt đầu chơi với các giá trị khác nhau!

Các giá trị khả dụng cho shape-outside

Bây giờ, hãy xem xét các hình dạng khác nhau mà chúng ta có thể tạo ra. Tôi đã chuẩn bị một bảng tiện lợi cho bạn:

Giá trị Mô tả
margin-box Sử dụng khung margin của phần tử làm hình dạng
content-box Sử dụng khung content của phần tử làm hình dạng
padding-box Sử dụng khung padding của phần tử làm hình dạng
border-box Sử dụng khung border của phần tử làm hình dạng
circle() Tạo hình tròn
ellipse() Tạo hình elip
url() Sử dụng hình ảnh để xác định hình dạng
polygon() Tạo hình đa giác
inset() Tạo hình chữ nhật lõm vào
path() Xác định hình dạng bằng đường dẫn SVG
linear-gradient() Sử dụng gradient tuyến tính để xác định hình dạng

Wow, danh sách này khá dài! Đừng lo lắng, chúng ta sẽ qua từng giá trị này với các ví dụ.

Áp dụng cho

Trước khi chúng ta bắt đầu, điều quan trọng cần lưu ý là shape-outside chỉ áp dụng cho các phần tử nổi. Vậy, hãy chắc chắn rằng phần tử của bạn có thuộc tính float được đặt!

Hãy tạo hình dạng!

CSS shape-outside - margin-box

.shape {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  shape-outside: margin-box;
  margin: 20px;
}

Trong ví dụ này, văn bản sẽ bao quanh khung margin của hình vuông đỏ. Nó giống như cho hình dạng của bạn một chút không gian cá nhân!

CSS shape-outside - content-box

.shape {
  float: left;
  width: 100px;
  height: 100px;
  background: blue;
  shape-outside: content-box;
  padding: 20px;
}

Tại đây, văn bản sẽ ôm khung content chặt chẽ, bỏ qua padding. Nó hoàn hảo cho khi bạn muốn văn bản của mình挨近 hình dạng!

CSS shape-outside - padding-box

.shape {
  float: left;
  width: 100px;
  height: 100px;
  background: green;
  shape-outside: padding-box;
  padding: 20px;
}

Với padding-box, văn bản tôn trọng padding nhưng bỏ qua border. Nó giống như một vị khách lịch sự không muốn xâm phạm quá nhiều!

CSS shape-outside - border-box

.shape {
  float: left;
  width: 100px;
  height: 100px;
  background: yellow;
  shape-outside: border-box;
  border: 20px solid black;
}

Giá trị border-box bao gồm border trong hình dạng. Nó rất tuyệt vời khi bạn muốn văn bản bao quanh toàn bộ phần tử, bao gồm cả border.

CSS shape-outside - circle()

.shape {
  float: left;
  width: 100px;
  height: 100px;
  background: purple;
  shape-outside: circle(50%);
  border-radius: 50%;
}

Điều này tạo ra một hình tròn cho văn bản bao quanh. Nó giống như dành cho bố cục của bạn một vòng vỗ tay!

CSS shape-outside - ellipse()

.shape {
  float: left;
  width: 150px;
  height: 100px;
  background: orange;
  shape-outside: ellipse(40% 50%);
  border-radius: 50%;
}

Với ellipse(), chúng ta có thể tạo hình oval. Nó hoàn hảo cho khi bạn muốn thêm một chút sự tuyệt vời vào thiết kế của bạn! (Xin lỗi, tôi không thể không cười nhạo một câu joke của bố.)

CSS shape-outside - url()

.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: url('star.png');
  background: url('star.png') no-repeat;
  background-size: contain;
}

Điều này cho phép bạn sử dụng một hình ảnh để xác định hình dạng. Đảm bảo rằng hình ảnh của bạn có độ trong suốt ở những nơi bạn muốn văn bản bao quanh!

CSS shape-outside - polygon()

.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: pink;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Với polygon(), bạn có thể tạo bất kỳ hình dạng nào bạn muốn bằng cách xác định các điểm của nó. Trong ví dụ này, chúng ta đã tạo một hình ngôi sao. Nó giống như trở thành một phù thủy hình học!

CSS shape-outside - inset()

.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: inset(20px 30px 40px 10px round 10px);
  background: lightblue;
  clip-path: inset(20px 30px 40px 10px round 10px);
}

inset() cho phép bạn tạo một hình chữ nhật với các góc tròn. Nó hoàn hảo cho việc tạo các balloon hoặc nút tùy chỉnh.

CSS shape-outside - path()

.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
  background: lightgreen;
  clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}

Chức năng path() cho phép bạn tạo các hình dạng phức tạp bằng dữ liệu đường dẫn SVG. Nó giống như trở thành một nghệ sĩ kỹ thuật số!

CSS shape-outside - linear-gradient()

.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: linear-gradient(45deg, transparent 50%, black 50%);
  background: linear-gradient(45deg, transparent 50%, black 50%);
}

Mẹo này sử dụng gradient để tạo một hình dạng đường chéo. Nó là một cách tuyệt vời để thêm một chút phong cách góc cạnh vào thiết kế của bạn!

Thuộc tính liên quan đến shape-outside

Để tận dụng tối đa shape-outside, bạn thường sẽ sử dụng các thuộc tính liên quan này:

  • shape-image-threshold: Xác định ngưỡng alpha cho việc trích xuất hình dạng từ hình ảnh.
  • shape-margin: Thêm một margin vào hình dạng.

Dưới đây là một ví dụ nhanh:

.shape {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: url('star.png');
  shape-image-threshold: 0.5;
  shape-margin: 20px;
  background: url('star.png') no-repeat;
  background-size: contain;
}

Mã này tạo một hình ngôi sao từ một hình ảnh, với ngưỡng alpha là 0.5 và margin là 20px xung quanh hình dạng.

Kết luận

Và thế là chúng ta đã cùng nhau khám phá thế giới của CSS shapes, từ những hộp đơn giản đến các đường dẫn phức tạp. Lưu ý rằng chìa khóa để thành thạo CSS shapes là sự thử nghiệm. Đừng ngần ngại chơi với các giá trị khác nhau và xem会发生什么。

Khi kết thúc, tôi nhớ lại một học sinh đã từng nói với tôi, "CSS shapes giống như phép thuật - chúng biến điều không thể thành có thể!" Và cô ấy hoàn toàn đúng. Với CSS shapes, bạn có thể biến những bố cục nhàm chán thành những tác phẩm nghệ thuật.

Vậy, hãy tiến lên và tạo hình dạng cho thiết kế web của bạn! Và nhớ rằng, trong thế giới CSS, không có sai lầm, chỉ có những tai nạn vui vẻ (như Bob Ross từng nói). Chúc các bạn may mắn với mã code của mình!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Cheating
Hướng Dẫn Tiếp Theo:
CSS - Định dạng Ảnh