CSS Star Rating Effect

gitesh
365 days ago

Effects

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     html {
font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
background: #f5f5f5;
}

span {
text-shadow: -0.06em 0 red, 0.06em 0 cyan; /* This creates the 3D effect, pretty easy, eh? */
letter-spacing: 0.08em; /* make sure the letters don't overlap */
}

p {
    margin: 0;
}

/* ---------------- Stars ---------------- */

#stars span {
display: inline-block;
-webkit-transform: scale(1);
-webkit-transition: -webkit-transform 2s cubic-bezier(0, 1, 0, 1);
}
#stars span:hover {
cursor: crosshair;
-webkit-transform: scale(1.3); /* This adds a hover effect */
-webkit-transition: -webkit-transform .2s cubic-bezier(0, 0.75, 0, 1);
}
#stars span:active {
text-shadow: none; /* Click to disable the 3D effect */
}

/* Below the stars animation */
#stars span:nth-child(1), #stars span:nth-child(5) { font-size: 0.3em; -webkit-animation-delay: 0.2s; }
#stars span:nth-child(2), #stars span:nth-child(4) { font-size: 0.5em; -webkit-animation-delay: 0.1s; }
#stars span:nth-child(3) { font-size: 0.8em; -webkit-animation-delay: 0s; }

#stars span { -webkit-animation: stars-animation 3s 50 ease-in-out; }
@-webkit-keyframes stars-animation {
0% { -webkit-transform: scale(1); }
90% { -webkit-transform: scale(1); }
95% { -webkit-transform: scale(1.3); }
100% { -webkit-transform: scale(1); }
}
#stars:hover span {
-webkit-animation: none; /* Disables the animation on hover */
}


/* ---------------- Title ---------------- */

#title {
font-family: Helvetica, Geneva, sans-serif; /* Any font would work, but SansSerif looks better */
}
#title:focus {
outline: none;
}
#title span {
vertical-align: middle;
line-height: 1.5em;
-webkit-transition: font-size 2s cubic-bezier(0, 1, 0, 1);
}
#title span:hover {
font-size: 1.5em; /* This adds a hover effect */
line-height: 1em;
-webkit-transition: font-size .2s cubic-bezier(0, 0.75, 0, 1);
}
#title span:active {
font-size: 1em;
text-shadow: none; /* Click to disable the 3D effect */
}
#title span::selection {
background-color: red; /* This hides the selection */
}  
    </style>
    </head>
    <body>
     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>

<body><p id="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></p>
<p id="title" contenteditable="true"><span>CSS</span><span>Do</span><span>.<span>it</span></p>
</div>
</body>
</html>
    </body>
    </html>
    
    
    
    

Pure 3D CSS Text with multiple text-shadow layers

3DCSS
367 days ago

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     body {
  background-color: #346721;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d86b3), to(#41a9e2));
  background-image: -moz-linear-gradient(#4d86b3, #41a9e2);
  background-repeat: no-repeat;
  padding: 100px;
  text-rendering: optimizeLegibility;
  font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  -webkit-transiton: .2s all linear;
}
a:hover {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
h1, h2, p {
  color: #fff;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
h1 {
  margin: 0;
  font: bold 100px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: .2s all linear;
}
h1:hover {
  cursor: text;
}
h1:focus {
  outline: none;
}
p {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
h2 {
  margin: 30px 0 15px;
  font-size: 20px;
  font-weight: 200;
  line-height: 25px;
}
pre {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
  width: 500px;
  margin: 30px auto;
  padding: 15px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(255, 255, 255, 0.3);
}
.influads_block {
  margin: 0 auto 20px;
  width: 180px;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
}
.influads_img {
  height: 90px;
  margin-bottom: 11px;
  margin-left: auto;
  margin-right: auto;
}
.influads_text {
  margin-bottom: 5px;
}
.influads_text_a, .influads_powered_link {
  font-weight: normal;
}  
    </style>
    </head>
    <body>
     <h1 contenteditable="true">3D CSS Text</h1>
    <h2>With multiple text-shadows you can create 3D text on any HTML element.<br /> No extra HTML needed.</h2>
    <p>Supports Safari, Chrome, Firefox, and Opera.</p>
    </body>
    </html>
    
    
    
    

3D CSS Card Slide Flip

3DCSS
374 days ago

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     section, footer, nav {
  display: block;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: none;
  color: #333;
}

a {
  color: blue;
  color: hsl( 220, 90%, 40% );
  text-decoration: none;
}

a:hover {
  background-color: blue;
  background-color: hsl( 220, 90%, 50% );
  color: white;
}

#options {
  position: relative;
  z-index: 100;
  margin-bottom: 40px;
}

button {
  font-size: 16px;
  -webkit-appearance: push-button;
}

footer {
  border-top: 1px solid #CCC;
  font-size: 0.8em;
  position: relative;
  z-index: 100;
}

#disclaimer {
  color: red;
  font-weight: bold;
  display: none;
}
.no-csstransforms3d #disclaimer { display: block; }

hr {
  border: none;
  border-top: 1px solid #CCC;
}

figure {
  margin: 0;
}

code {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.95em;
}

/* index navigation */

.index nav ul {
  list-style: none;
  margin: 0 0 3.0em 0;
  padding: 0;
}

.index nav ul a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  border: 1px solid #CCC;
  border-bottom: none;
}

.index nav ul li:first-child a {
  border-radius: 10px 10px 0 0;
}

.index nav ul li:last-child a {
  border-radius: 0 0 10px 10px;
  border-bottom: 1px solid #CCC;
}

/**** Docs ****/

body.doc {
  max-width: 640px;
}

.doc #content {
  font-size: 14px;  
  line-height: 1.5em;
}

.doc #content blockquote {
  margin-left: 0;
  padding: 0.8em;
  background: #EEE;
  background: hsla( 0, 0%, 0%, 0.04 );
}

.doc #content img {
  border: 1px solid #CCC;
  display: inline-block;
}

.doc #content pre {
  font-size: 12px;
  line-height: 1.5em;
}

.doc nav h1 {
  font-size: 20px;
}

.doc nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc nav li a {
  display: block;
  padding: 0.3em 0;
}

.doc nav li.current a {
  font-weight: bold;
  color: #333;
}
.doc nav li.current a:hover { color: white; }

@media screen and (min-width: 768px) {

  body.doc {
    margin-left: 220px;
  }
  
  .doc nav {
    width: 200px;
    position: fixed;
    left: 10px;
    font-size: 14px;
  }

  .doc nav h1 {
    margin-top: 0;
  }

}

/* proxy range */

.proxy-range {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 200px;
  border: 1px solid hsla( 0, 0%, 0%, 0.15 );
  background-color: hsla( 0, 0%, 0%, 0.02 );
  border-radius: 15px;
  -webkit-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
     -moz-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
       -o-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
          box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );

}

.proxy-range.highlighted {
  background-color: hsla( 220, 90%, 50%, 0.15 );
}

.proxy-range .handle {
  width: 38px;
  height: 38px;
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
          border-radius: 20px;
  border: 1px solid hsla(0, 0%, 0%, 0.3);
  position: absolute;
  top: -5px;
  left: -20px;
  background-color: hsla( 220, 70%, 60%, 1.0 );
  background-image: -webkit-gradient(radial, center 15%, 0, center 30%, 30, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  background-image: -moz-radial-gradient(center 30%, cover,
    hsla( 0, 0%, 100%, 0.5 ),  
    hsla( 0, 0%, 100%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.5 )
  );
  -webkit-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 1.0 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -moz-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -webkit-transition-property: width, height, top, left, -webkit-border-radius;
     -moz-transition-property: width, height, top, left, -moz-border-radius;
  -webkit-transition-duration: 0.1s;
     -moz-transition-duration: 0.1s;
}

.proxy-range.highlighted .handle {
  height: 98px;
  top: -35px;
  width: 4px;
  left: -3px;
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  border-radius: 3px;
}




/******* Pygments *******/



pre {
  background: #111;
  color: white;
  padding: 0.8em;
  white-space: pre-wrap;
}


code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp { color: #5298D4; } /* doctype */
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */

.container {
      width: 200px;
      height: 260px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 800px;
         -moz-perspective: 800px;
          -ms-perspective: 800px;
           -o-perspective: 800px;
              perspective: 800px;
    }
    
    #card {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition: -ms-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: right center;
         -moz-transform-origin: right center;
          -ms-transform-origin: right center;
           -o-transform-origin: right center;
              transform-origin: right center;
    }
    
    #card.flipped {
      -webkit-transform: translateX( -100% ) rotateY( -180deg );
         -moz-transform: translateX( -100% ) rotateY( -180deg );
          -ms-transform: translateX( -100% ) rotateY( -180deg );
           -o-transform: translateX( -100% ) rotateY( -180deg );
              transform: translateX( -100% ) rotateY( -180deg );
    }
    
    #card figure {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 80px;
      position: absolute;
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
    
    #card .front {
      background: red;
    }
    
    #card .back {
      background: blue;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
          -ms-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }  
    </style>
    </head>
    <body>
     <section class="container">
    <div id="card">
      <figure class="front">CSS</figure>
      <figure class="back">DO</figure>
    </div>
  </section>
  
  <section id="options">
    <p><button id="flip">Flip Card</button></p>
  </section>
  
  <script src="http://desandro.github.com/3dtransforms/js/utils.js"></script>
  <script src="http://desandro.github.com/3dtransforms/js/flip-card.js"></script>    </body>
    </html>
    
    
    
    

3D CSS Cube Animation

3DCSS
374 days ago

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     section, footer, nav {
  display: block;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: none;
  color: #333;
}

a {
  color: blue;
  color: hsl( 220, 90%, 40% );
  text-decoration: none;
}

a:hover {
  background-color: blue;
  background-color: hsl( 220, 90%, 50% );
  color: white;
}

#options {
  position: relative;
  z-index: 100;
  margin-bottom: 40px;
}

button {
  font-size: 16px;
  -webkit-appearance: push-button;
}

footer {
  border-top: 1px solid #CCC;
  font-size: 0.8em;
  position: relative;
  z-index: 100;
}

#disclaimer {
  color: red;
  font-weight: bold;
  display: none;
}
.no-csstransforms3d #disclaimer { display: block; }

hr {
  border: none;
  border-top: 1px solid #CCC;
}

figure {
  margin: 0;
}

code {
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.95em;
}

/* index navigation */

.index nav ul {
  list-style: none;
  margin: 0 0 3.0em 0;
  padding: 0;
}

.index nav ul a {
  display: block;
  font-size: 18px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  border: 1px solid #CCC;
  border-bottom: none;
}

.index nav ul li:first-child a {
  border-radius: 10px 10px 0 0;
}

.index nav ul li:last-child a {
  border-radius: 0 0 10px 10px;
  border-bottom: 1px solid #CCC;
}

/**** Docs ****/

body.doc {
  max-width: 640px;
}

.doc #content {
  font-size: 14px;  
  line-height: 1.5em;
}

.doc #content blockquote {
  margin-left: 0;
  padding: 0.8em;
  background: #EEE;
  background: hsla( 0, 0%, 0%, 0.04 );
}

.doc #content img {
  border: 1px solid #CCC;
  display: inline-block;
}

.doc #content pre {
  font-size: 12px;
  line-height: 1.5em;
}

.doc nav h1 {
  font-size: 20px;
}

.doc nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc nav li a {
  display: block;
  padding: 0.3em 0;
}

.doc nav li.current a {
  font-weight: bold;
  color: #333;
}
.doc nav li.current a:hover { color: white; }

@media screen and (min-width: 768px) {

  body.doc {
    margin-left: 220px;
  }
  
  .doc nav {
    width: 200px;
    position: fixed;
    left: 10px;
    font-size: 14px;
  }

  .doc nav h1 {
    margin-top: 0;
  }

}

/* proxy range */

.proxy-range {
  display: inline-block;
  position: relative;
  height: 30px;
  width: 200px;
  border: 1px solid hsla( 0, 0%, 0%, 0.15 );
  background-color: hsla( 0, 0%, 0%, 0.02 );
  border-radius: 15px;
  -webkit-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
     -moz-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
       -o-box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );
          box-shadow: inset 0 1px 7px hsla( 0, 0%, 0%, 0.3 );

}

.proxy-range.highlighted {
  background-color: hsla( 220, 90%, 50%, 0.15 );
}

.proxy-range .handle {
  width: 38px;
  height: 38px;
  -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
          border-radius: 20px;
  border: 1px solid hsla(0, 0%, 0%, 0.3);
  position: absolute;
  top: -5px;
  left: -20px;
  background-color: hsla( 220, 70%, 60%, 1.0 );
  background-image: -webkit-gradient(radial, center 15%, 0, center 30%, 30, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  background-image: -moz-radial-gradient(center 30%, cover,
    hsla( 0, 0%, 100%, 0.5 ),  
    hsla( 0, 0%, 100%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.0 ) 50%,
    hsla( 0, 0%,   0%, 0.5 )
  );
  -webkit-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 1.0 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -moz-box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  box-shadow: 
    0  2px 0px -1px hsla( 0, 0%, 100%, 0.7 ) inset, 
    0 -4px 2px -1px hsla( 0, 0%,   0%, 0.1 ) inset, 
    0  1px 2px  0px hsla( 0, 0%,   0%, 0.3 )
  ;
  -webkit-transition-property: width, height, top, left, -webkit-border-radius;
     -moz-transition-property: width, height, top, left, -moz-border-radius;
  -webkit-transition-duration: 0.1s;
     -moz-transition-duration: 0.1s;
}

.proxy-range.highlighted .handle {
  height: 98px;
  top: -35px;
  width: 4px;
  left: -3px;
  background-image: -webkit-gradient(linear, 0 top, 0 bottom, 
    from(            hsla( 0, 0%, 100%, 0.6 ) ),  
    color-stop( 50%, hsla( 0, 0%, 100%, 0.0 ) ),
    color-stop( 50%, hsla( 0, 0%,   0%, 0.0 ) ),
    to(              hsla( 0, 0%,   0%, 0.5 ) )
  );
  border-radius: 3px;
}




/******* Pygments *******/



pre {
  background: #111;
  color: white;
  padding: 0.8em;
  white-space: pre-wrap;
}


code .s1,
code .s { color: #78BD55; } /* string */
code .mi, /* integer */
code .cp { color: #5298D4; } /* doctype */
code .k { color: #E39B79; } /* keyword */
code .kd, /* storage */
code .na { color: #A9D866; } /* markup attribute */
code .p  { color: #EDB; } /* punctuation */
code .o  { color: #F63; }   /* operator */
code .nb { color: #AA97AC;} /* support */

/* comment */
code .c,
code .c1 { color: #666; font-style: italic; }

code .nt { color: #A0C8FC; } /* Markup open tag */

code .nf { color: #9EA8B8; } /* css id */
code .nc { color: #A78352; }  /* CSS class */
code .m  { color: #DE8E50; } /* CSS value */
code .nd { color: #9FAD7E; } /* CSS pseudo selector */

.container {
      width: 200px;
      height: 200px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 1000px;
         -moz-perspective: 1000px;
          -ms-perspective: 1000px;
           -o-perspective: 1000px;
              perspective: 1000px;
    }
    
    #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
          -ms-transition: -ms-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }
    
    #cube figure {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
    }
    
    #cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
          -ms-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }
    
    #cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
    #cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
    #cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
    #cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
    #cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
    #cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

    #cube .front  {
      -webkit-transform: translateZ( 100px );
         -moz-transform: translateZ( 100px );
          -ms-transform: translateZ( 100px );
           -o-transform: translateZ( 100px );
              transform: translateZ( 100px );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
         -moz-transform: rotateX( -180deg ) translateZ( 100px );
          -ms-transform: rotateX( -180deg ) translateZ( 100px );
           -o-transform: rotateX( -180deg ) translateZ( 100px );
              transform: rotateX( -180deg ) translateZ( 100px );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
         -moz-transform: rotateY(   90deg ) translateZ( 100px );
          -ms-transform: rotateY(   90deg ) translateZ( 100px );
           -o-transform: rotateY(   90deg ) translateZ( 100px );
              transform: rotateY(   90deg ) translateZ( 100px );
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
         -moz-transform: rotateY(  -90deg ) translateZ( 100px );
          -ms-transform: rotateY(  -90deg ) translateZ( 100px );
           -o-transform: rotateY(  -90deg ) translateZ( 100px );
              transform: rotateY(  -90deg ) translateZ( 100px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
         -moz-transform: rotateX(   90deg ) translateZ( 100px );
          -ms-transform: rotateX(   90deg ) translateZ( 100px );
           -o-transform: rotateX(   90deg ) translateZ( 100px );
              transform: rotateX(   90deg ) translateZ( 100px );
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
         -moz-transform: rotateX(  -90deg ) translateZ( 100px );
          -ms-transform: rotateX(  -90deg ) translateZ( 100px );
           -o-transform: rotateX(  -90deg ) translateZ( 100px );
              transform: rotateX(  -90deg ) translateZ( 100px );
    }
    
    #cube.show-front {
      -webkit-transform: translateZ( -100px );
         -moz-transform: translateZ( -100px );
          -ms-transform: translateZ( -100px );
           -o-transform: translateZ( -100px );
              transform: translateZ( -100px );
    }
    #cube.show-back {
      -webkit-transform: translateZ( -100px ) rotateX( -180deg );
         -moz-transform: translateZ( -100px ) rotateX( -180deg );
          -ms-transform: translateZ( -100px ) rotateX( -180deg );
           -o-transform: translateZ( -100px ) rotateX( -180deg );
              transform: translateZ( -100px ) rotateX( -180deg );
    }
    #cube.show-right {
      -webkit-transform: translateZ( -100px ) rotateY(  -90deg );
         -moz-transform: translateZ( -100px ) rotateY(  -90deg );
          -ms-transform: translateZ( -100px ) rotateY(  -90deg );
           -o-transform: translateZ( -100px ) rotateY(  -90deg );
              transform: translateZ( -100px ) rotateY(  -90deg );
    }
    #cube.show-left {
      -webkit-transform: translateZ( -100px ) rotateY(   90deg );
         -moz-transform: translateZ( -100px ) rotateY(   90deg );
          -ms-transform: translateZ( -100px ) rotateY(   90deg );
           -o-transform: translateZ( -100px ) rotateY(   90deg );
              transform: translateZ( -100px ) rotateY(   90deg );
    }
    #cube.show-top {
      -webkit-transform: translateZ( -100px ) rotateX(  -90deg );
         -moz-transform: translateZ( -100px ) rotateX(  -90deg );
          -ms-transform: translateZ( -100px ) rotateX(  -90deg );
           -o-transform: translateZ( -100px ) rotateX(  -90deg );
              transform: translateZ( -100px ) rotateX(  -90deg );
    }
    #cube.show-bottom {
      -webkit-transform: translateZ( -100px ) rotateX(   90deg );
         -moz-transform: translateZ( -100px ) rotateX(   90deg );
          -ms-transform: translateZ( -100px ) rotateX(   90deg );
           -o-transform: translateZ( -100px ) rotateX(   90deg );
              transform: translateZ( -100px ) rotateX(   90deg );
    }

  
    </style>
    </head>
    <body>
     <section class="container">
    <div id="cube" class="show-front">
      <figure class="front">1</figure>
      <figure class="back">2</figure>
      <figure class="right">3</figure>
      <figure class="left">4</figure>
      <figure class="top">5</figure>
      <figure class="bottom">6</figure>
    </div>
  </section>
  
  <section id="options">
    
    <p id="show-buttons">
      <button class="show-front">Show 1</button>
      <button class="show-back">Show 2</button>
      <button class="show-right">Show 3</button>
      <button class="show-left">Show 4</button>
      <button class="show-top">Show 5</button>
      <button class="show-bottom">Show 6</button>
    </p>

    <p>
      <button id="toggle-backface-visibility">Toggle Backface Visibility</button>
    </p>
    

  </section>
  
  <script src="http://desandro.github.com/3dtransforms/js/utils.js"></script>
  <script src="http://desandro.github.com/3dtransforms/js/rotate-box.js"></script>
    </body>
    </html>
    
    
    
    

iPhone radio button switch control

MobiGen
374 days ago

Mobile

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     html, body { margin: 0; padding: 0;
			font: bold 17px Helvetica, Arial, Sans-serif; }
		ul, li { list-style: none; 
			margin: 0; 
			padding: 0;
	 	}
		li {
			background-color: #fff;
			border-bottom: solid 1px #ACACAC;
			padding: 10px;
		}
		li:first-of-type { 
			border-top: solid 1px #ACACAC; 
		}
		li:last-of-type {
			height: 20px;
		}
		.switch {
			float: right;
			height: 28px;
			width: 77px;
			border: 1px solid #979797;
			border-radius: 20px;
			margin-top: -5px;
			box-shadow: inset 0 1px 3px #BABABA, inset 0 12px 3px 2px rgba(232, 232, 232, 0.5);
			cursor: pointer;
			overflow: hidden;
		}
		.switch input[type=checkbox] {
			display: none;
		}
		.switch::before {
			content: "";
			display: block;
			height: 28px;
			width: 0px;
			position: absolute;
			border-radius: 20px;
			-webkit-box-shadow: inset 0 1px 2px #0063B7, inset 0 12px 3px 2px rgba(0, 127, 234, 0.5);
			box-shadow: inset 0 1px 2px #0063B7, inset 0 12px 3px 2px rgba(0, 127, 234, 0.5);
			background-color: #64B1F2;
		}
		.switch.on::before {
			width: 77px;
		}
		.switch > .thumb {
			display: block;
			width: 26px;
			height: 26px;
			position: relative;
			top: 0;
			z-index: 3;
			border: solid 1px #919191;
			border-radius: 28px;
			box-shadow: inset 0 2px 1px white, inset 0 -2px 1px white;
			background-color: #CECECE;
			background-image: -webkit-linear-gradient(#CECECE, #FBFBFB);
			background-image: -moz-linear-gradient(#CECECE, #FBFBFB);
			background-image: -o-linear-gradient(#CECECE, #FBFBFB);
			-o-transition: all 0.125s ease-in-out;
			-webkit-transition: all 0.125s ease-in-out;
			-moz-transition: all 0.125s ease-in-out;
			-o-transform: translateX(0px);
			-webkit-transform: translate3d(0,0,0);
			-moz-transform: translateX(0px);
		}
		.switch.on > .thumb {
			-webkit-transform: translate3d(49px,0,0);
			-o-transform: translateX(49px);
			-moz-transform: translateX(49px);
		}
		.switch:hover > .thumb {
			box-shadow: inset 0 2px 1px #fff, inset 0 -2px 1px #fff;
			background-image: none;
		}
		.switch > .thumb::before {
			content: "";
			display: block;
			height: 14px;
			width: 2px;
			background-color: white;
			box-shadow: 0px -1px 1px #666;
			border: none;
			position: absolute;
			top: 6px;
			left: -24px;
		}
		.switch > .thumb::after {
			content: "";
			display: block;
			height: 10px;
			width: 10px;
			border-radius: 10px;
			border: solid 2px #777;
			position: absolute;
			right: -32px;
			top: 6px;
		}  
    </style>
    </head>
    <body>
     <script>
		(function() {
			var $$ = function(selector) {
				return Array.prototype.slice.call(document.querySelectorAll(selector));
			}
			document.addEventListener("DOMContentLoaded", function() {
				var checkbox;
				var result = document.querySelector("#result");
				$$(".switch").forEach(function(switchControl) {
					if (switchControl.className === ("switch on")) {
						switchControl.lastElementChild.checked = true;
					}
					switchControl.addEventListener("click", function toggleSwitch() {
						if (switchControl.className === "switch on") {
							switchControl.className = 'switch off';
						} else {
							switchControl.className = ("switch on");
						}
						checkbox = switchControl.lastElementChild;
						checkbox.checked = !checkbox.checked;
						if (checkbox.checked === true) {
							if (this.parentNode.textContent) {
								result.textContent = "You want to " + this.parentNode.textContent.toLowerCase();
							} else {
								result.innerText = "You want to " + this.parentNode.innerText.toLowerCase();
							}
						} else {
							result.textContent = "Off";
							result.innerText = "Off";
						}
					}, false);
				});
			}, false);
		})()
	</script>

<ul>
	<li>Go to bed <div class="switch on"><span class="thumb"></span><input type="checkbox" /></div></li>
	<li>Wakeup <div class="switch"><span class="thumb"></span><input type="checkbox" /></div></li>
	<li>Take a Sandwich <div class="switch"><span class="thumb"></span><input type="checkbox" /></div></li>
	<li id="result"></li>
</ul>    </body>
    </html>
    
    
    
    