49. Hiệu ứng chữ trong CSS

Hiệu ứng chữ trong CSS: bạn có thể tạo các hiệu ứng chữ độc đáo bằng cách sử dụng thuộc tính text-transform, text-decoration, text-shadow, @keyframes, và nhiều thuộc tính khác. Dưới đây là một số ví dụ về các hiệu ứng chữ khác nhau:

1. Chuyển đổi chữ in hoa và in thường:

css

.uppercase-text {
  text-transform: uppercase;
}

.lowercase-text {
  text-transform: lowercase;
}

Ví dụ trên cho phép bạn chuyển đổi chữ thành in hoa hoặc in thường.

2. Gạch chân chữ:

css

.underlined-text {
  text-decoration: underline;
}

Ví dụ này tạo gạch chân dưới chữ.

3. Gạch ngang chữ:

css

.overlined-text {
  text-decoration: overline;
}

Tạo gạch ngang trên chữ.

4. Gạch xuyên qua chữ:

css

.line-through-text {
  text-decoration: line-through;
}

Tạo gạch xuyên qua chữ.

5. Hiệu ứng bóng chữ:

css

.text-with-shadow {
  font-size: 24px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Thêm bóng đổ vào chữ để tạo hiệu ứng nổi bật.

6. Hiệu ứng chữ bằng keyframes:

css

@keyframes rainbow-text {
  0% { color: red; }
  25% { color: orange; }
  50% { color: yellow; }
  75% { color: green; }
  100% { color: blue; }
}

.animated-text {
  animation: rainbow-text 4s linear infinite;
}

Ví dụ này tạo một hiệu ứng chữ màu sắc biến đổi dọc theo cầu vồng bằng cách sử dụng @keyframes và animation.

Nhớ rằng, các ví dụ trên chỉ là một phần nhỏ của những gì bạn có thể tạo ra với CSS để thêm hiệu ứng vào văn bản. Bạn có thể tùy chỉnh các thuộc tính và giá trị để tạo ra những hiệu ứng chữ độc đáo và thú vị.