Trong bài viết hôm nay mình sẽ giới thiệu đến bạn những cách kết hợp chữ với hình ảnh bằng CSS và Javascript nhằm năng cao trải nghiệm người dùng khi sử dụng trang web. Nào chúng ta hãy cùng nhau đi vào tìm hiểu nhé!
Các Ví Dụ Hình Ảnh Với Chữ Trong CSS
Thiết Lập Position Text Image CSS
Trong phần này mình sẽ hướng dẫn đến bạn cách chúng ta có thể xác định được cách hiển thị nội dung trong hình ảnh thông qua thuộc tính position (Thuộc tính này giúp bạn xác định ví trị của đối tượng trong trang web). Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:
See the Pen Hình Ảnh Với Nội Dung by haycuoilennao19 (@haycuoilennao19) on CodePen.
Sử Dụng Linear Gradient Background Image
Đôi khi bạn sử dụng hình ảnh với độ sáng quá cao thì sẽ làm người dùng khó thấy được nội dung trong hình ảnh. Do đó phần này chúng ta sẽ tạo một background bằng linear-gradient để tăng đố tương phản giữa hình ảnh với nội dung mà không cần phải sử dụng đến photoshop. Để hiểu rõ hơn bạn xem ví dụ sau nhé:
See the Pen Sử Dụng linear-gradient cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Lập Chữ Trên Hình Ảnh CSS
Nhiều lúc bạn không muốn thay đổi màu nền cho hình ảnh bằng linear-gradient thì chúng ta có thể thiết lập background cho nội dung mà vẫn gì màu sắc tươi sáng cho hình ảnh. Để hiểu rõ hơn bạn xem ví dụ sau nhé:
See the Pen Hiển thị nội dung với background cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Kế Blur Background Image CSS
Đây là một hiệu ứng thêm cho ví dụ trên giúp làm nổi bật nội dung trong hình ảnh của bạn. Để hiểu rõ hơn chúng ta hãy cùng nhau xem ví dụ sau đây nhé:
See the Pen Hiển thị nội dung với background được làm mờ(blur) cho hình ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Kế Transparent Background Image CSS
Chúng ta sẽ kết hợp hình ảnh và background của nội dung để tạo thành một hiệu ứng gọi là Transparent. Ở đây mình có lưu ý nhỏ là background: rgba(0, 0, 0, 0.5); , nó sẽ tạo một background màu đen và được hiển thị opacity(độ mờ) là 0.5. Bây giờ để dễ hình dung hơn chúng ta cùng nhau đi vào ví dụ nhé:
See the Pen Hiển thị nội dung dưới dạng Transparent Image by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Kế Background Image Cho Chữ Bằng Background Clip
Chúng ta sẽ kết hợp hình ảnh và background của nội dung để tạo thành một hiệu ứng gọi là Transparent. Ở đây mình có lưu ý nhỏ là background: rgba(0, 0, 0, 0.5); , nó sẽ tạo một background màu đen và được hiển thị opacity(độ mờ) là 0.5. Bây giờ để dễ hình dung hơn chúng ta cùng nhau đi vào ví dụ nhé:
See the Pen Hiển thị Background Hình Ảnh Cho Nội Dung Dưới Dạng Masking by haycuoilennao19 (@haycuoilennao19) on CodePen.
Cách Tạo Letter Trong Background Image
Trong phần này chúng ta sẽ thiết lập từng chữ sẽ hiển thị trên mỗi dòng riêng biệt nhằm mang lại cảm giác mới lạ cho người dùng. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:
See the Pen Hiển thị Nội Dung Dưới Dạng Từng Chữ Trong Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Thiết Lập Modal Cho Hình Ảnh
Thông thường khi kích thước ảnh được sử dụng trên các màn hình điện thoại sẽ hơi khó thấy do đó phần này chúng ta sẽ đi vào tìm hiểu modal cho hình ảnh để có thể mở rộng kích thước ảnh giúp nâng cao trải nghiệm người dùng cũng như tiết kiệm diện tích trên trang web. Để dễ hiểu bạn xem ví dụ sau nhé:
See the Pen Tạo Modal Cho Hình Ảnh by haycuoilennao19 (@haycuoilennao19) on CodePen.
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ hình ảnh với chữ hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!