Thứ năm, 03/09/2020 | 00:00 GMT+7

Tùy chỉnh gạch chân với trang trí văn bản trong CSS


Họ nói rằng những điều tốt đẹp sẽ đến với những người biết chờ đợi , và điều này hóa ra lại rất đúng khi nói đến trang trí văn bản trên web. Mô-đun trang trí văn bản CSS cấp độ 3 xác định một số cách mới tuyệt vời để trang trí văn bản trên web và các trình duyệt cuối cùng cũng bắt đầu hỗ trợ tốt cho chúng. Thời gian sử dụng đường viền dưới cùng thay vì gạch dưới văn bản thích hợp để có được một màu gạch dưới khác cuối cùng có thể trôi qua.

Kết quả có thể khác nhau: hỗ trợ vẫn còn hạn chế, vì vậy các ví dụ trong bài đăng này có thể không hiển thị chính xác tùy thuộc vào trình duyệt bạn đang sử dụng.

trang trí văn bản

Thuộc tính text-decoration sử dụng để chỉ về một sự lựa chọn giữa các giá trị của none, gạch dưới, overlinedòng qua, nhưng với đề nghị mới là trở thành một cách viết tắt cho cái mới text-decoration màu, text-decoration-phong cáchvăn bản thuộc tính -decoration-line . Ví dụ, đây là một gạch chân kép màu:

.fancy {
  -webkit-text-decoration: hotpink double underline;
  text-decoration: hotpink double underline;
}

Gạch chân lạ mắt

văn bản-trang trí-màu sắc

Hoạt động giống như bạn tưởng tượng. Cuối cùng là cách thay đổi màu trang trí chữ!

văn bản-trang trí-phong cách

text-decoration-style được sử dụng để xác định kiểu trang trí văn bản và đề xuất mới mang lại hai giá trị mới: gấp đôigợn sóng :

.wavy {
  text-decoration: underline;
  -webkit-text-decoration-color: salmon;
  text-decoration-color: salmon;
  -webkit-text-decoration-style: wavy;
  text-decoration-style: wavy;
}

Trang trí gợn sóng

văn bản-trang trí-dòng

text-decoration-line chấp nhận giá trị của gạch dưới, overline, line-throughchớp (chớp bị phản đối tuy nhiên):

.strike {
  -webkit-text-decoration-color: red;
  text-decoration-color: red;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

Tấn công cái này

văn bản-trang trí-bỏ qua

Với văn bản-trang trí-bỏ qua, ta có thể tránh có bước trang trí trên các phần của phần tử được áp dụng. Các giá trị có thể là đối tượng , khoảng trắng , mực , cạnhtrang trí hộp .

  • ink : Cuối cùng, một cách để ngăn trang trí văn bản khỏi các dấu gạch chéo glyph chồng lên nhau:
.ink {
  -webkit-text-decoration: darkturquoise solid underline;
  text-decoration: darkturquoise solid underline;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

Hà mã


  • đối tượng : Trang trí văn bản bỏ qua các phần tử có hiển thị khối nội tuyến . Nó cũng là giá trị ban đầu:
<p class="super">
  Getting <span style="display: inline-block;">Very</span> Fancy
</p>
.super {
  -webkit-text-decoration: peru solid overline;
  text-decoration: peru solid overline;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip: objects;
}

Bắt rất thích


Các giá trị còn lại chưa được trình duyệt hỗ trợ tốt:

  • dấu cách : Trang trí bỏ qua khoảng trắng và dấu chấm câu.
  • edge : Tạo khoảng cách khi hai phần tử có trang trí văn bản ở cạnh nhau.
  • hộp trang trí : Trang trí bỏ qua bất kỳ lề, phần đệm hoặc đường viền được thừa kế nào.

text-underline-position

Với text-underline-position, ta có một cách khác để kiểm soát vị trí của trang trí văn bản liên quan đến glyphs. Các giá trị có thể là tự động , dưới , tráiphải .

Với tự động , giá trị ban đầu , các trình duyệt thường sẽ đặt trang trí gần với đường cơ sở văn bản:

.auto {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: auto;
  text-underline-position: auto;
}

Hà mã

... và thông báo tại như thế nào, với dưới, trang trí được đặt sau khi xuống của văn bản:

.under {
  -webkit-text-decoration: slateblue solid underline;
  text-decoration: slateblue solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

Hà mã

Các giá trị bên tráibên phải cho văn bản-gạch dưới-vị trí được sử dụng để điều khiển trang trí văn bản ở chế độ viết dọc.

Bây giờ hãy tiếp tục và gây ấn tượng với ta với một số trang trí văn bản lạ mắt!

Hỗ trợ trình duyệt: Kể từ năm 2020, Tôi có thể sử dụng trang trí văn bản không? cho thấy rằng 94% trình duyệt trên toàn thế giới có hỗ trợ ít nhất một phần cho thuộc tính.


Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03