[Thủ thuật css] Hiệu ứng chữ tráng gương wordpress

02/01/2025

7 Phút đọc

59 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Hiện nay, việc tạo các hiệu ứng độc đáo cho văn bản đã trở thành một xu hướng phổ biến trong thiết kế web. Trong bài viết này, Muathemewpgiare sẽ hướng dẫn bạn cách tạo một hiệu ứng chữ tráng gương tuyệt đẹp cho website WordPress chỉ với CSS, không cần dùng đến JavaScript.

Đoạn mã dưới đây sẽ giúp bạn tạo ra một hiệu ứng chữ với nền hình ảnh chạy mượt mà, tạo cảm giác chữ như được “tráng gương”. Đặc biệt, hiệu ứng này sử dụng CSS thuần túy, giúp tối ưu tốc độ tải trang và dễ dàng tùy chỉnh.

Cách code hiệu ứng chữ tráng gương wordpress

Để bắt đầu, bạn chỉ cần sao chép đoạn mã HTML và CSS sau vào website WordPress của mình.

<p class="animated-text">
  Spice up your type with CSS
  <span>
    Animated text fill
  </span>
  &mdash; no JavaScript required &mdash;
</p>
<style>
.animated-text {
  text-transform: uppercase;
  letter-spacing: .5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, .25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  position: absolute;
  top: 18%;
  left: 50%;
  width: 40em;
  margin: 0 0 0 -20em;
}

.animated-text span {
  font: 700 4em/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, .5);

  /* Clip Background Image */
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;

  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 118s linear infinite; /* Adjusted duration for quicker demonstration */

  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
</style>

Spice up your type with CSS

<span>

Animated text fill

</span>

— no JavaScript required —

</p>

<style>

.animated-text {

text-transform: uppercase;

letter-spacing: .5em;

display: inline-block;

border: 4px double rgba(255, 255, 255, .25);

border-width: 4px 0;

padding: 1.5em 0em;

position: absolute;

top: 18%;

left: 50%;

width: 40em;

margin: 0 0 0 -20em;

}

.animated-text span {

font: 700 4em/1 "Oswald", sans-serif;

letter-spacing: 0;

padding: .25em 0 .325em;

display: block;

margin: 0 auto;

text-shadow: 0 0 80px rgba(255, 255, 255, .5);

/* Clip Background Image */

background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;

-webkit-background-clip: text;

background-clip: text;

/* Animate Background Image */

-webkit-text-fill-color: transparent;

-webkit-animation: aitf 118s linear infinite; /* Adjusted duration for quicker demonstration */

/* Activate hardware acceleration for smoother animations */

-webkit-transform: translate3d(0, 0, 0);

-webkit-backface-visibility: hidden;

}

/* Animate Background Image */

@-webkit-keyframes aitf {

0% {

background-position: 0% 50%;

}

100% {

background-position: 100% 50%;

}

</style>

Đoạn mã trên bao gồm hai phần chính: HTML và CSS. Trong phần HTML, chúng ta sử dụng một thẻ <p> với lớp animated-text để định nghĩa văn bản muốn áp dụng hiệu ứng. Đoạn văn bản bên trong thẻ <span> sẽ là phần nổi bật và có hiệu ứng chuyển động nền. Bạn có thể thay đổi văn bản trong thẻ <span> theo ý muốn để tạo ra các hiệu ứng cho các đoạn chữ khác nhau.

Phần CSS đảm nhận vai trò tạo ra các hiệu ứng cho chữ. Đầu tiên, các thuộc tính như text-transform, letter-spacing và border sẽ giúp bạn định dạng chữ. Các hiệu ứng hình ảnh động được áp dụng thông qua các thuộc tính như background-clip và text-shadow. Điều này cho phép bạn tạo ra hiệu ứng chữ tráng gương, kết hợp với nền hình ảnh động mượt mà.

Đặc biệt, hiệu ứng này còn có khả năng chạy mượt mà nhờ vào việc sử dụng -webkit-transform và -webkit-backface-visibility, đảm bảo hiệu ứng hiển thị ổn định trên nhiều thiết bị.

Để thêm mã này vào WordPress, bạn có thể làm theo các bước đơn giản dưới đây:

Thêm vào một trang hoặc bài viết: Truy cập vào phần quản trị WordPress, chọn “Trang” hoặc “Bài viết” nơi bạn muốn áp dụng hiệu ứng. Sau đó, chuyển sang chế độ chỉnh sửa HTML và dán mã HTML và CSS vào nơi bạn muốn hiển thị.
Sử dụng Custom CSS: Nếu bạn muốn hiệu ứng này xuất hiện trên toàn bộ trang web, bạn có thể thêm mã CSS vào phần “Tùy chỉnh” của WordPress. Truy cập vào Giao diện > Tùy chỉnh > CSS bổ sung, rồi dán mã CSS vào đó.

Chỉnh sửa theme: Nếu bạn sử dụng một theme tùy chỉnh, bạn có thể chèn mã CSS vào file style.css của theme để áp dụng hiệu ứng này cho tất cả các trang.

Lưu ý khi sử dụng hiệu ứng chữ tráng gương

Mặc dù hiệu ứng chữ tráng gương giúp tạo điểm nhấn cho trang web, bạn cũng nên lưu ý một số điều:

Tối ưu hóa hiệu suất: Do hiệu ứng yêu cầu tải một hình ảnh nền động, hãy chắc chắn rằng hình ảnh này có kích thước phù hợp và không làm giảm tốc độ tải trang của website.

Đảm bảo tương thích trình duyệt: Hiệu ứng này sử dụng các thuộc tính CSS đặc biệt cho WebKit, vì vậy nó có thể hoạt động tốt nhất trên các trình duyệt như Chrome và Safari. Kiểm tra tính tương thích trên các trình duyệt khác để đảm bảo trải nghiệm người dùng tốt nhất.

Thử nghiệm với tốc độ: Bạn có thể thay đổi thời gian hoạt động của hiệu ứng bằng cách điều chỉnh giá trị trong thuộc tính -webkit-animation để phù hợp với yêu cầu của bạn.

Với đoạn mã trên, bạn có thể dễ dàng tạo ra một hiệu ứng chữ tráng gương độc đáo cho website WordPress của mình, mang đến sự mới mẻ và thu hút người xem.

Xem thêm: