Lập trình web

CSS Shapes - Tương lai của Web

Chia sẻ nhanh

Xu hướng flat design hiện nay đã nói lên một điều: Các thành phần được hạn chế tối giản trong các thiết kế. Chúng ta không còn quan tâm tới những góc xiên, độ dốc và bóng của một đối tượng. Có một cấu trúc để các designer xây dựng xung quanh: Hình chữ nhật.



Có nhiều cách hiển thị một hình chữ nhật bằng các điểm ảnh trên màn hình nhưng khi thiết kế hiển thị cho các định dạng màn hình khác nhau thì các tùy chọn bố trí hiển thị của bạn sẽ bị hạn chế.

Chúng ta đều biết rằng tất cả các góc vuông không vuông góc , tất cả đường thẳng không luôn luôn thẳng. Trong thực tế, một số thiết kế từ thế kỷ trước đã phá vỡ khỏi các layout grid design và các cung, góc độ truyền thống. Xu hướng đó đã tạo ra tính kích thích lớn cho các mẫu thiết kế về sau. Và một tài liệu mang tên InDesign ra đời. Bạn chỉ cần chọn công cụ hình elip và vẽ một vòng tròn trên văn bản của bạn, chọn kiểu công cụ và vẽ chúng lên văn bản điều đó thật tuyệt vời nếu chúng ta có thể áp dụng cho CSS.

Tất nhiên có rất nhiều cách để vẽ một vòng tròn trên một trang web , nhưng nếu bạn sử dụng thuộc tính float một đoạn text xung quanh vòng tròn đó bạn sẽ thấy rằng nó không thực sự là một vòng tròn. Khung giới hạn của nó vẫn còn hình chữ nhật. Lựa chọn duy nhất cho việc tạo văn bản sử dụng float theo một đường cong là chèn dấu cách vào đầu mỗi xòng hoặc căn khoảng cách trái phải bằng tay. Đó là một cách làm không hề hữu dụng.

Để giải quyết vấn đề đó, W3C đang phát triển CSS Shapes. Phiên bản đầu tiên được dự thảo giới thiệu vào ngày 20 tháng 6, CSS Shapes Module Level 1, chi tiết về việc sử dụng các hình dạng không phải là hình chữ nhật liên quan đến các box model và các tương tác của thuộc tính float. Hiện tại đang trong quá trình đề nghị bổ sung CSS cho hình chữ nhật, hình tròn, hình elip và hình đa giác.

Trong những ví dụ ban đầu chúng tôi sẽ chỉ sử dụng thuộc tính float xung quanh một hình dạng sử dụng thuộc tính shape-outside:

<div id='circle'></div>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<style type='text/css'>
#circle {
shape-outside: circle(-400px,-400px,400px); /* (x, y, radius) */
float:left;
}

Đoạn code trên sẽ tạo ra một vòng tròn 800 x 800 (hai lần bán kính) với tâm vòng tròn tại vị trí 0,0. Text float sẽ được hiển thị như sau:


Thậm chí thú vị hơn là CSS Shapes sẽ tự do thể hiện hình ảnh tương tự như đối với Photoshop mặc dù không rõ ràng các nhà sản xuất trình duyệt có hỗ trợ khả năng hiển thị hình ảnh qua SVG hoặc bộ lọc. Và hãy tưởng tượng nếu chúng ta có thể tách hình ảnh giữa tiền cảnh (foreground) và hậu cảnh (background) trong một khung hình cùng với đó hậu cảnh được sử dụng cho background-image thì đó là một điều tuyệt vời mà chúng ta cần hướng tới.

Tôi sẽ ví dụ thêm nếu text float được sử dụng trong trường hợp này :D


Sau khi được hỗ trợ rộng rãi, CSS Shapes có khả năng báo trước một kỷ nguyên mới của thiết kế web, mà trong đó thiết kế không bị giới hạn mô hình hộp chữ nhật. Tương lai, là theo đúng nghĩa đen, chỉ là các góc.

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?