Skip to content

Instantly share code, notes, and snippets.

@kmrtylmz

kmrtylmz/index.html

Created May 9, 2024 17:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kmrtylmz/4c79bd8dc07d9be4452b10b9d93571ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kmrtylmz/4c79bd8dc07d9be4452b10b9d93571ec to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. kmrtylmz created this gist May 9, 2024.
    25 changes: 25 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <fieldset>
    <div class='legend'><span>power switchs</span></div>
    <div class='checkboxGroup'>
    <label class='checkboxControl'>
    <input type='checkbox' />
    <div>ΟΙ</div><b></b>
    <span class='indicator'></span>
    </label>
    <label class='checkboxControl'>
    <input type='checkbox' />
    <div>ΟΙ</div><b></b>
    <span class='indicator'></span>
    </label>
    </div>
    <label class='checkboxControl2'>
    <input type='checkbox' />
    <div></div>
    <span class='indicator'></span>
    </label>
    <label class='checkboxControl2'>
    <input type='checkbox' />
    <div></div>
    <span class='indicator'></span>
    </label>
    </fieldset>
    7 changes: 7 additions & 0 deletions oldschool-toggeler-in-css3.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    oldschool toggeler in CSS3
    --------------------------
    a retro looking, CSS only button.

    A [Pen](https://codepen.io/pluton/pen/DWwBpr) by [pluton wan](https://codepen.io/pluton) on [CodePen](https://codepen.io).

    [License](https://codepen.io/license/pen/DWwBpr).
    8 changes: 8 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    var snd = new Audio('http://www.ilovewavs.com/Effects/Beeps/Click02.wav');
    // delegated event on inputs of checkboxControl
    document.addEventListener('change', function(e){
    if(e.target.parentNode.className.indexOf('checkboxControl') != -1){
    snd.currentTime = 0;
    snd.play();
    }
    });
    86 changes: 86 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    *{ margin:0; padding:0; }
    html, body{ height:100%; }
    body{ font:15px/1 arial; text-align:center; background:#509DAD; }
    body:before{ content:''; display:inline-block; height:100%; vertical-align:middle; }
    fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; }
    .legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); }
    .legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; }
    .checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; }
    /*------- Horizontal power swtich ---------*/
    .checkboxControl{
    border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597;
    box-shadow: 0 0 5px rgba(255,255,255,.4),
    0 2px 1px -1px rgba(255,255,255,.7) inset,
    8px 0 5px -5px #02425C inset,
    -8px 0 5px -5px #02425C inset;
    -moz-user-select:none; -webkit-user-select:none;
    background:#80DCE9;
    }
    .checkboxControl input{ position:absolute; visibility:hidden; }
    .checkboxControl > div{
    background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
    background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%);
    box-shadow:-2px 0 1px 0 #A6F2FE inset;
    border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5);

    transform-origin:0 0; -webkit-transform-origin:0 0;
    transform:scaleX(0.93); -webkit-transform:scaleX(0.93);
    transition:.1s; -webkit-transition:0.1s;
    }
    .checkboxControl div:first-letter{ letter-spacing:55px; }

    .checkboxControl :checked ~ div{
    transform-origin:100% 0; -webkit-transform-origin:100% 0;
    box-shadow:2px 0 1px 0 #A6F2FE inset;
    background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
    background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%);
    }
    /* bottom shadow of 'upper' side of the button */
    .checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; }
    .checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); }
    /* the light indicator to the right of the button */
    .checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }
    .checkboxControl .indicator:before{ content:''; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
    .checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; }

    /*------- Vertical power swtich ---------*/
    .checkboxControl2{
    border:2px solid #102838; border-radius:7px; display:inline-block; vertical-align:middle; font-weight:bold;
    width:60px; height:100px; position:relative; margin:0 5px;
    color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4);
    }
    .checkboxControl2 input{ position:absolute; visibility:hidden; }
    .checkboxControl2 > div{
    background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
    background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
    height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5);
    }
    .checkboxControl2 > div:after{
    content:'Ο'; display:block; height:50%; line-height:4;
    transform-origin:0 0; -webkit-transform-origin:0 0;
    }
    .checkboxControl2 > div:before{
    content:'Ι'; display:block; height:50%; line-height:2.5;
    border-radius:80%/5px;
    box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8);
    transform-origin:0 100%; -webkit-transform-origin:0 100%;
    transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
    }

    .checkboxControl2 :checked ~ div{
    background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
    background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%);
    }
    .checkboxControl2 :checked ~ div:before{
    border-radius:0; box-shadow:none;
    transform:none; -webkit-transform:none;
    }
    .checkboxControl2 :checked ~ div:after{
    border-radius:80%/5px;
    box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC;
    transform:scaleY(0.7); -webkit-transform:scaleY(0.7);
    }
    /* the light indicator to the top of the button */
    .checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; }
    .checkboxControl2 .indicator:before{ content:''; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; }
    .checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; }