Thiết kế web HTML5: Hướng dẫn tạo Columns bằng CSS3 | Thiet Ke Website HTML5

Thiết kế web HTML5: Hướng dẫn tạo Columns bằng CSS3 | Thiet Ke Website HTML5

Bài viết hướng dẫn các bạn phương pháp tạo cột bằng CSS3 với công nghệ thiết kế web HTML5. Những columns đơn giản ta không cần đến đoạn code rắc rối của table nữa mà chỉ cần một thuộc tính.

Tính năng CSS3 Multiple Columns: cho phép khai báo số lượng cột, chiều rộng, khoảng cách từng cột và khoảng cách đường viền. Các thuộc tính cho tag như sau:

• column-count: số cột
• column-width: chiều rộng cột
• column-gap: khoảng cách giữa các cột
• column-rule: đường phân cách giữa các cột

Các bạn lưu ý là phải thêm định dạng browser trước các thuộc tính trên nhé (-webkit-, -moz-, …)

VÍ dụ:

Đoạn văn bản chia 3 cột từ trái sang phải sau:

Thiết kế Web HTML5 cung cấp gói Website tiêu chuẩn nhất với công nghệ HTML5 và CSS3 giúp tối ưu hóa tốc độ duyệt web, đạt chuẩn W3C,  chuẩn hóa SEO giúp website quảng cáo hiệu quả nhất.

Với đoạn thuộc tính như sau:

-webkit-column-count: 3;
-webkit-column-width: 110px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #d6d6d6;
-moz-column-count: 3;
-moz-column-width: 110px;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #d6d6d6;
-o-column-count: 3;
-o-column-width: 110px;
-o-column-gap: 20px;
-o-column-rule: 1px solid #d6d6d6;



Chúc các bạn thành công với hiệu ứng của cộng nghệ thiết kế web mới HTML5 & CSS3 này.



Nguồn: thietkewebhtml5.net