Have you ever seen it? 9 superb check box Effects

Check boxes have different effects in different browsers. Therefore, many Web developers re-design a set of Checkbox functions with better interfaces and user experience. Next we will share with you the nine superb check box effects, pure CSS3 implementation, without any images.

Tip:

 

In order to achieve the three-dimensional effect of rounded corners and check boxes, we useCSS3Border-radius, box-shadow, linear-gradient, and CSS3 animation technology. The following is an example of CSS code for result 1:

.slideOne {  width: 50px;  height: 10px;  background: #333;  margin: 20px auto;  position: relative;  -moz-border-radius: 50px;  -webkit-border-radius: 50px;  border-radius: 50px;  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);}.slideOne label {  display: block;  width: 16px;  height: 16px;  position: absolute;  top: -3px;  left: -3px;  cursor: pointer;  background: #fcfff4;  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);  -moz-border-radius: 50px;  -webkit-border-radius: 50px;  border-radius: 50px;  -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);  -moz-transition: all 0.4s ease;  -o-transition: all 0.4s ease;  -webkit-transition: all 0.4s ease;  transition: all 0.4s ease;}.slideOne input[type=checkbox] {  visibility: hidden;}.slideOne input[type=checkbox]:checked + label {  left: 37px;}

The interaction between the next six effects is common.CSS3The default check box effects of browsers are beautified and consistent in each browser. The HTML code is similar. Here is an example of effect 5:

<section title=".roundedTwo">    <!-- .roundedTwo -->    <div class="roundedTwo">      <input type="checkbox" value="None" id="roundedTwo" name="check" checked />      <label for="roundedTwo"></label>    </div>    <!-- end .roundedTwo --></section>

The CSS code is as follows:

.roundedTwo label {  width: 20px;  height: 20px;  position: absolute;  top: 4px;  left: 4px;  cursor: pointer;  background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);  background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);  background: linear-gradient(to bottom, #222222 0%, #45484d 100%);  -moz-border-radius: 50px;  -webkit-border-radius: 50px;  border-radius: 50px;  -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;}.roundedTwo label:after {  content: '';  width: 9px;  height: 5px;  position: absolute;  top: 5px;  left: 4px;  border: 3px solid #fcfff4;  border-top: none;  border-right: none;  background: transparent;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  opacity: 0;  -moz-transform: rotate(-45deg);  -ms-transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);}.roundedTwo label:hover::after {  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);  opacity: 0.3;}.roundedTwo input[type=checkbox] {  visibility: hidden;}.roundedTwo input[type=checkbox]:checked + label:after {  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);  opacity: 1;}

　　

 

Articles you may be interested in

• The long-awaited release of the best jQuery plug-in 2013
• Like! The most comprehensive CSS & JS Hack manual in history
• 10 popular topic Bootstrap in Metro UI Style
• 35 exquisite CSS3 and HTML5 webpage templates are recommended
• Select 12 excellent jQuery Ajax paging plug-ins and tutorials

 

Link to this article: Have you ever seen it? 9 superb check box Effects

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]