Hướng dẫn dùng shadow image trong PHP
Khi thiết kế giao diện website, bạn có thể dùng thuộc tính box-shadow cho vùng giao diện nào đó để tăng hiệu ứng nhìn trực quan và thẩm mỹ cho trang. Thuộc tính CSS này đều được hỗ trợ ở tất cả trình duyệt Web phiên bản mới nhất, vì vậy bạn cứ yên tâm sử dụng. Show Nội dung chính
Thuộc tính box-shadowThuộc tính này dùng để tạo bóng mờ cho một vùng giao diện hay phần tử HTML (thường dạng khối – block). Cú pháp:
Tạo bóng với tham số h-offset, v-offset, blur và colorỞ ví dụ này,
chúng ta sẽ tạo bóng mờ và với màu sắc của bóng cũng như vị trí xuất hiện của bóng.
Tạo bóng với tham số spreadTham số spread giúp trải rộng kích thước bóng, bạn có thể thử thông qua ví dụ sau.
Tạo nhiều bóng 1 lúcỨng với mỗi bóng bạn chỉ cần định nghĩa cách nhau dấu phẩy trong thuộc tính box-shadow. Điều này giúp bạn tạo nhiều bóng, thậm chí tạo được cả hiệu ứng cầu vồng nếu muốn.
Ví dụ này sử dụng tham số inset dùng để tạo bóng bên trong vùng giao diện thay vì bên ngoài như thông thường.
Tạo bóng cầu vồng trònTrong ví dụ này, bạn sẽ học cách tạo bóng cầu vòng với nhiều màu sắc. Ví dụ sử dụng border-radius: 50% để tạo hình tròn cho vùng giao diện.
Ngoài ra, thuộc tính box-shadow còn được áp dụng để tạo viền cho hình ảnh, album, và các đối tượng khác để làm giao diện Web trực quan. Chúc các bạn thành công nhé! |