Tạo hiệu ứng nét chữ trong CSS không đơn giản như người ta tưởng. Chúng ta đã nói về thuộc tính nét chữ trong hướng dẫn trước, nhưng thuộc tính này gây ra sự cố kết xuất trong hầu hết các trình duyệt tại thời điểm viết bài
Đó là lý do tại sao chúng tôi đã khám phá một kỹ thuật khác, bao gồm
- Sử dụng bộ lọc bóng đổ để tạo 4 bóng đổ khác nhau, mỗi bóng đổ một bên cho thành phần văn bản
- Đặt màu văn bản bằng màu nền
.title {
color: midnightblue;
filter: drop-shadow[-0.5px 0 0 mistyrose]
drop-shadow[0.5px 0 0 mistyrose]
drop-shadow[0 -0.5px 0 mistyrose]
drop-shadow[0 0.5px 0 mistyrose];
}
body {
background-color: midnightblue;
}Một vài lưu ý. chúng tôi đã không sử dụng thuộc tính box-shadow vì nó sẽ tạo bóng xung quanh 'hộp' chứa văn bản. Mặt khác, thuộc tính text-shadow tạo ra vấn đề hiển thị xung quanh các góc văn bản. Chúng tôi không thể đặt màu trong suốt vì bóng cũng sẽ biến mất và văn bản sẽ không thể truy cập được
Sẽ thật tuyệt nếu chúng ta có thể sửa đổi giá trị trải rộng của thuộc tính text-shadow [e. g. , text-shadow: 0 0 0 1px mistyrose;], nhưng thật không may, chỉ có thuộc tính box-shadow hỗ trợ giá trị trải rộng
Viết văn bản là khá phổ biến. Tuy nhiên, theo thời gian, lĩnh vực công nghệ đã có nhiều đổi mới để giúp cải thiện giao diện chung của văn bản. Và một trong những hiệu ứng phổ biến đó là hiệu ứng chữ CSS nét. Các nhà phát triển khác nhau đã đưa ra các hiệu ứng khác nhau cho phép người dùng giải quyết các tùy chọn ưa thích nhất của họ. Bài viết này giải thích 15 hiệu ứng văn bản nét CSS tốt nhất mà bạn có thể sử dụng. đọc tiếp
Ví dụ về hiệu ứng văn bản CSS Stroke tốt nhất
1. Phác thảo bất kỳ phông chữ nào với hiệu ứng văn bản CSS này
Xem Pen Outline bất kỳ phông chữ nào có hiệu ứng văn bản CSS này của Bekah McDonald [@bekahmcdonald] trên CodePen
Các văn bản có nét đẹp làm cho nội dung của bạn bắt mắt dẫn đến nhiều người nhìn vào nó. Do đó, hiệu ứng văn bản nét CSS khá quan trọng. Đây là một ví dụ của Bekah McDonald được viết bằng HTML và CSS. Nó nét văn bản một cách độc đáo với thư pháp tuyệt vời phù hợp với nhiều tiêu đề khác nhau
NHẬN MÃ
2. Hiệu ứng văn bản nét dốc CSS3
Xem Hiệu ứng văn bản Dốc nét bút CSS3. bởi wilsmex [@wilsmex] trên CodePen
Bạn đang tìm kiếm một hiệu ứng văn bản độc đáo và thu hút sự chú ý? . Đó là một hiệu ứng văn bản điều chỉnh nhiều màu mang lại một cái nhìn thú vị. Phong cách thư pháp cũng đậm. Ví dụ về nét vẽ CSS là của người dùng Codepen, Wilsmex sử dụng HTML, CSS và JS
NHẬN MÃ
3. Nền CSS Conic-gradient
Xem nền Pen CSS conic-gradient của Peter Bartholomew [@pjbartholomew] trên CodePen
Hiệu ứng văn bản nét CSS này là một trong những hiệu ứng tốt nhất, nhờ nền chuyển màu hình nón. Nó cung cấp văn bản chồng lên nhau trên nền tuyệt đẹp, do đó thu hút nhiều người vào nội dung. Hiệu ứng văn bản là một lựa chọn tuyệt vời trên trang mở đầu. Bên cạnh đó, mã là của nhà phát triển Peter Bartholomew, người sử dụng HTML và CSS
NHẬN MÃ
4. Nét chữ & Bóng đổ
Xem Nét văn bản & bóng đổ trên Bút của gc-nomade [@gc-nomade] trên CodePen
Hiệu ứng chữ nét chữ & đổ bóng khá được ưa chuộng nhờ thiết kế trang nhã. Đây là một ví dụ được tác giả bởi Gc-nomade sử dụng HTML và CSS. Kích thước phông chữ lớn và màu phông chữ xanh nhạt giúp văn bản nổi bật giữa các tùy chọn khác có sẵn. Bên cạnh đó, nền phản hồi nhanh và bao gồm một cấu trúc độc đáo
NHẬN MÃ
5. CSS Stroke Text Stroke – Hiệu ứng văn bản CSS Stroke Ví dụ
Xem Nét bút văn bản gốc CSS của Elad Shechter [@elad2412] trên CodePen
Hiệu ứng nét chữ là cách tốt nhất để truyền tải thông điệp, đặc biệt khi bạn nhấn mạnh một vấn đề. Hiệu ứng nét chữ gốc CSS này là một lựa chọn tuyệt vời cho áp phích, đặc biệt nếu bạn muốn chúng thu hút sự chú ý của nhiều người. Nó bao gồm một nền màu đỏ và màu chữ vàng để đạt được một cái nhìn thú vị. Lưu ý rằng hiệu ứng văn bản là của người dùng Codepen, Elad Shechter, người sử dụng CSS và HTML
NHẬN MÃ
6. Nét chuyển màu
Xem Nét Bút Gradient của Marco Biedermann [@marcobiedermann] trên CodePen
Khi tìm kiếm hiệu ứng văn bản nét CSS phù hợp, điều quan trọng là phải chọn một tùy chọn truyền tải thông điệp của bạn. Và nét Gradient này có các tính năng để tạo tâm trạng thu hút sự chú ý của mọi người. Đó là mã của Marco Biedermann sử dụng HTML và CSS. Cài đặt nhiều màu mang lại vẻ ngoài độc đáo và thanh lịch
NHẬN MÃ
7. Hiệu ứng mặt nạ CSS đột quỵ văn bản
Xem Hiệu ứng Mặt nạ CSS Nét bút Văn bản của Patrick Freedom Mayer [@freedommayer] trên CodePen
Để nét chữ này tương thích với nhiều trình duyệt như Chrome, Edge, Firefox, Safari và Opera. Đây là một ví dụ về hiệu ứng văn bản của Patrick Freedom Mayer, sử dụng HTML và CSS. Nền độc đáo và thú vị, cải thiện toàn bộ giao diện của văn bản
NHẬN MÃ
8. Hiệu ứng văn bản cổ điển
Xem Hiệu ứng văn bản Pen Retro [CSS thuần túy] của Yoav Kadosh [@ykadosh] trên CodePen
Hiệu ứng văn bản nét CSS này có chất lượng cao với hình ảnh mặt nạ phù hợp, clip nền và nét văn bản. Đó là một ví dụ của Yoav Kadosh trên hai ngôn ngữ lập trình phổ biến là HTML và CSS. Đó là một hiệu ứng đáp ứng với nhiều sự pha trộn màu sắc độc đáo và mang lại sự cân bằng phi thường cho toàn bộ giao diện
NHẬN MÃ
9. TYPO Ba hiệu ứng văn bản
Xem bộ ba Pen Typo của creatz [@creatz] trên CodePen
Hiệu ứng văn bản CSS Stroke là trợ thủ đắc lực nhất bất cứ khi nào bạn muốn văn bản của mình nổi bật giữa những văn bản khác. Tuy nhiên, với nhiều lựa chọn có sẵn, thật khó để chọn được lựa chọn phù hợp. Hiệu ứng văn bản TYPO Triple là một lựa chọn tuyệt vời cho áp phích hoặc quảng cáo. Cỡ chữ và màu sắc bắt mắt, thu hút sự chú ý của bất kỳ ai nhìn thấy nó. Bên cạnh đó, nó bao gồm phông nền và kiểu văn bản phù hợp. Lưu ý rằng hiệu ứng văn bản là của người dùng Codepen, Creatz và sử dụng CSS thuần túy
NHẬN MÃ
10. Điện thoại nút lớn Western Electric
Xem Pen Western Electric Big Button Phone của Alex [@alexgoff] trên CodePen
Hiệu ứng văn bản điện thoại nút lớn của Western Electric lấy ý tưởng từ điện thoại nút lớn cũ. Nó bao gồm một cây bút bắt chước kiểu điện thoại có nút lớn và các nét và bóng của văn bản. Hiệu ứng văn bản khác biệt và sáng tạo. Đây là một ví dụ của người dùng Codepen, Alex sử dụng HTML, CSS và JS. Bên cạnh đó, việc xây dựng và thiết kế rất ấn tượng
NHẬN MÃ
11. Nét, Bóng + Hiệu ứng Bán sắc
Xem Nét bút, Bóng đổ + Hiệu ứng Bán sắc của Mark Mead [@markmead] trên CodePen
Người dùng Codepen Mark Mead là người đứng sau hiệu ứng văn bản huyền thoại này. Nó được viết bằng HTML và CSS. Các hiệu ứng văn bản hòa trộn trong nền phù hợp, phông chữ độc đáo và bóng văn bản mang lại vẻ ngoài trang nhã. Lưu ý rằng nó tương thích với nhiều trình duyệt, bao gồm Chrome, Edge, Safari và Edge. Nhận các hiệu ứng văn bản này và cung cấp một trong những văn bản bắt mắt nhất từ trước đến nay
NHẬN MÃ
12. Nét chữ. 4 cách
Xem Nét chữ bút. 4 cách của Kseso [@Kseso] trên CodePen
Hiệu ứng văn bản nét này là một trong những hiệu ứng văn bản đa dạng nhất mà bạn có thể điều chỉnh nhờ cài đặt 4 chiều. Nó là một mã của Kseso được viết bằng HTML và CSS. Tùy chọn có nhiều tính năng, bao gồm nét văn bản, bóng văn bản, bóng đổ và văn bản bên trong mẫu SVG. Bên cạnh đó, nó phản hồi nhanh và kết hợp với nhiều trình duyệt, bao gồm Chrome, Firefox, Edge, v.v.
NHẬN MÃ
13. Bắt đầu truyền bá tin tức
Xem Pen Start Spreading The News — New York Poster [text-stroke, filters, and mix-blend-mode] của Melissa Em [@meowwwls] trên CodePen
Nếu bạn đang tìm kiếm một hiệu ứng văn bản phù hợp với khả năng sáng tạo của mình, thì tùy chọn này là cao cấp. Đó là một hiệu ứng bao gồm các nét văn bản, bộ lọc và chế độ hòa trộn để tạo ra một văn bản dứt khoát. Người viết mã nét CSS là Melisa Em, sử dụng HTML và CSS. Lưu ý rằng nó khá nhạy và tương thích với nhiều trình duyệt web
NHẬN MÃ
14. Nét viền văn bản CSS
Xem nét vẽ phác thảo văn bản Pen CSS của Viljami Salminen [@viljamis] trên CodePen
Nét viền văn bản CSS là của một người dùng Codepen chuyên nghiệp, Viljami Salminen, và Nó được viết bằng CSS và HTML. Cỡ chữ và màu sắc lớn và nhanh chóng thu hút sự chú ý của tất cả những người bắt gặp nó. Do đó, nó là một lựa chọn tuyệt vời cho bảng quảng cáo hoặc áp phích. Bên cạnh đó, hiệu ứng chữ nổi bật với text-shadow độc đáo làm nổi bật chữ
NHẬN MÃ
15. Văn bản chuyển màu và đột quỵ CSS3
Xem Văn bản chuyển màu và nét bút CSS3 của James Nowland [@jnowland] trên CodePen
Hiệu ứng văn bản cuối cùng trong danh sách của chúng tôi là của người dùng Codepen James Nowland, được viết bằng HTML và CSS. Nó có màu nền độc đáo, bóng văn bản chuyển màu và phông chữ lớn. Hiệu ứng văn bản đột quỵ CSS này là tuyệt vời cho những người cần văn bản lớn