Ánh sáng dịu bên ngoài được thêm vào một thành phần trên trang web của bạn làm cho thành phần đó 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ư ánh sáng bên ngoài được thêm vào một đối tượng trong Photoshop.
Hiệu ứng phát sáng hoạt động trên bất kỳ nền nào, nhưng chúng trông đẹp nhất trên nền tối vì khi đó ánh sáng dường như lung linh hơn. Trong ví dụ về hộp hình chữ nhật có góc bo tròn, một phần tử DIV được đặt trong một phần tử DIV khác có nền đen. DIV bên ngoài 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.
Sau khi bạn chọn thành phần mà bạn sẽ tô điểm bằng ánh sáng, hãy thêm kiểu cho thành phầ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 lam; kích thước được đặt thành 147px x 90px; và màu nền được đặt thành #1f5afe, màu xanh hoàng gia. Nó bao gồm một lề để đặt phần tử vào giữa phần tử vùng chứa màu đen.
class=”ql-cú pháp”>
Tạo một hình chữ nhật với các góc bo tròn thật dễ dàng với CSS3. Thêm thuộc tính kiểu bán kính đường viền vào lớp phát sáng của bạn. Chỉ cần nhớ sử dụng các tiền tố –webkit– và –moz– để có khả năng tương thích cao nhất.
-webkit-biên giới-bán kính: 15px;
-moz-biên giới-bán kính: 15px;
bán kính đường viền: 15px;
Bản thân ánh sáng được tạo ra với một bóng hộp. Bởi vì nó bao phủ toàn bộ phần tử mà không chiếu ánh sáng ra một bên như bóng đổ, hãy đặt độ dài chiều ngang và chiều dọc thành 0px.
Trong ví dụ này, bán kính mờ được đặt thành 15px và độ mở rộng của mờ là 5px, nhưng bạn có thể thay đổi các cài đặt đó để xác định độ rộng và độ khuếch tán mà bạn muốn ánh sáng phát ra. Màu rgb(255,255,190) là màu vàng với độ trong suốt RGBa alpha được đặt thành 75 phần trăm— rgba(255,255,190, .75) . Chọn một màu sáng phù hợp nhất cho dự án của bạn. Đối với việc làm tròn các góc, đừng quên sử dụng các tiền tố của trình duyệt ( –webkit– và –moz– ) để có khả năng tương thích tốt nhất.
-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
bóng hộp: 0px 0px 15px 5px rgba(255, 255, 190, .75);