Skip to content

Instantly share code, notes, and snippets.

@Saminou24

Saminou24/An-Anonymous-Pen.markdown

Created October 1, 2013 18:37
Show Gist options
  • Save Saminou24/6783002 to your computer and use it in GitHub Desktop.
Save Saminou24/6783002 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Captain Anonymous.
Raw
index.html
<head>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body ng-app="cssPracticeApp">
<div id='toggle-floater'></div>
<div id='shot'>
<div class='whatsit'><span class='lite-text'>CSS</span> <span class='darker-text'>SWITCH</span></div>
<div class='toggle'
id='tl'
toggle-div
toggle-class='toggle-on'
toggle-active=false>
<div class='toggle-text-off'>OFF</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>ON</div>
</div>
<div class='toggle'
id='tr'
toggle-div
toggle-class='toggle-on'
toggle-active=true>
<div class='toggle-text-off'>OFF</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>ON</div>
</div>
<div class='toggle'
id='bl'
toggle-div
toggle-class='toggle-on'
toggle-active=true>
<div class='toggle-text-off'>OFF</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>ON</div>
</div>
<div class='toggle'
id='br'
toggle-div
toggle-class='toggle-on'
toggle-active=false>
<div class='toggle-text-off'>OFF</div>
<div class='glow-comp'></div>
<div class='toggle-button'></div>
<div class='toggle-text-on'>ON</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</body>
Raw
script.js
'use strict';
angular.module('cssPracticeApp', []).directive('toggleDiv', function () {
return {
replace: true,
transclude: true,
template: '<div ng-click="toggle()" ng-transclude></div>',
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);
};
}
};
});
Raw
style.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment