Thứ Hai , 22 Tháng Một 2018
Trang chủ / Công nghệ web / Bố trí nội dung theo nhiều hình dạng với CSS3

Bố trí nội dung theo nhiều hình dạng với CSS3

Những trang phương tiện truyền thông in khi nói đến cách bố trí và hiển thị nội dung, thì thường có sự linh hoạt hơn những trang truyền thông website. Bởi vì nội dung web đều được cấu trúc sẵn, vì thế sẽ rất khó khăn để đưa văn bản vào những khung hình, hình dạng khác thường trong mỗi thiết kế web, giống như cách mà các tạp chí làm . Tuy nhiên thực tế thì không phải là không có cách, nhóm nghiên cứu CSS3 hiện đang làm việc để làm cho điều này có thể cho nội dung trang web, với việc sử dụng các shape-inside. Bài viết này chúng tôi sẽ chia sẻ cho các bạn biết cách nó hoạt động như thế nào để  bố trí nội dung trong nhiều hình dạng.

2013.08.07

Shape-inside cho phép chúng ta hình thành 4 hình dạng hình chữ nhật, hình tròn, đa giác, và hình elip. Một ví dụ để thử tạo ra hình tam giác như sau

 

hêhee

Kết quả cho ra :

â

Nếu bạn muốn để gom nội dung của bạn trong một hình dạng tùy chỉnh, nhưng bạn không biết làm thế nào để thiết lập các chỉ số phối trí, thì đây có thể là một cách để bạn thử.

Đầu tiên, tạo ra các hình dạng trong một biên tập vector như Adobe Illustrator hoặc Inkscape. Sau đó lưu nó trong một định dạng SVG , và mở nó trong một trình soạn thảo văn bản .

Tìm tọa độ, phân công mỗi người với một phép đo đơn vị (px hoặc%). Sao chép chúng, và paste nó vào giá trị đa giác. Trong ví dụ này, tôi chỉ đơn giản là tạo ra một hình lục giác.

svg-shape {
   -webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);}

Kết quả ra được:

aa

Trên thực tế, nó có thể tham khảo trực tiếp đến tập tin SVG để bọc các nội dung.

magazine-layoutKhông phải mọi trang web chuyên nghiệp sẽ được áp dụng thuộc tính này. Tuy nhiên, với sự tiến bộ hiện nay thì việc bố trí Web sẽ được tinh vi hơn trong tương lai. Bạn có thể tìm hiểu thêm thông tin từ các tài liệu tham khảo khác.

 

Bố trí nội dung theo nhiều hình dạng với CSS3
2.7 (53.33%) 3 votes

Có thể bạn quan tâm

www là gì? Sự khác nhau giữa www và non-www

Tóm tắt bài viết WWW là gì?WWW vs non-WWW – Lợi ích cho SEOSự khác …

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

--------------------------------------------------->