Hướng dẫn css shape editor
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Show 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 GreenSocksHã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 ShapesCSS 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 Thuộc tính Thuộc tính Hãy xem một số ví dụ. Tạo một ShapeCá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ẻ
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; } 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ì Để 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; -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ònHàm Tương tự, toạ độ 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 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 ModelCSS 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; 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à 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:
Tổng kết lạiTrong 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.
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! |