Created
June 21, 2012 17:01
-
-
Save starzonmyarmz/2967018 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Cube Slider · CodePen</title> | |
<style> | |
body, | |
html { | |
overflow: hidden; | |
} | |
.arrow, b.top:after, b.right:before, b.bottom:after, b.left:before { | |
border: 5px solid; | |
content: ""; | |
display: block; | |
position: absolute; | |
} | |
.horizontal, b.right:before, b.left:before { | |
border-color: transparent #999999 transparent #999999; | |
top: 50%; | |
margin-top: -5px; | |
} | |
.vertical, b.top:after, b.bottom:after { | |
border-color: #999999 transparent #999999 transparent; | |
left: 50%; | |
margin-left: -5px; | |
} | |
b { | |
background: #bada55; | |
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) inset; | |
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) inset; | |
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5) inset; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
color: #1a1a1a; | |
display: block; | |
font-family: helvetica; | |
font-size: 12px; | |
height: 100px; | |
padding: 28px 10px 0; | |
position: absolute; | |
width: 100px; | |
text-align: center; | |
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); | |
-webkit-transition: all 1s ease-in-out; | |
-moz-transition: all 1s ease-in-out; | |
-ms-transition: all 1s ease-in-out; | |
-o-transition: all 1s ease-in-out; | |
transition: all 1s ease-in-out; | |
} | |
b.top { | |
top: 0; | |
} | |
b.top:after { | |
border-bottom: 0; | |
bottom: -10px; | |
} | |
b.right { | |
left: 100%; | |
margin-left: -100px; | |
} | |
b.right:before { | |
border-left: 0; | |
left: -10px; | |
} | |
b.bottom { | |
margin-top: -100px; | |
top: 100%; | |
} | |
b.bottom:after { | |
border-top: 0; | |
top: -10px; | |
} | |
b.left { | |
left: 0; | |
} | |
b.left:before { | |
border-right: 0; | |
right: -10px; | |
} | |
</style> | |
<style> | |
#codepen-footer, #codepen-footer * { | |
-webkit-box-sizing: border-box !important; | |
-moz-box-sizing: border-box !important; | |
box-sizing: border-box !important; | |
} | |
#codepen-footer { | |
display: block !important; | |
position: fixed !important; | |
bottom: 0 !important; | |
left: 0 !important; | |
width: 100% !important; | |
padding: 0 10px !important; | |
margin: 0 !important; | |
height: 30px !important; | |
line-height: 30px !important; | |
font-size: 12px !important; | |
color: #eeeeee !important; | |
background-color: #505050 !important; | |
text-align: left !important; | |
background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
background: -moz-linear-gradient(top, #505050, #383838) !important; | |
background: -ms-linear-gradient(top, #505050, #383838) !important; | |
background: -o-linear-gradient(top, #505050, #383838) !important; | |
border-top: 1px solid black !important; | |
border-bottom: 1px solid black !important; | |
border-radius: 0 !important; | |
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
z-index: 300 !important; | |
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
letter-spacing: 0 !important; | |
word-spacing: 0 !important; | |
} | |
#codepen-footer a { | |
color: #a7a7a7 !important; | |
text-decoration: none !important; | |
} | |
#codepen-footer a:hover { | |
color: white !important; | |
} | |
</style> | |
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
</head> | |
<body> | |
<b class='top left'> | |
Use arrow keys to move me bro | |
</b> | |
<script src="http://code.jquery.com/jquery-latest.js"></script> | |
<script> | |
(function() { | |
$(document).on('keydown', function(e) { | |
var b = $('b'); | |
var x = b.position().left; | |
var y = b.position().top; | |
switch(e.keyCode) { | |
case 37: | |
if (b.hasClass('right')) { | |
b.removeClass('right').addClass('left'); | |
} | |
break; | |
case 38: | |
if (b.hasClass('bottom')) { | |
b.removeClass('bottom').addClass('top'); | |
} | |
break; | |
case 39: | |
if (b.hasClass('left')) { | |
b.removeClass('left').addClass('right'); | |
} | |
break; | |
case 40: | |
if (b.hasClass('top')) { | |
b.removeClass('top').addClass('bottom'); | |
} | |
break; | |
} | |
console.log(e.keyCode) | |
return false; | |
}); | |
})(); | |
</script> | |
<div id="codepen-footer"> | |
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| |
<a href="/starzonmyarmz/pen/cube-slider/32">Edit this Pen</a> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).on('keydown', function(e) { | |
var b = $('b'); | |
var x = b.position().left; | |
var y = b.position().top; | |
switch(e.keyCode) { | |
case 37: | |
if (b.hasClass('right')) { | |
b.removeClass('right').addClass('left'); | |
} | |
break; | |
case 38: | |
if (b.hasClass('bottom')) { | |
b.removeClass('bottom').addClass('top'); | |
} | |
break; | |
case 39: | |
if (b.hasClass('left')) { | |
b.removeClass('left').addClass('right'); | |
} | |
break; | |
case 40: | |
if (b.hasClass('top')) { | |
b.removeClass('top').addClass('bottom'); | |
} | |
break; | |
} | |
console.log(e.keyCode) | |
return false; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
%b.top.left | |
Use arrow keys to move me bro |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass" | |
body, | |
html | |
overflow: hidden | |
.arrow | |
border: 5px solid | |
content: "" | |
display: block | |
position: absolute | |
.horizontal | |
border-color: transparent #999 transparent #999 | |
top: 50% | |
margin-top: -5px | |
.vertical | |
border-color: #999 transparent #999 transparent | |
left: 50% | |
margin-left: -5px | |
b | |
background: #bada55 | |
+box-shadow( 0 2px 2px rgba(0, 0, 0, .5) inset ) | |
+box-sizing( border-box ) | |
color: #1a1a1a | |
display: block | |
font-family: helvetica | |
font-size: 12px | |
height: 100px | |
padding: 28px 10px 0 | |
position: absolute | |
width: 100px | |
text-align: center | |
text-shadow: 0 1px 0 rgba(255, 255, 255, .5) | |
+transition( all 1s ease-in-out ) | |
&.top | |
top: 0 | |
&:after | |
@extend .arrow | |
@extend .vertical | |
border-bottom: 0 | |
bottom: -10px | |
&.right | |
left: 100% | |
margin-left: -100px | |
&:before | |
@extend .arrow | |
@extend .horizontal | |
border-left: 0 | |
left: -10px | |
&.bottom | |
margin-top: -100px | |
top: 100% | |
&:after | |
@extend .arrow | |
@extend .vertical | |
border-top: 0 | |
top: -10px | |
&.left | |
left: 0 | |
&:before | |
@extend .arrow | |
@extend .horizontal | |
border-right: 0 | |
right: -10px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment