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ụ:

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ụ:

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ụ:

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ụ:

5. Polaroid Images / Cards trong CSS

Ví dụ:

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ụ:

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:

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ụ:

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

Hình ảnh mờ đi và hộp xuất hiện

Văn bản xuất hiện từ trên xuống

10. Lật hình ảnh trong CSS

Ví dụ:

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

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ụ: