Tạo Class và Áp Dụng Class Cho Từng Phần Tử

Trong thiết kế website, việc duy trì sự thống nhất về màu sắc và kiểu dáng là rất quan trọng để tạo ra trải nghiệm người dùng tốt. Để đạt được điều này, chúng ta thường sử dụng class trong CSS. Bằng cách định nghĩa các class cho các phần tử như tiêu đề, văn bản, và nút bấm, chúng ta có thể dễ dàng áp dụng cùng một kiểu dáng cho nhiều phần tử khác nhau. Điều này không chỉ giúp tiết kiệm thời gian mà còn đảm bảo rằng tất cả các phần tử trong trang web đều đồng nhất về mặt hình thức.

Việc sử dụng class cũng cho phép chúng ta thực hiện thay đổi nhanh chóng khi cần thiết. Nếu muốn thay đổi màu sắc hoặc phông chữ của một phần tử, chỉ cần cập nhật mã CSS một lần cho class đó, và mọi phần tử sử dụng class đó sẽ tự động được cập nhật. Nhờ vậy, việc duy trì và quản lý phong cách thiết kế trở nên dễ dàng hơn.

Bài viết này chúng tôi chia sẻ về cách viết mã CSS vào file và áp dung mã cho từng phần tử riêng theo mục đích thiết kế. Chúng tôi sử dụng plugin Advanced Themer for Bricks để quản lý và hỗ trợ thiết kế với Bricks.

Tại giao diện thiết kế của brick bạn ấn vào Advanced CSS ở phía trên bên trái trình thiết kế (phải có plugin Advanced Themer for Bricks) tiếp theo chọn file.css có trong thư mục theme của bạn. Như trong hình dưới dây, tôi sử dụng child theme và trong đó có file child.css.

tại đây tôi viết một đoạn code css .h2tieude để tạo hiệu ứng cho dòng tiêu đề, và một hiệu ứng .h2tieude:hover để khi có chuột di qua tiêu đề đó sẽ biến đổi.

.h2tieude{ /*.hetieude là bộ trọn theo tên class */
    font-size: 2em; /* Kích thước chữ */
    color: transparent; /* Màu chữ trong suốt để chỉ hiển thị hiệu ứng */
    background: linear-gradient(90deg, #00ff00, #0000ff); /* Hiệu ứng gradient xanh */
    background-size: 200%; /* Kích thước nền */
    background-position: 100%; /* Vị trí nền ban đầu */
    -webkit-background-clip: text; /* Cắt nền theo chữ */
    background-clip: text; /* Cắt nền theo chữ */
    transition: background-position 0.5s ease; /* Hiệu ứng chuyển tiếp */
}
.h2tieude:hover {
  background-position: 0%; /* Di chuyển gradient khi di chuột */
}

soạn thảo xong đoạn code CSS bạn có thể lưu lại (Save & Close)

Trở lại giao diện thiết kế bước 1 bạn chọn phần tử cần áp dụng class đó, bước 2 vào menu Attributes bấm add để thêm một attributes name là class value chính là tên của class, trong ví dụ này sẽ là h2tieude

Khi phần tử được áp dụng ngay lập tức sẽ thấy được hiệu ứng.

Bạn cũng có thể áp dụng nhiều class cho phần tử này bằng cách viết cách nhau một dấu cách, hoặc có thể áp dụng bộ chọn tag để toàn bộ những thẻ tag được tạo css đều có tác dụng.

Dưới đây sẽ là một ví dụ về bộ trọn tag

h2 { /* h2 là bộ trọn thẻ tag, tất cả thẻ h2 đều áp dụng class này*/
    font-size: 2em; /* Kích thước chữ */
    color: transparent; /* Màu chữ trong suốt để chỉ hiển thị hiệu ứng */
    background: linear-gradient(90deg, #00ff00, #0000ff); /* Hiệu ứng gradient xanh */
    background-size: 200%; /* Kích thước nền */
    background-position: 100%; /* Vị trí nền ban đầu */
    -webkit-background-clip: text; /* Cắt nền theo chữ */
    background-clip: text; /* Cắt nền theo chữ */
    transition: background-position 0.5s ease; /* Hiệu ứng chuyển tiếp */
}
h2:hover {
  background-position: 0%; /* Di chuyển gradient khi di chuột */
}