Mục lục
1. Hiệu Ứng :focus Là Gì?
Pseudo-class :focus trong CSS giống như một nút bấm bí mật giúp bạn chỉ định kiểu cho các phần tử form khi chúng đang được người dùng chọn hoặc nhập liệu. Hãy tưởng tượng bạn đang nhập thông tin vào một ô nhập liệu – khi đó ô này sẽ “phát sáng” để bạn biết mình đang ở đúng vị trí. Hiệu ứng này không chỉ làm mọi thứ rõ ràng hơn mà còn tạo sự tương tác thú vị.
2. Bắt Đầu Với Hiệu Ứng Focus Cho Ô Input và Textarea
Giờ thì hãy tạo hiệu ứng focus cho các ô nhập liệu (input) và textarea. Đây là những phần tử thường được người dùng tương tác nhất trên form.
input:focus,
textarea:focus {
outline: none; /* Xóa bỏ viền mặc định chán ngắt của trình duyệt */
border: 2px solid #3498db; /* Đổi màu viền khi được focus */
background-color: #eaf2f8; /* Thay đổi màu nền nhẹ nhàng */
box-shadow: 0 0 5px #3498db; /* Thêm hiệu ứng đổ bóng lung linh */
}
outline: none;: Tạm biệt viền mặc định! Mình muốn tự tay thiết kế viền mà!border: 2px solid #3498db;: Khi người dùng focus vào, viền sẽ chuyển sang màu xanh dương đầy sinh động.background-color: #eaf2f8;: Màu nền cũng thay đổi, tạo cảm giác nhập liệu mượt mà hơn.box-shadow: 0 0 5px #3498db;: Hiệu ứng đổ bóng giúp ô nhập liệu “nổi bật” giữa đám đông.
3. Hiệu Ứng Focus Cho Nút Bấm (Button)
Không chỉ có ô nhập liệu, ngay cả nút bấm (button) cũng có thể có hiệu ứng focus rất đẹp! Hãy thử tạo hiệu ứng cho nút bấm nào.
button:focus {
outline: none; /* Tạm biệt viền xấu xí mặc định! */
background-color: #2ecc71; /* Chuyển sang màu xanh lá khi focus */
color: white; /* Màu chữ trắng để tương phản tốt hơn */
border: 2px solid #27ae60; /* Thay đổi viền cho thêm phần nổi bật */
box-shadow: 0 0 10px #2ecc71; /* Thêm bóng giúp nút trông ấn tượng hơn */
}
background-color: Khi focus, nút sẽ chuyển sang màu xanh lá đầy năng lượng.color: Màu chữ trắng giúp nút thêm phần “tỏa sáng”.box-shadow: Hiệu ứng bóng làm nút như “phát sáng” khi được chọn. Nhìn xịn hơn hẳn!
4. Thêm Hiệu Ứng Chuyển Động (Transition) Cho Mượt Mà
Một mẹo để làm cho hiệu ứng focus mượt mà hơn chính là thêm thuộc tính transition. Điều này giúp mọi thứ diễn ra từ từ, không bị “giật cục”.
input,
textarea,
button {
transition: all 0.3s ease-in-out; /* Chuyển động êm ái trong 0.3 giây */
}
input:focus,
textarea:focus,
button:focus {
border: 2px solid #3498db;
background-color: #eaf2f8;
box-shadow: 0 0 5px #3498db;
}
transition: all 0.3s ease-in-out;: Các hiệu ứng thay đổi sẽ diễn ra trong 0.3 giây, tạo cảm giác chuyển động mượt mà như lụa.
5. Thêm Hiệu Ứng Cho Placeholder Khi Focus
Khi focus vào ô nhập liệu, bạn cũng có thể làm cho placeholder trông “sành điệu” hơn bằng cách thay đổi màu sắc hoặc làm mờ nó đi.
input:focus::placeholder {
color: #95a5a6; /* Màu placeholder nhẹ nhàng hơn */
opacity: 0.5; /* Giảm độ rõ để không làm phiền người dùng */
}
::placeholder: Giúp bạn tùy chỉnh văn bản placeholder trong ô input.opacity: Giảm độ rõ của placeholder khi focus, làm nó mờ dần đi để người dùng chú ý hơn vào việc nhập liệu.
6. Kết Hợp Focus Và Hover
Bạn có thể làm hiệu ứng thú vị hơn bằng cách kết hợp hover và focus cho nút bấm. Điều này sẽ làm cho nút tương tác mượt mà hơn khi người dùng rê chuột và nhấn vào.
button:hover,
button:focus {
background-color: #2980b9;
color: white;
border: 2px solid #1abc9c;
box-shadow: 0 0 10px #1abc9c;
}
Kết hợp hover và focus giúp tạo ra một hiệu ứng liên tục khi người dùng tương tác với nút bấm, khiến trải nghiệm trên trang web của bạn thú vị hơn nhiều.
Việc tạo hiệu ứng focus cho các element trong form không chỉ làm cho trang web trông chuyên nghiệp hơn mà còn giúp nâng cao trải nghiệm người dùng một cách rõ rệt. Từ việc thay đổi viền, màu sắc cho đến thêm các hiệu ứng chuyển động mượt mà, tất cả đều giúp người dùng dễ dàng nhận biết và tương tác với các phần tử trong form.
Hãy thử áp dụng hiệu ứng focus này vào dự án của bạn và xem sự khác biệt ngay lập tức! Chắc chắn trang web của bạn sẽ trở nên sống động và dễ sử dụng hơn nhiều. Chúc bạn thành công và vui vẻ khi sáng tạo với CSS!