Thứ Sáu, ngày 18 tháng 11 năm 2016

Share CODE Thay Đổi Màu Sắc Sản Phẩm bằng CSS + HTML

Thay đổi Màu Sắc Sản Phẩm là một dạng rất quen thuộc ở các trang mua bán mà các bạn rất dễ bắt gặp. Hiện nay có rất nhiều kiểu thay đổi màu sắc cho các bạn lựa chọn nhưng trong bài viết này sẽ hướng dẫn các bạn dạng cơ bản nhất chỉ với HTML và CSS. Điều này cũng có nghĩa tốc độ tải trang web sẽ nhanh hơn đáng kể so với các cách khác
Để 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
1
2
3
4
5
6
7
<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' /> 
</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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.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é. Chúc các bạn thành công !