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

Xem: 2051    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Nghệ thuật - Nhiếp ảnh

18 điểm   ( 6 đánh giá ) File đã được kiểm thử


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ử.

I. HTML
<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="http://iweb.uz/azik/wp-content/uploads/2012/10/tshirta.png"/>
</div>
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
body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}
 
input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}
 
input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}
Đố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
.red{
  background: red;
}
 
.red:checked{
  background: linear-gradient(brown, red)
}
 
.green{
  background: green;
}
 
.green:checked{
  background: linear-gradient(green, lime);
}
 
.yellow{
  background: yellow;
}
 
.yellow:checked{
  background: linear-gradient(orange, yellow);
}
 
.purple{
  background: purple;
}
 
.purple:checked{
  background: linear-gradient(purple, violet);
}

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

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}
 
.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}
 
.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
 
.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}
 
img{
  width: 394px;
  height: 375px;
  position: relative;
}
Vậy là xong, tận hưởng thành quả đi nhé.

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 Đăng ngày 21-09-2014  ài viết sau sẽ hướng dẫn các bạn vẽ lại bức họa Mona Lisa nổi tiếng của Leonardo da Vinci chỉ bằng CSS thôi. Bạn sẽ thấy ngỡ ngàng về CSS cho mà xem. 3/10 2051

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn