Trình tạo hiệu ứng văn bản CSS

Hầu hết các phòng trưng bày hiệu ứng văn bản CSS đều cung cấp cho bạn một cài đặt sẵn cố định: một ánh sáng neon, một hình đùn 3D, lấy nó hoặc để nó. Thay vào đó, trình tạo này xây dựng CSS từ các tham số của bạn trên văn bản bạn thực sự nhập. Chọn ánh sáng neon, 3D-extrude, letterpress/emboss, đường viền hoặc tô chuyển màu từ lựa chọn hiệu ứng, điều chỉnh các điều khiển riêng của hiệu ứng đó và bản xem trước trực tiếp cộng với khối CSS có thể sao chép bên dưới nó cập nhật mỗi thay đổi.

Hiệu ứng đùn 3D là hiệu ứng đáng để hiểu: đối với độ sâu đã chọn (số lớp xếp chồng lên nhau) và góc, lớp i được bù bằng i × cos(góc) theo chiều ngang và i × sin(góc) theo chiều dọc, được tính bằng JavaScript với các hàm lượng giác thực - không được đọc từ bảng tra cứu các góc đặt trước. Ở 45 độ, độ lệch ngang và dọc sẽ bằng nhau đối với mỗi lớp, vì cosin và sin của 45° có cùng giá trị; xoay thanh trượt góc và xem toàn bộ các lớp `bóng văn bản` xoay quanh các chữ cái trong thời gian thực, mỗi lớp tối hơn một chút so với lớp cuối cùng để giả khuôn mặt 3D sáng.

Đèn neon xếp chồng bốn lớp `bóng văn bản` có bán kính mờ tăng dần theo màu bạn đã chọn, với nhấp nháy tùy chọn: bật nó lên và quy tắc `@keyframes` với một chuỗi ngẫu nhiên các mức giảm độ mờ sẽ được tạo và hoạt hình trực tiếp, đồng thời nút xáo trộn cho phép bạn cuộn lại mẫu mà không cần viết một khung hình chính bằng tay. Văn bản có đường viền áp dụng `-webkit-text-Stroke` cho các trình duyệt hỗ trợ nó, cộng với dự phòng `text-shadow` 8 hướng trung thực cho những trình duyệt không hỗ trợ - cả hai dòng đều gửi CSS được sao chép kèm theo ghi chú về lý do. Chuyển màu tô chuyển màu `tuyến tính-gradient` thành hình dạng văn bản bằng `background-clip: text`, hiện là thuộc tính tiêu chuẩn có hỗ trợ rộng rãi, giữ nguyên dòng tiền tố `-webkit-` cũ hơn cho các công cụ cũ.

Mọi thứ đều hiển thị cục bộ trong trình duyệt của bạn — không có văn bản bạn nhập nào được gửi đi bất cứ đâu. Sao chép khối CSS đã hoàn thành, bao gồm quy tắc `@keyframes` khi hiệu ứng cần, thẳng vào biểu định kiểu của bạn.