Skip to content

Instantly share code, notes, and snippets.

@andersdn

andersdn/index.html

Created August 22, 2012 06:46
Show Gist options
  • Save andersdn/3423075 to your computer and use it in GitHub Desktop.
Save andersdn/3423075 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. andersdn created this gist Aug 22, 2012.
    16 changes: 16 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <div class="holoform dark">
    <span class="checkbox">
    <label for="check1">This is the label</label>
    <span>
    <input type="checkbox" name="check1" id="check1">
    <label data-on="ON" data-off="OFF"></label>
    </span>
    </span>
    <span class="checkbox">
    <label for="check2">This one is already checked</label>
    <span>
    <input type="checkbox" name="check2" id="check2" checked="checked">
    <label data-on="ON" data-off="OFF"></label>
    </span>
    </span>
    </div>
    109 changes: 109 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    body {
    margin:0 0;
    text-align:center;
    background:#E8E8E8;
    }

    .holoform{
    max-width:320px;
    height:100%;
    border:1px solid white;
    padding:10px;
    margin:0 auto;
    background-color:#E8E8E8;
    background-image:linear-gradient(#000000, #272D33);
    }
    .holoform .checkbox{
    height:10px;
    margin:10px 0;
    padding:0px 0 20px;
    display:block;
    position:relative;
    border-bottom:1px solid #333;
    }
    .holoform .checkbox label{
    font-family:Roboto, "Droid Sans", Arial, Helvetica, sans-serif;
    color:#fff;
    font-size:14px;
    line-height:20px;
    cursor:pointer;
    position:absolute;
    left:0;
    right:0;
    color: white;
    display: block;
    float: left;
    text-align: left;
    }
    .holoform .checkbox span{
    display:inline-block;
    position:relative;
    float:right;
    text-align:left;
    width:70px;
    height:20px;
    background-color:#252525;
    overflow:hidden;
    }

    .holoform .checkbox span input {
    display:block;
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    width:100%;
    height:100%;
    margin:0 0;
    cursor:pointer;
    opacity:0;
    filter:alpha(opacity=0);
    z-index:5;
    }

    .holoform .checkbox span label {
    background-color:#666;
    display:inline-block;
    width:35px;
    text-align:center;
    font:normal 10px/20px Arial,Sans-Serif;
    color:#fff;
    text-shadow:0 -1px 0 rgba(0,0,0,0.7);
    margin:0px;
    z-index:4;
    position:absolute;
    }

    .holoform .checkbox span label:before {
    content:attr(data-off);
    }

    .holoform .checkbox span input:checked + label {
    margin-left:35px;
    background-color:#3181aa;
    z-index:3;
    position:absolute;
    color:white;
    }

    .holoform .checkbox span input:checked + label:before {
    content:attr(data-on);
    }
    .holoform .checkbox span input + label:after{
    position:absolute;
    left:15px;
    top:0px;
    content:'';
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #666;
    border-bottom:none;
    z-index:-1;
    }
    .holoform .checkbox span input:checked + label:after{
    left:-20px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top:none;
    border-bottom: 20px solid #3181aa;
    }