2016/2/17 Codes

. 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;
}

/* end. Roundedtwo */
/*. squaredone */
. squaredone {
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-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);
}
. Squaredone 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-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;
}
. Squaredone 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%);
-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);
Filter:progid:DXImageTransform.Microsoft.Alpha (opacity=0);
opacity:0;
}
. Squaredone Label:hover::after {
Filter:progid:DXImageTransform.Microsoft.Alpha (opacity=30);
opacity:0.3;
}
. Squaredone Input[type=checkbox] {
Visibility:hidden;
}
. Squaredone input[type=checkbox]:checked + label:after {
Filter:progid:DXImageTransform.Microsoft.Alpha (Enabled=false);
Opacity:1;
}

/* end. Squaredone */
/*. squaredtwo */
. squaredtwo {
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-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);
}
. Squaredtwo 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-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;
}
. squaredtwo Label:after {
Content: ";
width:9px;
height:5px;
Position:absolute;
top:4px;
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);
}
. squaredtwo Label:hover::after {
Filter:progid:DXImageTransform.Microsoft.Alpha (opacity=30);
opacity:0.3;
}
. Squaredtwo Input[type=checkbox] {
Visibility:hidden;
}
. squaredtwo input[type=checkbox]:checked + label:after {
Filter:progid:DXImageTransform.Microsoft.Alpha (Enabled=false);
Opacity:1;
}

/* end. Squaredtwo */
/*. squaredthree */
. squaredthree {
width:20px;
position:relative;
margin:20px Auto;
}
. Squaredthree Label {
width:20px;
height:20px;
Cursor:pointer;
Position:absolute;
top:0;
left:0;
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:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow:inset 0px 1px 1px rgba (0, 0, 0, 0.5), 0px 1px 0px rgba (255, 255, 255, 0.4);
-webkit-box-shadow:inset 0px 1px 1px rgba (0, 0, 0, 0.5), 0px 1px 0px rgba (255, 255, 255, 0.4);
Box-shadow:inset 0px 1px 1px rgba (0, 0, 0, 0.5), 0px 1px 0px rgba (255, 255, 255, 0.4);
}
. squaredthree Label:after {
Content: ";
width:9px;
height:5px;
Position:absolute;
top:4px;
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);
}
. squaredthree Label:hover::after {
Filter:progid:DXImageTransform.Microsoft.Alpha (opacity=30);
opacity:0.3;
}
. Squaredthree Input[type=checkbox] {
Visibility:hidden;
}
. Squaredthree input[type=checkbox]:checked + label:after {
Filter:progid:DXImageTransform.Microsoft.Alpha (Enabled=false);
Opacity:1;
}

/* end. Squaredthree */
/*. squaredfour */
. squaredfour {
width:20px;
position:relative;
margin:20px Auto;
}
. Squaredfour Label {
width:20px;
height:20px;
Cursor:pointer;
Position:absolute;
top:0;
left:0;
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:4px;
-webkit-border-radius:4px;
border-radius:4px;
-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);
}
. squaredfour Label:after {
Content: ";
width:9px;
height:5px;
Position:absolute;
top:4px;
left:4px;
BORDER:3PX solid #333;
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);
}
. squaredfour Label:hover::after {
Filter:progid:DXImageTransform.Microsoft.Alpha (OPACITY=50);
opacity:0.5;
}
. Squaredfour Input[type=checkbox] {
Visibility:hidden;
}
. Squaredfour input[type=checkbox]:checked + label:after {
Filter:progid:DXImageTransform.Microsoft.Alpha (Enabled=false);
Opacity:1;
}

/* end. Squaredfour */
* {
Box-sizing:border-box;
}

Body {
Background: #333;
font-family: ' Open Sans ', Sans-serif;
font-weight:300;
}
Body H1, body h2 {
Color: #eee;
font-size:30px;
Text-align:center;
margin:60px 0 50px 0;
-webkit-font-smoothing:antialiased;
text-shadow:0px 1px black;
}
Body. Ondisplay {
Text-align:center;
/*BORDER-BOTTOM:1PX Solid gray;*/
padding:60px 0;
}
Body. Ondisplay section {
width:100px;
height:100px;
Background: #555;
Display:inline-block;
position:relative;
Text-align:center;
margin-top:5px;
border:1px solid Gray;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;
-webkit-box-shadow:0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba (0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) inset;
}
Body. Ondisplay Section:before {
Content: ' Click it ';
Color: #bbb;
font-size:12px;
font-weight:400;
-webkit-font-smoothing:antialiased;
text-shadow:0px 1px black;
}
Body. Ondisplay Section:after {
Content:attr (title);
Position:absolute;
width:100%;
left:0;
bottom:3px;
Color: #fff;
font-size:12px;
font-weight:400;
-webkit-font-smoothing:antialiased;
text-shadow:0px 1px black;
}</style>
<script src= "Http://dreamsky.github.io/main/blog/common/jquery.min.js" ></script>
<script src= "Http://dreamsky.github.io/main/blog/common/init.js" ></script>
<script src= "Assets/prefixfree.min.js" ></script>

2016/2/17 Codes