LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    
    
    
    
    
    

  
    
CSS SWITCH
OFF
ON
OFF
ON
OFF
ON
OFF
ON
CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html{
    height: 100%;
}

body{
    height: 100%;
    background-color: #141219;
}

.container{
    height: 100%;
}

#toggle-floater{
    float:left; 
    background-color: red;
    height:50%; 
    margin-bottom:-150px;
}

#shot{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    
    width: 380px;
    height: 280px;
    
    border: solid 1px #444249;//#89c2da;
    border-radius: 8px;

    clear: both;
}

.whatsit{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 278px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 48px;
    font-weight: normal;
    color: #89c2da;
}

span.lite-text{
    text-shadow: 0 0 4px #4b7a8d;
}

.darker-text{
    color: #4b7a8d;
}

#tl{
    top: 18px;
    left: 18px;
    width: 75px;
    height: 40px;
}

#tr{
    top: 18px;
    right: 18px;
    width: 75px;
    height: 40px;
}

#bl{
    bottom: 18px;
    left: 18px;
    width: 75px;
    height: 40px;
}

#br{
    bottom: 18px;
    right: 18px;
    width: 75px;
    height: 40px;
}

.toggle{
    position: absolute;
    border: 2px solid #444249;
    border-radius: 20px;
    -webkit-transition: border-color .6s  ease-out;
    transition: border-color .6s  ease-out;
}

.toggle.toggle-on{
    border-color: rgba(137, 194, 217, .4);
    -webkit-transition: all .5s .15s ease-out;
    transition: all .5s .15s ease-out;
}

.toggle-button{
    position: absolute;
    top: 4px;
    width: 28px;
    bottom: 4px;
    right: 39px;
    background-color: #444249;
    border-radius: 19px; 
    cursor: pointer;
    -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;
    transition: all .3s .1s, width .1s, top .1s, bottom .1s;
}

.toggle-on .toggle-button{
    top: 3px;
    width: 65px;
    bottom: 3px;
    right: 3px;
    border-radius: 23px;
    background-color: #89c2da;
    box-shadow: 0 0 16px #4b7a8d;
    -webkit-transition: all .2s .1s, right .1s;
    transition: all .2s .1s, right .1s;
}


.toggle-text-on{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 36px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */


    color: rgba(0,0,0,0);
}

.toggle-on .toggle-text-on{
    color: #3b6a7d;
    -webkit-transition: color .3s .15s ;
    transition: color .3s .15s ;
}

.toggle-text-off{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    line-height: 36px;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: bold;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */

    cursor: pointer;

    color: #444249;
}

.toggle-on .toggle-text-off{
    color: rgba(0,0,0,0);
}

/* used for streak effect */
.glow-comp{
    position: absolute;
    opacity: 0;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    border-radius: 6px;
    background-color: rgba(75, 122, 141, .1);
    box-shadow: 0 0 12px rgba(75, 122, 141, .2);
    -webkit-transition: opacity 4.5s 1s;
    transition: opacity 4.5s 1s;
}

.toggle-on .glow-comp{
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
JS
'use strict';

angular.module('cssPracticeApp', []).directive('toggleDiv', function () {
    return {
    	replace: true,
		transclude: true,
      	template: '
', restrict: 'A', scope: { }, link: function postLink(scope, element, attrs) { // the class to toggle var t_c = attrs.toggleClass; // initialize the class element.toggleClass(t_c, (attrs.toggleActive == 'true' ? true : false)); // toggle the class scope.toggle = function() { element.toggleClass(t_c); }; } }; });
Host Instantly Drag and Drop Website Builder

 

Description

Just wanted to try this type of switch out. I'm not sure that I'd ever use it, but I think it is effective.
Term
Mon, 11/27/2017 - 21:57

Related Codes

Pen ID
Pen ID
Pen ID