1. Làm tròn hình ảnh trong CSS
Trong CSS để tạo hình ảnh tròn ta sử dụng thuộc tính border-radius
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
2. Khung của hình ảnh trong CSS
Sử dụng thuộc tính border để tạo khung cho hình ảnh trong CSS
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
3. Hình ảnh đáp ứng trong CSS
Hình ảnh đáp ứng sẽ tự động điều chỉnh để phù hợp với kích thước của màn hình
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
4. Căn giữa văn hình ảnh trong CSS
Để căn giữa một hình ảnh, ta sử dụng các thuộc tính display: block; margin-left: auto; margin-right: auto;
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
5. Polaroid Images / Cards trong CSS
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
6. Làm mờ hình ảnh trong CSS
Thuộc tính opacity có thể có giá trị từ 0,0 – 1,0. Giá trị càng thấp thì hình ảnh càng mờ
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
7. Văn bản nằm trong hình ảnh trong CSS
Các cách xác định vị trí văn bản trong hình ảnh:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
8. Bộ lọc hình ảnh trong CSS
Thuộc tính filter trong CSS sẽ thêm các hiệu ứng hình ảnh (như mờ và bão hòa) vào một phần tử
Lưu ý: Thuộc tính filter không được hỗ trợ trong Internet Explorer hoặc Edge 12
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
9. Lớp phủ di chuột qua hình ảnh trong CSS
Tạo hiệu ứng lớp phủ khi di chuột qua hình ảnh
Ví dụ:
Hình ảnh mờ đi và văn bản xuất hiện
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
Hình ảnh mờ đi và hộp xuất hiện
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
Văn bản xuất hiện từ trên xuống
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
10. Lật hình ảnh trong CSS
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
11. Thư viện hình ảnh đáp ứng trong CSS
CSS có thể được sử dụng để tạo thư viện hình ảnh
Ví dụ này sử dụng các truy vấn phương tiện để sắp xếp lại các hình ảnh trên các kích thước màn hình khác nhau. Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
12. Phương thức hình ảnh năng cao trong CSS
Đây là một ví dụ để chứng minh CSS và JavaScript có thể hoạt động cùng nhau như thế nào.
Đầu tiên, sử dụng CSS để tạo một cửa sổ phương thức (hộp thoại) và ẩn nó theo mặc định.
Sau đó, sử dụng JavaScript để hiển thị cửa sổ phương thức và hiển thị hình ảnh bên trong phương thức, khi người dùng nhấp vào hình ảnh
Ví dụ:
See the Pen
Untitled by sonsonct (@sonsonctnp)
on CodePen.
