Tìm hiểu cách thêm hiệu ứng ánh sáng nhanh chóng và dễ dàng với CSS3

Thêm Glow vào một phần tử trang web để nhấn mạnh

Ánh sáng bên ngoài mềm mại được thêm vào một phần tử trên trang web của bạn làm cho yếu tố nổi bật với người xem. Sử dụng CSS3 và HTML để áp dụng ánh sáng xung quanh các cạnh bên ngoài của một đối tượng quan trọng. Hiệu ứng này tương tự như một ánh sáng bên ngoài được thêm vào một đối tượng trong Photoshop.

Đầu tiên Tạo phần tử để phát sáng

Hiệu ứng ánh sáng có thể được thực hiện trên bất kỳ nền màu nào, nhưng chúng trông đẹp nhất trên nền tối vì sau đó ánh sáng có vẻ lung linh hơn. Trong ví dụ hộp hình chữ nhật góc tròn này, phần tử DIV được đặt trong phần tử DIV khác có nền đen. DIV bên ngoài là không cần thiết cho ánh sáng, nhưng thật khó để nhìn thấy ánh sáng trên nền trắng.

Cung cấp cho DIV một lớp ánh sáng:


Đặt kích thước và màu của phần tử

Sau khi bạn chọn phần tử bạn sẽ tô điểm với ánh sáng, hãy tiếp tục và thêm bất kỳ kiểu nào bạn muốn, chẳng hạn như màu nền, kích thước và phông chữ. Ví dụ này là một hình chữ nhật màu xanh; kích thước được đặt thành 147px x 90px; và màu nền được đặt thành # 1f5afe, màu xanh dương. Nó bao gồm một lề để đặt phần tử ở giữa phần tử thùng chứa màu đen.