Đặt Loại trên Vòng tròn … với đường dẫn bù

[ad_1]

Đây là một số mánh CSS hợp pháp từ nhân dân tệ. Có thuộc tính CSS offset-path . Ngày xửa ngày xưa, nó được gọi là đường dẫn chuyển động và sau đó nó được đổi tên. Lúc đó tôi mới tròn mắt, vì tài sản rõ ràng là để làm hoạt hình mọi thứ trên một con đường. Nhưng bạn không để sử dụng nó cho hoạt hình, do đó đổi tên và ví dụ này chứng minh điều đó!

Mặc dù vậy, việc thiết lập các phần tử trên một đường dẫn là toàn bộ phần tử được đặt trên đường dẫn đó. Vì vậy, nếu yếu tố đó là, giả sử, Chris toàn bộ từ đó được đặt tại một điểm duy nhất trên đường dẫn. Thủ thuật của nhân dân tệ là chia chuỗi thành các chữ cái, sau đó đặt từng nhịp dọc theo đường đi (với khoảng cách khác nhau ).

Có một đường dẫn vòng tròn được áp dụng cho mỗi nhịp:

  offset-path: path ('M 0 200 A 200 200 0 0 1 400 200')  

Sau đó, có một số phép toán nhảy lạ mắt (dĩ nhiên là cụ thể cho bản demo này) để tính khoảng cách phù hợp cho mỗi chữ cái:

  khoảng cách bù: calc (8% + var (- n) * 89,5% / var (- tổng));  

Vẻ đẹp là mỗi nhịp có thuộc tính tùy chỉnh riêng ảnh hưởng đến tính toán. Không cần CSS lặp đi lặp lại lớn: cần thiết.

  
   C    S    S   

Và nó không chỉ dành cho các chữ cái! Nó tốt cho tất cả các loại công cụ!

Ghi chú liên quan:

  • Đây là cách sạch hơn so với phương pháp cũ mà chúng tôi đã viết blog khi mỗi nhịp phải sử dụng phép biến đổi : rotation () với điểm gốc được đặt cách xa chính bức thư.
  • SVG xử lý việc này mà không cần bất kỳ tin tặc nào. (Đây hoàn toàn không phải là một vụ hack, nhưng vì bạn phải chia thành các nhịp, nên ít nhất bạn cần aria-nhãn cha mẹ, sau đó làm cho nó cảm thấy tin tặc hơn.)
  • Nitpick (Tôi là người tồi tệ nhất): Đừng chỉ tạo các thẻ HTML như bản demo này Bút trên các trang web không phải bản demo mà mọi người cần sử dụng.
[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *

.
.
.
.