Cách sử dụng hiệu ứng văn bản CSS3

Video: Bài 10: Hiệu ứng slide - phần html và css 2025

Sự cải tiến đáng kể nhất trong CSS3 là cơ chế @font cho phép bạn định nghĩa các phông chữ của riêng bạn và gói chúng với trang web của bạn. CSS3 còn có các thủ thuật định dạng văn bản khác nữa. Quy tắc văn bản-đột qu and và văn bản bóng tối cho phép bạn thực hiện các phép biến đổi thú vị trên văn bản trong các trang của bạn.

Cả hai quy tắc này đều được sử dụng để trang trí văn bản, nhưng chúng có thể ảnh hưởng đến khả năng đọc, vì vậy bạn nên sử dụng chúng cẩn thận. Chúng thích hợp hơn cho văn bản lớn hơn (như tiêu đề) hơn nội dung chính của trang web của bạn.

Kéo văn bản

Với CSS3, bạn có thể chỉ định một màu đột qu for cho văn bản của bạn. Điều này định nghĩa một phác thảo xung quanh bức thư. Bạn có thể chỉ định màu sắc nét (sử dụng bất kỳ giá trị màu CSS tiêu chuẩn nào) cũng như chiều rộng nét (sử dụng các thuộc tính kích thước bình thường).

Quy tắc đột qu text văn bản áp dụng hiệu ứng này. Bạn có thể thấy nó được sử dụng trong đoạn code:

. html h2 (màu sắc: màu vàng; -bộ văn phòng-văn bản-đột qu:: 2px màu đỏ; font-size: 300%;}

Text Stroke Demo

Văn bản này có đột qu <

Hiện tại không có trình duyệt nào hỗ trợ trực tiếp thuộc tính stroke-stroke, nhưng các trình duyệt dựa trên WebKit (Chrome và Safari) phiên bản web cụ thể. Một trình duyệt không hỗ trợ quy tắc sẽ đơn giản bỏ qua nó, vì vậy đây không phải là một phần quan trọng trong thiết kế của bạn cho đến khi hỗ trợ hoàn thiện hơn.

Text-shadow

Bóng tối là một đặc điểm chung của thiết kế web hiện đại. Bóng đổ thêm một phần chiều sâu vào một trang, nhưng chúng cũng có thể tăng khả năng đọc (nếu được sử dụng đúng cách) để nhấc tiêu đề lên trang. Thuộc tính text-shadow thuộc về kỹ thuật là một phần của CSS2, nhưng gần đây nó đã được hỗ trợ bởi các trình duyệt chính.

textShadow. html h2 {font-size: 300%; Văn bản này có một bóng

Thuộc tính có bốn tham số:

offset-x

Xác định khoảng cách trong trục x (bên trái) bên phải bóng sẽ được từ văn bản gốc. Một giá trị dương di chuyển bóng sang phải, và một giá trị âm di chuyển sang trái. offset-y :
Xác định khoảng cách trong trục y (lên xuống) bóng sẽ từ văn bản ban đầu. Một giá trị dương di chuyển bóng tối xuống, và một giá trị âm di chuyển bóng tối. mờ :
Chỉ định bán kính mờ của bóng tối. Nếu giá trị là 0px, không có sự mờ, và bóng trông giống như văn bản ban đầu. Nói chung, bạn sẽ muốn giá trị blur gần thời gian bù đắp dài nhất. Điều này cho phép bóng được nhận dạng như một bóng của văn bản mà không trở thành một phân tâm. màu :
Định nghĩa màu bóng. Nói chung màu xám tối được ưa thích, nhưng bạn cũng có thể thử các màu khác cho các hiệu ứng đặc biệt. Lưu ý rằng làm mờ có xu hướng làm sáng màu bóng. Nếu có nhiều sự mờ nhạt được áp dụng, màu bóng có thể có cùng màu với văn bản. Nếu bóng tối sẽ không bị mờ nhiều, bạn có thể cần phải làm sáng màu bóng để có thể đọc được. Kích thước của bóng được xác định gián tiếp với sự kết hợp của các độ lệch và độ mờ. Bạn có thể phải thử nghiệm để có được cái bóng bạn đang tìm kiếm. Hiệu ứng bóng tối là tốt nhất khi chúng tinh tế vì chúng có thể ảnh hưởng đến tính dễ đọc. Một trường hợp đặc biệt của văn bản bóng tối có thể được sử dụng để giúp văn bản nổi bật so với hình nền. Áp dụng một bóng nhỏ màu tương phản. Kỹ thuật này thường được sử dụng khi bạn cần phải có văn bản trên nền vì mỗi chữ cái tạo ra nền tương phản cao riêng của nó. Một lần nữa, hãy chắc chắn không phải hy sinh tính dễ đọc vì lợi ích của đạo đức thiết kế.