thiết kế web hải phòng

Hướng dẫn tạo checkbox đẹp cho web dùng CSS.



Thay đổi hình ảnh của checkbox thật đơn giản với CSS3. Nếu bạn đã quá nhàm chán với hình ảnh của Checkbox thường ngày thì tại sao bạn không thử tìm cho mình một hình ảnh khác thật bắt mắt nhỉ? Rất đơn giản thôi bạn sẽ có những đẹp mắt cho website của mình khi sử dụng CSS.

Trong mỗi website, hầu như luôn có sự xuất hiện của những checkbox. Bạn có cảm thấy chán với kiểu hiển thị mặc định của nó hay không? Sao chúng ta không cùng nhau thay đổi một chút nhỉ, nó sẽ tăng thêm vẻ đẹp cho website của bạn khá nhiều đấy.

Hướng dẫn tạo checkbox đẹp cho web dùng CSS.


Hãy đến với một nút bấm be bé xinh xinh nào.

Cơ bản sẽ vẫn là phần tử .switch. Trong phần tử này, chúng ta sẽ đặt checkbox và nhãn lên đầu của cái khác để làm chút ảo thuật ở đây. Input không có bất cứ thứ gì ngoài checkbox type (không ID, tên, không có gì khác..).

1   <div class="switch">
2    <input type="checkbox">
3      <label></label>
4       </div>

Và yếu tối cuối cùng có thể là bất kì thứ gì (anchor, div, span, label, bold tag.....). Cá nhân tôi thì chọn label vì tôi thường sử dụng chúng khi hack checbox, nó yêu cầu sử dụng label.
CSS

Đầu tiên, chúng tôi đặt kích thước cho button bằng cách thiết lập chiều rộng và chiều cao của nó. Hãy chắc chắn rằng chiều rộng bằng chiều cao, hoặc button của bạn sẽ không trở thành hình tròn. Nhớ để ẩn checkbox với mã CSS giống như đầu bài viết đã nói.

1    .switch {
2     width: 100px;
3     height: 100px;
4     position: relative;
5     }

Hướng dẫn tạo checkbox đẹp cho web dùng CSS.


Sau đó, label là nơi chúng ta sẽ xử lý tiếp theo. Trước hết, chúng ta đặt nó ở dạng khối và làm cho nó lấp đầy container. Sau đó, chúng tôi đặt nó vào một vị trí tương đối để đặt vào các yếu tố pseudo-elements sau này.

Đến lúc cho một số phong cách thực sự rồi đây: Một màu nền, một hình tròn, một chút đổ bóng để làm nó nổi lên.

1       .switch label {
2       display: block;
3       width: 100%;
4       height: 100%;
5       position: relative;
6       border-radius: 50%;
7       background: #eaeaea;
8       box-shadow:
9       0 3px 5px rgba(0,0,0,0.25),
10     inset 0 1px 0 rgba(255,255,255,0.3),
11     inset 0 -5px 5px rgba(100,100,100,0.1),
12     inset 0 5px 5px rgba(255,255,255,0.3);
13     }

Nó nhìn tương đối ổn rồi đấy, nhưng mà chúng ta vẫn nên thêm một số pseudo-elements để nó trở nên tuyệt vời hơn, phải không?

Điều đầu tiên là để cải thiện độ nổi của bút bằng cách thêm vào một lớp viền phía ngoài. Vì vậy, chúng ta cần đặt nó vào vị trí tuyệt đối, đằng sau nút và chúng ta không cần thiết lập kích thước cho nó nhưng cần đặt vào các giá trị thay thế như top/right/bottom/left.

1       .switch label:after {
2        content: "";
3        position: absolute;
4         z-index: -1;
5         top: -8%;
6        right: -8%;
7        bottom: -8%;
8        left: -8%;
9        border-radius: inherit;
10      background: #ddd; /* Fallback */
11      background: linear-gradient(#ccc, #fff);
12      box-shadow:
13      inset 0 2px 1px rgba(0,0,0,0.15),
14      0 2px 5px rgba(200,200,200,0.1);
15      }

Rồi, nút đã xong. Giờ là đến phần đèn. Về cơ bản, nó là một vòng tròn nhỏ đặt giữa nút. Đổ bóng một chút cho nó là xong.
1   .switch label:before {
2    content: "";
3    position: absolute;
4    width: 20%;
5    height: 20%;
6    left: 40%;
7    top: 40%;
8    border-radius: inherit;
9    background: #969696; /* Fallback */
10   background: radial-gradient(40% 35%, #ccc, #969696 60%);
11  box-shadow:
12   inset 0 2px 4px 1px rgba(0,0,0,0.3),
13   0 1px 0 rgba(255,255,255,1),
14   inset 0 1px 0 white;
15   }

Chúng ta đã có một nút bấm với đèn tương đối đẹp rồi đấy. Giờ là đến phần xử lý tình trạng kiểm tra. Khi bạn click vào container, bạn kích hoạt checkbox, có nghĩa là bạn đã sử dụng đến trạng thái :checked và trạng thái lựa chọn. Vì vậy, khi nút được bật, chúng ta cần thay đổi màu nền của đèn LED và tất nhiên là cả nền của button nữa. 

1      .switch input:checked ~ label { /* Button */
2      background: #e5e5e5; /* Fallback */
3      background: linear-gradient(#dedede, #fdfdfd);
4      }
5
6      .switch input:checked ~ label:before { /* LED */
7      background: #25d025; /* Fallback */
8       background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
9       box-shadow:
10     inset 0 3px 5px 1px rgba(0,0,0,0.1),
11     0 1px 0 rgba(255,255,255,0.4),
12     0 0 10px 2px rgba(0, 210, 0, 0.5);
13     }

Trên đây là toàn bộ công đoạn của việc tạo một nút bấm giả trên website. Mong rằng với bài viết này, bạn sẽ học thêm được một sô thứ trong CSS và sử dụng chúng một cách linh hoạt hơn. Chúc bạn có được thêm nhiều điều mới mẻ cho website của mình hãy ghé thăm trang web của chúng tôi thường xuyên để bạn có thể cập nhật nhiều những công nghệ mới nhất nghề thiết kế website và những phần mềm thiết kế website thông dụng mới nhất nhé!

CÔNG TY TNHH ISING
Địa chỉ : 913 Tôn Đức Thắng - Hồng Bàng - Hải Phòng
Văn phòng số 2 : 532 lô 22 Lê Hồng Phong - Hải Phòng
Mst: 0201645135 ĐT: 0974080227

thiết kế web chuyên nghiệp hải phòng, thiết kế web giá rẻ hải phòng, công ty thiết kế web hải phòng, dịch vụ thiết kế web tại hải phòng, huong dan seo website, cap quang fpt hcm , lap mang fpt, Thiết kế web, Phòng thu âm hải phòng,