2016/02/16 Codes

<! DOCTYPE html>
<meta charset= "UTF-8" >
&LT;TITLE&GT;2016/02/16 codes</title>
<link rel= "stylesheet" href= "Assets/reset.css" >
<style>
. 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;
}

. slidetwo{
width:80px;
height:30px;
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);
}
. slidetwo:after{
Content: ";
Position:absolute;
top:14px;
left:14px;
height:2px;
width:52px;
Background: #111111;
-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);
}
. Slidetwo label{
Display:block;
width:22px;
height:22px;
Position:absolute;
Cursor:pointer;
top:4px;
Z-index:1;
left:4px;
Background: #fcfff4;
-moz-border-radius:50px;
-o-border-radius:50px;
border-radius:50px;
-moz-transition:all 0.4s Ease;
-webkit-transition:all 0.4s Ease;
-o-transition:all 0.4s Ease;
Transition:all 0.4s Ease;
-moz-box-shadow:0px 2px 5px 0px rgba (0, 0, 0, 0.3);
-webkit-shadow:0px 2px 5px 0px rgba (0, 0, 0, 0.3);
box-shadow:0px 2px 5px 0px rgba (0, 0, 0, 0.3);
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%);
}
. Slidetwo label:after{
Content: ";
width:10px;
height:10px;
Position:absolute;
top:6px;
left:6px;
Background: #333;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-box-shadow:inset 0px 1px 1px black,0px 1px 0px Rgba (255,255,255,0.9);
-webkit-box-shadow:inset 0px 1px 1px black,0px 1px 0px Rgba (255,255,255,0.9);
Box-shadow:inset 0px 1px 1px black,0px 1px 0px Rgba (255,255,255,0.9);
}
. slidetwo Input[type = checkbox]{
Visibility:hidden;
}
. slidetwo Input[type = checkbox]:checked + label{
left:54px;
}
. slidetwo Input[type = checkbox]:checked + label:after{
Background: #00bf00;
}

. slidethree{
width:80px;
height:26px;
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);
-o-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);
}
. slidethree:after{
Content: ' OFF ';
Color: #000;
Position:absolute;
right:10px;
z-index:0;
FONT:12PX/26PX Arial,sans-serif;
Font-weight:bold;
text-shadow:1px 1px 0px Rgba (255, 255, 255, 0.15);

}
. slidethree:before{
Content: ' On ';
Color: #00bf00;
Position:absolute;
left:10px;
z-index:0;
Font:12px/26px Arial, Sans-serif;
Font-weight:bold;
}
. Slidethree label{
Display:block;
width:34px;
height:20px;
Cursor:pointer;
Position:absolute;
top:3px;
left:3px;
Z-index:1;
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-transition:all 0.4s Ease;
-o-transition:all 0.4s Ease;
-webkit-transition:all 0.4s Ease;
Transition:all 0.4s Ease;
-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);

}
. slidethree Input[type = checkbox]{
Visibility:hidden;
}
. slidethree Input[type = checkbox]:checked + label{
left:43px;
}

. roundedone{
width:28px;
height:28px;
position:relative;
margin:20px Auto;
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:inset 0px 1px 0px white,0px 1px 3px rgba (0,0,0,0.5);
-webkit-box-shadow:inset 0px 1px 0px white,0px 1px 3px rgba (0,0,0,0.5);
Box-shadow:inset 0px 1px 0px white,0px 1px 3px rgba (0,0,0,0.5);
}
. Roundedone label{
width:20px;
height:20px;
Cursor:pointer;
Position:absolute;
left:4px;
top:4px;
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;
}
. Roundedone label:after{
Content: ";
width:16px;
height:16px;
Position:absolute;
top:2px;
left:2px;
Background: #00bf00;
Background:-moz-linear-gradient (top, #00bf00 0, #009400 100%);
Background:-webkit-linear-gradient (top, #00bf00 0, #009400 100%);
Background:linear-gradient (to bottom, #00bf00 0, #009400 100%);
opacity:0;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-box-shadow:inset 0px 1px 1px white, 0px 1px 3px rgba (0, 0, 0, 0.5);
-webkit-box-shadow:inset 0px 1px 1px white, 0px 1px 3px rgba (0, 0, 0, 0.5);
Box-shadow:inset 0px 1px 1px white, 0px 1px 3px rgba (0, 0, 0, 0.5);
}
. Roundedone label:hover::after{
Filter:progid:DXImageTransForm.Microsoft.Alpha (opacity = 30);
opacity:0.3;
}
. roundedone Input[type = checkbox]{
Visibility:hidden;
}
. roundedone Input[type = checkbox]:checked + label:after{
Filter:progid:DXImageTransForm.Microsoft.Alpha (enabled = False);
Opacity:1;
}

. roundedtwo{
width:28px;
height:28px;
position:relative;
margin:20px Auto;
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:inset 0px 1px 1px white, 0px 1px 3px rgba (0, 0, 0, 0.5);
-webkit-box-shadow:inset 0px 1px 1px white, 0px 1px 3px rgba (0, 0, 0, 0.5);
Box-shadow:inset 0px 1px 1px white, 0px 1px 3px rgba (0, 0, 0, 0.5);
}
. 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;
}
</style>
<body>
<div class= "Ondisplay" >
<section title= ". Slideone" >
<div class= "Slideone" >
<input type= "checkbox" value= "None" id = "Slideone" name= "Check" checked>
<label for = "Slideone" ></label>
</div>
</section>
<section title= ". Slidetwo" >
<div class= "Slidetwo" >
<input type= "checkbox" value= "None" id = "Slidetwo" name= "Check" checked>
<label for = "Slidetwo" ></label>
</div>
</section>
<section title= ". Slidethree" >
<div class= "Slidethree" >
<input type= "checkbox" value= "None" id = "Slidethree" name= "Check" checked>
<label class= "Slidethree" ></label>
</div>
</section>
<section title= ". Roundedone" >
<div class = "Roundedone" >
<input type= "checkbox" value= "None" id = "Roundedone" name = "Check" checked>
<label for = "Roundedone" ></label>
</div>
</section>
<section title= ". Roundedtwo" >
<div class= "Roundedtwo" >
<input type= "checkbox" value= "None" id = "Roundedtwo" name = "Check" checked>
<label for = "Roundedtwo" ></label>
</div>
</section>
<section title= ". Squaredone" >
<div class= "Squaredone" >
<input type= "checkbox" value= "Node" id = "Squaredone" name= "Check" checked>
<label for = "Squaredone" ></label>
</div>
</section>
<section title= ". Squaredtwo" >
<input type= "checkbox" value= "None" id = "Squaredtwo" name= "Check" checked>
<label for = "Squaredtwo" ></label>
</section>
<section title= ". Squaredthree" >
<input type= "checkbox" value= "Node" id = "Squaredthree" name= "Check" checked>
<label for= "Squaredthree" ></label>
</section>
<section title= ". Squaredfour" >
<input type= "checkbox" value= "Node" id = "Squaredfour" name = "Check" checked>
<label for = "Squaredfour" ></label>
</section>
</div>
<div class= "Footer-banner" style= "margin:30px auto;width:728px" ></div>
</body>

2016/02/16 Codes