Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Thay đổi màu sắc sản phẩm bằng CSS
Thay đổi màu sắc sản phẩm bằng CSS
Nguyễn Trung Hiếu
Share Code Web Company 2012

Thay đổi màu sắc sản phẩm bằng CSS

Thông thường khi làm các trang thương mại điện tử, để thay đổi màu sắc cho sản phẩm của mình, thì nhiều người thường sử dụng nhiều ảnh cho nhiều màu khác nhau. Nhưng ở bài viết này, tôi sẽ hướng dẫn bạn cách làm thay đổi màu sắc sản phẩm chỉ với css.

Để bạn dễ hình dung thì nhìn demo nhé. Khi bạn click vào mấy nút tương ứng với loại màu ở trên, thì màu sắc của chiếc áo sẽ thay đổi theo. Việc chỉ sử dụng css sẽ làm giảm tối thiểu việc load trang cho các trang thương mại điện tử.
product color with css
I. HTML

II. CSS

Trước tiên là css cho phần body, viền sản phẩm và các nút check của chúng ta

Đối với các class làm nút check. Ta sử dụng thêm kỹ thuật của CSS3 để thực hiện đổi màu cho nó khi nó được check

Và cuối cùng là việc đổi mầu của sản phẩm khi các nút trên được check

Vậy là xong, tận hưởng thành quả đi nhé.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.702 hits
%d bloggers like this: