3D CSS Card Slide Flip

3DCSS
4 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
4 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
5 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>
    
    
    
    

Pure CSS Drop Down Menu

csssnip
6 days ago

Navigation and Menus

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     /*------------------------------------*\
	RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,th,var{
	font-style:normal;
	font-weight:normal;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}





/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	height:101%;
	background:#fff url(/img/css/bg.gif) top left repeat-x;
}
body{
	font-family:Arial,Verdana,sans-serif;
	font-size:0.75em;
	color:#333;
	width:960px;
	margin:0 auto;
	padding:10px;
}





/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;
}
#nav a:hover{
	color:#fff;
	background:#6b0c36;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#6b0c36;
	text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}





/*------------------------------------*\
	TYPE
\*------------------------------------*/
h1{
	font-family:Calibri, Arial, Verdana, sans-serif;
	font-size:2em;
	width:520px;
}  
    </style>
    </head>
    <body>
     <ul id="nav">
		<li>
			<a href="#" title="Return home">Home</a>
		</li>
		<li>
			<a href="#" title="About the company">About</a>
			<ul>
				<li><a href="#">The product</a></li>
				<li><a href="#">Meet the team</a></li>
			</ul>
		</li>
		<li>
			<a href="#" title="The services we offer">Services</a>
			<ul>
				<li><a href="#">Sevice one</a></li>
				<li><a href="#">Sevice two</a></li>
				<li><a href="#">Sevice three</a></li>
				<li><a href="#">Sevice four</a></li>
			</ul>
		</li>
		<li>
			<a href="#" title="Our product range">Product</a>
			<ul>
				<li><a href="#">Small product (one)</a></li>
				<li><a href="#">Small product (two)</a></li>
				<li><a href="#">Small product (three)</a></li>
				<li><a href="#">Small product (four)</a></li>
				<li><a href="#">Big product (five)</a></li>
				<li><a href="#">Big product (six)</a></li>
				<li><a href="#">Big product (seven)</a></li>
				<li><a href="#">Big product (eight)</a></li>
				<li><a href="#">Enourmous product (nine)</a></li>
				<li><a href="#">Enourmous product (ten)</a></li>
				<li><a href="#">Enourmous product (eleven)</a></li>
			</ul>
		</li>
		<li>
			<a href="#" title="Get in touch with us">Contact</a>
			<ul>
				<li><a href="#">Out-of-hours</a></li>
				<li><a href="#">Directions</a></li>
			</ul>
		</li>
	</ul>
    </body>
    </html>
    
    
    
    

Horizonal infinite Marque CSS Text Animation

csssnip
6 days ago

Animations

    
        <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8" />
    <title></title>
    <style>
     .wrapper {width:500px; border:1px solid #aaa; margin:0 auto; overflow:hidden; border-radius:8px;}
.marquee{
position:relative;
overflow:hidden;
float:left;
}
.marquee span{font:40px arial, sans-serif; padding-left:10px;
white-space: nowrap;
display:inline;
position: relative;
left:0%;
-moz-animation: marquee 15s infinite linear 3s;
-webkit-animation: marquee 15s infinite linear 3s;
}
.marquee:hover span{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
.marquee span:after {content:attr(rel); display:inline; color:black; padding-left:10px;}
@-webkit-keyframes marquee{
0% {left: 0%;}
100% {left: -50%;}
}

@-moz-keyframes marquee{
0% {left: 0%;}
100% {left: -50%;}
}
  
    </style>
    </head>
    <body>
     <div class="wrapper">
	<div class="marquee">
		<span rel="This is an endless CSS marquee animation with wrap around text and a delay start.">
			This is an endless CSS marquee animation with wrap around text and a delay start.
		</span>
	</div>
</div>    </body>
    </html>
    
    
    
    