2021-07-20, 2:47 PM
Code ID Css Tạo Hiệu Ứng Đổi Màu Image Khi Rê Chuột Cho Web
Sau một hồi tìm tòi nghiên cứu, chế đi chế lại các kiểu code nhặt nhạnh được trên mạng, thì mình đã mò ra được cách để làm thay đổi màu hình ảnh từ trắng đen ra màu và ngược lại khi rê chuột lên hình, đương nhiên không cần tới anh java cờ ríp chi mô nờ, mình đã test thử trên một số trình duyệt và vẫn okey nhé.
 
Code đổi màu hình ảnh khi rê chuột
Cấy ni hình minh họa thôi demo ở dưới tê tề © Share4s

Cách này mình chế từ cái code của w3 và một cái của web nước ngoài, (Chả nhớ?) không biết nó có đúng theo quy trình bài vở của nghê lập trình code hay không, nhưng thấy nó chạy được nên share lại cho bạn nào cần thôi, vì nó đơn giản và nhanh gọn lẹ. Anh chị nào giỏi về code thì góp ý cho mọi người cùng biết với ạ, mình thì không học lập trình nên cứ thấy nó chạy được là ô sờ kê rồi keke.

Bắt đầu nhá: Có demo trên các hình nên các bạn test thử bằng cách rê chuột lên hình nhé
Trước tiên chúng ta sẽ có một đoạn css như thế này, nói chung là mình chỉ biết gọi tên chung của bọn nóa là "xê ét ét" "cô đe" thôi chứ nguyên lý, nguyên tác và tên các kiểu thì mình không có biết chi mô nờ @@!

Em nó đây nà:
<style>
#library{-webkit-filter: grayscale(100%); Safari 6.0 - 9.0 filter: grayscale(100%);}
#library:hover{-webkit-filter: grayscale(0%); Safari 6.0 - 9.0 filter: grayscale(0%);}
</style>
 
Pineapple
Đố anh bắt được em ^^! © Share4s
Pineapple

Ngược lại thì thế này:
<style>
#libraryb{-webkit-filter: grayscale(0%); Safari 6.0 - 9.0 filter: grayscale(0%);}
#libraryb:hover{-webkit-filter: grayscale(100%); Safari 6.0 - 9.0 filter: grayscale(100%);}
</style>

+ Trong đó id="library" id="libraryb" là tên của phân tử gì gì đó nói chung là nó có trách nhiệm là lôi đầu kéo cổ nhau ra để hoạt động được khi mình rê chuột lên hình ảnh á! các bạn muốn đổi cái library thành chữ gì tùy ý các bạn cũng được (khổ không học mà lại mê lập trình nó khổ vậy đó các bạn, cái cách hướng dẫn gọi tên cũng không biết nói thế nào cho đúng, ngu thí không chứ nị)
+ Ở cái chỗ mà có chữ grayscale(100%) thì các bạn tùy chỉnh thang màu tùy theo ý bằng cách chọn từ 1% cho tới 100% nha

Tiếp theo là ta cần có một đoạn code thế này
<img id="library" src="image.png" alt="Pineapple" width="chiều rộng img" height="chiều cao img">
<img id="libraryb" src="image.png" alt="Pineapple" width="chiều rộng img" height="chiều cao img">

Các bạn thay thế các thành phần trong code theo ý của mình nha, 
  • image.png thành link hình ảnh của bạn 
  • width="chiều rộng img" ví dụ thay bằng width="100"
  • height="chiều cao img" ví dụ thay bằng height="100"
Miễn sao thay thế cho phù hợp với web của các bạn thôi, cần gì thì hỏi mình ở dưới nha, mình sẽ tung hết cho các bạn những gì mình biết.

Chúc các bạn thành công và có được các hiệu ứng đẹp cho web của mình nhé, bạn nào giỏi code nếu thấy sai sót or không đúng thì góp ý giúp mọi người nhé. Bài viết mang tính tham khảm cho bạn nào cần thôi đừng ném gạch tội tớ @@!

Từ khóa: Thẻ hover img trắng đen © Share4s, hiệu ứng hover hình ảnh, css hiệu ứng đổi màu hình ảnh, hướng dẫn tạo màu cho hình web, code chuyển đổi màu cho hình ảnh web, cách đổi màu hình ảnh thành đen trắng, code đổi màu hình ảnh khi rê chuột.
© Share4s
Avatar
Administrators

Cảnh báo:
  • Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
  • Nếu bạn copy bài của người khác hoặc từ trang khác, xin vui lòng điền tên tác giả và nguồn của nội dung bài viết nhé...!
  • Các bài viết trên VF Share chỉ mang tính chất tham khảo, bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virus. Hãy quét virus trước khi cài đặt bất cứ thứ gì.
  • Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của VF Share.
  • Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các vấn đề vi phạm.
  • VF Share luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
  • Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
  • Cảm ơn bạn đã luôn quan tâm và ủng hộ VF Share, chúc bạn một ngày làm việc hiệu quả!
Màu hình, IMG, thẻ hover, Hover, hiệu ứng, css | 221 | Css
Tổng số bình luận: 0
avatar
Mohon Aktifkan Javascript!Enable JavaScript