Skip to content

Instantly share code, notes, and snippets.

@SabbaKilam

SabbaKilam/dabblet.css

Last active March 4, 2017 03:33
Show Gist options
  • Save SabbaKilam/b21cbec2db664a381bb150c706cdf305 to your computer and use it in GitHub Desktop.
Save SabbaKilam/b21cbec2db664a381bb150c706cdf305 to your computer and use it in GitHub Desktop.
Download ZIP
Flipper Shadowing
Raw
dabblet.css
/**
* Flipper Shadowing
*/
*{
box-sizing: border-box;
}
body{
background: #aaa;
min-height: 100%;
user-select: none;
}
#app{
position: absolute;
margin: auto;
width: 60%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0; background-color: #dadada;
box-shadow: 5px 5px 40px #111;
border-radius: 1rem;
perspective: 150rem;
}
.bottom{
position: absolute;
margin: auto;
width: 100%;
height: 50%;
bottom: 0;
left: 0;
right: 0;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#half2{
background-color: #dadada;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;}
#glass2{
background: hsla(0, 0%, 0%, 0);
}
#flipperHolder{
transform-origin: top;
transform: rotateX(0deg);
border-bottom: 2px solid black;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#flipper{
background-color: teal;
height: 100%;
width: 100%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#flipperGlass{
height: 100%;
width: 100%;
background: linear-gradient(45deg, transparent, hsla(0, 0%, 80%, 1));
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#flipperContent{
position: absolute;
border: 1px solid black;
margin: auto;
left: 0;
right: 0;
width: 90%;
height: 90%;
text-align: center;
font-size: 2.5rem;
color: black;
text-shadow: 0 1px 0 white;
}
Raw
dabblet.html
<body>
<div id="app">
<div id="half2" class="bottom">
<div id="half2Content" ></div>
</div>
<div id="glass2" class="bottom"></div>
<div id="flipperHolder" class="bottom">
<div id="flipper" >
<div id="flipperContent">foobar</div>
</div>
<div id="flipperGlass" class="bottom"></div>
</div>
</div>
</body>
Raw
dabblet.js
function attachAllElementsById(here){
let allElementsList = document.getElementsByTagName('*');
[].forEach.call(allElementsList, function(element){
if(element.id){
here[element.id] = element;
}
});
}
var v = {};
var m = {};
m.pressed = false;
window.addEventListener("dblclick", function(eventObject){
eventObject.stopPropagation();
attachAllElementsById(v);
});
window.addEventListener('mousedown', function(eventObject){
m.pressed = true;
});
window.addEventListener('mouseup', function(eventObject){
m.pressed = false;
});
window.addEventListener('mousemove', function(eventObject){
if(m.pressed){
let y = eventObject.clientY;// - 0.25 * window.innerHeight;
let h = window.innerHeight;//* 0.5;
let fraction = (h-y)/h;
let angle = 180 * fraction;
if(angle >= 180){angle = 180}
else if(angle <= 0){angle = 0}
let shadowFactor = Math.abs( (angle - 90) / 90 );
v.flipperContent.innerHTML = angle.toFixed(2) +"&deg;";
v.flipperHolder.style.transform = 'rotateX(' + angle + 'deg)';
//================| shading |=========================//
if(angle <= 90){
v.flipperGlass.style.background = 'linear-gradient(45deg, transparent, hsla(0, 0%, 80%, ' + (1 - shadowFactor) + '))';
v.glass2.style.background = 'hsla(0, 0%, 0%, ' + (shadowFactor)+ ')';
}
}
});
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment