Skip to content

Instantly share code, notes, and snippets.

@adivik2000

adivik2000/Fullpage.html

Created June 20, 2012 09:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adivik2000/2958973 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adivik2000/2958973 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adivik2000 created this gist Jun 20, 2012.
    190 changes: 190 additions & 0 deletions Fullpage.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,190 @@


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">

    <title>Pure CSS Animated UI &middot; CodePen</title>

    <style>
    html {
    background-color: #e4ded4;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.1);
    height: 100%;
    padding: 50px;
    -webkit-box-sizing: border-box;
    }
    input {
    display: block;
    margin-bottom: 20px;
    }

    /* Checkbox */

    input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
    -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 5px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
    inset 0 0 10px hsla(0,0%,0%,.5),
    0 0 0 1px hsla(0,0%,0%,.1),
    0 -1px 2px 1px hsla(0,0%,0%,.25),
    0 2px 2px 1px hsla(0,0%,100%,.5),
    0 -2px 10px 2px hsla(0,0%,100%,.75),
    0 2px 10px 2px hsla(0,0%,0%,.25);
    cursor: pointer;
    height: 10px;
    padding-right: 10px;
    position: relative;
    width: 20px;
    -webkit-appearance: none;
    -webkit-transition: .15s;
    }
    input[type="checkbox"]:after {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
    inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
    0 1px 3px 1px hsla(0,0%,0%,.5),
    0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 10px;
    left: 0;
    position: relative;
    top: 0;
    width: 10px;
    }
    input[type="checkbox"]:checked {
    background-position: 0 0, 15px 0;
    padding-left: 10px;
    padding-right: 0;
    }
    input[type="checkbox"]:hover:before {
    background: hsla(0,0%,0%,.25);
    border-radius: 10px;
    color: #e4ded4;
    content: '✘';
    font: 12px/20px sans-serif;
    height: 20px;
    left: 25px;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: -5px;
    width: 20px;
    }
    input[type="checkbox"]:checked:hover:before {
    content: '✔';
    }

    /* Range */

    input[type="range"] {
    background-image: -webkit-linear-gradient(left, hsla(0,0%,100%,.1) 45%, transparent 45%),
    -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
    -webkit-linear-gradient(left, #f66, #6cf);
    background-size: 3px 3px, 100% 100%, 100% 100%;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
    inset 0 0 10px hsla(0,0%,0%,.5),
    0 0 0 1px hsla(0,0%,0%,.1),
    0 -1px 2px 1px hsla(0,0%,0%,.25),
    0 2px 2px 1px hsla(0,0%,100%,.5),
    0 -2px 10px 2px hsla(0,0%,100%,.75),
    0 2px 10px 2px hsla(0,0%,0%,.25);
    cursor: ew-resize;
    height: 10px;
    position: relative;
    width: 100px;
    -webkit-appearance: none;
    -webkit-transition: .15s;
    }
    input[type="range"]::-webkit-slider-thumb {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
    inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
    0 1px 3px 1px hsla(0,0%,0%,.5),
    0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 10px;
    left: 0;
    position: relative;
    top: 0;
    width: 10px;
    -webkit-appearance: none;
    }
    ​
    </style>

    <style>
    #codepen-footer, #codepen-footer * {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    }
    #codepen-footer {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 10px !important;
    margin: 0 !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    color: #eeeeee !important;
    background-color: #505050 !important;
    text-align: left !important;
    background: -webkit-linear-gradient(top, #505050, #383838) !important;
    background: -moz-linear-gradient(top, #505050, #383838) !important;
    background: -ms-linear-gradient(top, #505050, #383838) !important;
    background: -o-linear-gradient(top, #505050, #383838) !important;
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
    z-index: 300 !important;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    }
    #codepen-footer a {
    color: #a7a7a7 !important;
    text-decoration: none !important;
    }
    #codepen-footer a:hover {
    color: white !important;
    }
    </style>

    </head>
    <body>

    <input type="checkbox">

    <input type="checkbox" checked>

    <input type="range">​

    <div id="codepen-footer">
    <a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>

    &nbsp;

    <a href="/adivik2000/pen/2/1">Edit this Pen</a>
    </div>

    </body>

    </html>
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <input type="checkbox">

    <input type="checkbox" checked>

    <input type="range">​
    116 changes: 116 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,116 @@
    html {
    background-color: #e4ded4;
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.1);
    height: 100%;
    padding: 50px;
    -webkit-box-sizing: border-box;
    }
    input {
    display: block;
    margin-bottom: 20px;
    }

    /* Checkbox */

    input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
    -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 5px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
    inset 0 0 10px hsla(0,0%,0%,.5),
    0 0 0 1px hsla(0,0%,0%,.1),
    0 -1px 2px 1px hsla(0,0%,0%,.25),
    0 2px 2px 1px hsla(0,0%,100%,.5),
    0 -2px 10px 2px hsla(0,0%,100%,.75),
    0 2px 10px 2px hsla(0,0%,0%,.25);
    cursor: pointer;
    height: 10px;
    padding-right: 10px;
    position: relative;
    width: 20px;
    -webkit-appearance: none;
    -webkit-transition: .15s;
    }
    input[type="checkbox"]:after {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
    inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
    0 1px 3px 1px hsla(0,0%,0%,.5),
    0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 10px;
    left: 0;
    position: relative;
    top: 0;
    width: 10px;
    }
    input[type="checkbox"]:checked {
    background-position: 0 0, 15px 0;
    padding-left: 10px;
    padding-right: 0;
    }
    input[type="checkbox"]:hover:before {
    background: hsla(0,0%,0%,.25);
    border-radius: 10px;
    color: #e4ded4;
    content: '✘';
    font: 12px/20px sans-serif;
    height: 20px;
    left: 25px;
    letter-spacing: 1px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: -5px;
    width: 20px;
    }
    input[type="checkbox"]:checked:hover:before {
    content: '✔';
    }

    /* Range */

    input[type="range"] {
    background-image: -webkit-linear-gradient(left, hsla(0,0%,100%,.1) 45%, transparent 45%),
    -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
    -webkit-linear-gradient(left, #f66, #6cf);
    background-size: 3px 3px, 100% 100%, 100% 100%;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
    inset 0 0 10px hsla(0,0%,0%,.5),
    0 0 0 1px hsla(0,0%,0%,.1),
    0 -1px 2px 1px hsla(0,0%,0%,.25),
    0 2px 2px 1px hsla(0,0%,100%,.5),
    0 -2px 10px 2px hsla(0,0%,100%,.75),
    0 2px 10px 2px hsla(0,0%,0%,.25);
    cursor: ew-resize;
    height: 10px;
    position: relative;
    width: 100px;
    -webkit-appearance: none;
    -webkit-transition: .15s;
    }
    input[type="range"]::-webkit-slider-thumb {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
    inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
    0 1px 3px 1px hsla(0,0%,0%,.5),
    0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 10px;
    left: 0;
    position: relative;
    top: 0;
    width: 10px;
    -webkit-appearance: none;
    }
    ​