Thiết kế hiệu ứng đẹp cho checkbox bằng CSS3 và iconfonts

Việc thiết kế web chẳng hề đơn giản chút nào, nhất là với khi chúng ta đã thiết kế rất nhiều kiểu khác nhau, và dần dần, chúng càng trở nên đơn điệu và không có gì là mới mẻ.Nếu các bạn đã cảm thấy nhàm chán với những hình vuông đơn giản mặc đinh và không có gì đẹp mắt của các ô checkbox. Thì qua bài viết ,mà mình giới thiệu cho các bạn hôm nay, sẽ giúp các bạn có thêm lựa chọn cũng như tạo ra các mẫu form đẹp cho chính trang web hay blog của mình.

Xem Demo | Download

Bước 1 : HTML
Đầu tiên, chúng ta cần danh sách các checkbok cần thiết kế như sau :

 
<ul>
	<li><input id="one" type="checkbox" name="one" />
 <label for="one">Create checkbox</label></li>
	<li><input id="two" type="checkbox" name="two" />
 <label for="two">Assign label</label></li>
	<li><input id="three" type="checkbox" name="three" />
 <label for="three">Import iconfont</label></li>
	<li><input id="four" type="checkbox" name="four" />
 <label for="four">Iconify label pseudo elements</label></li>
	<li><input id="five" type="checkbox" name="five" />
 <label for="five">Animate icon awidths</label></li>
	<li><input id="six" type="checkbox" name="six" />
 <label for="six">Color the icons</label></li>
</ul>

Bước 2: Định dạng CSS
Việc đầu tiên là chèn khai báo font ngay đầu văn bản.

/*Importing custom fonts*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

Kế tiếp là sắp xếp các check box lại cho ngay ngắn.

ul {
	awidth: 290px;
	margin: 0 auto;
}
ul li {
	list-style-type: none;
	padding: 10px;
}

Tiếp theo , chèn icon cho từng checkbok.

/*Adding custom checkbox icons*/
label {
	position: relative;
	padding-left: 30px;
	font-size: 14px;
	cursor: pointer;
}
label:before, label:after {
	font-family: FontAwesome;
	font-size: 21px;
	/*absolutely positioned*/
	position: absolute; top: 0; left: 0;
}
label:before {
	content: 'f096'; /*unchecked*/
}
label:after {
	content: 'f046'; /*checked*/
	/*checked icon will be hidden by default by using 0 max-awidth and overflow hidden*/
	max-awidth: 0;
	overflow: hidden;
	opacity: 0.5;
	/*CSS3 transitions for animated effect*/
	transition: all 0.35s;
}

/*hiding the original checkboxes*/
input[type="checkbox"] {
	display: none;
}
/*when the user checks the checkbox the checked icon will animate in*/
input[type="checkbox"]:checked + label:after {
	max-awidth: 25px; /*an arbitratry number more than the icon's awidth*/
	opacity: 1; /*for fade in effect*/
}

Cuối cùng là thêm màu từng ô checkbox cho đẹp mắt

/*adding some colors for fun*/
#one+label:before, #one+label:after {color: hsl(0, 45%, 40%);}
#two+label:before, #two+label:after {color: hsl(60, 45%, 40%);}
#three+label:before, #three+label:after {color: hsl(120, 45%, 40%);}
#four+label:before, #four+label:after {color: hsl(180, 45%, 40%);}
#five+label:before, #five+label:after {color: hsl(240, 45%, 40%);}
#six+label:before, #six+label:after {color: hsl(300, 45%, 40%);}

Mình hy vọng là qua bài viết này, sẽ giúp cho các bạn có thêm kinh nghiệm trong việc sử dụng CSS3 và có thêm nhiều sáng tạo hơn cho những mẫu thiết kế của mình.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster