Created
April 9, 2013 06:48
-
-
Save howbizarre/5343505 to your computer and use it in GitHub Desktop.
A CodePen by How Bizarre. Moon - A funny test of CSS3 multiple backgrounds and gradients.
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
<section id="space"> | |
<ins id="moon"> </ins> | |
</section> |
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
/*global document, window, $, jQuery*/ | |
jQuery.extend({ | |
rndm: function (i) { 'use strict'; return Math.floor(i * (Math.random() % 1)); }, | |
rndMU: function (min, max) { 'use strict'; return min + jQuery.rndm(max - min + 1); }, | |
getDocHeight: function () { | |
'use strict'; | |
return Math.max( | |
$(document).height(), | |
$(window).height(), | |
document.documentElement.clientHeight | |
); | |
}, | |
getDocWidth: function () { | |
'use strict'; | |
return Math.max( | |
$(document).width(), | |
$(window).width(), | |
document.documentElement.clientWidth | |
); | |
} | |
}); | |
function nightsky(i, count, brwsr) { | |
'use strict'; | |
var stars = [], | |
size = []; | |
for (i; i <= count; i = i + 1) { | |
stars[stars.length] = brwsr + 'linear-gradient(#fff, #000) ' + $.rndMU(0, $.getDocWidth()) + 'px ' + $.rndMU(0, $.getDocHeight()) + 'px no-repeat'; | |
size[size.length] = '1px 2px'; | |
} | |
return { | |
'bg': stars.join(', ') + ', #001 ' + brwsr + 'linear-gradient(#fff, #000) 0 0 no-repeat', | |
'bgsize': size.join(', ') | |
}; | |
} | |
(function($) { | |
'use strict'; | |
var $body = $('body'), | |
$moon = $body.find('#moon'), | |
mw = $moon.width(), | |
mh = $moon.height(), | |
count = $.rndMU(0, 1500), | |
pos = nightsky(0, count, '-webkit-'); | |
$body.css({ | |
"background": pos.bg, | |
"background-size": pos.bgsize | |
}); | |
$moon.mousemove(function(e) { | |
var dh = $.getDocHeight(), | |
dw = $.getDocWidth(), | |
mx = (e.pageX < ((dw / 2) - ((mw / 2)))) ? 0 : (e.pageX > ((dw / 2) + (mw / 2))) ? mw : -((((dw / 2) + (mw / 2)) - e.pageX) - mw), | |
my = (e.pageY < ((dh / 2) - ((mh / 2)))) ? 0 : (e.pageY > ((dh / 2) + (mh / 2))) ? mh : -((((dh / 2) + (mh / 2)) - e.pageY) - mh); | |
$moon.css({"background": "-webkit-radial-gradient(" + mx + "px " + my + "px, circle contain, rgba(255,255,255,0.75) 0%, rgba(127,127,127,0.5) 150%, #000 300%), url(http://errazib.com/img/dark_moon.png) no-repeat center"}); | |
}); | |
}(jQuery)); |
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
* { | |
margin: 0; | |
padding: 0; | |
} | |
html, body { | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
} | |
body { | |
background: | |
linear-gradient(#fff, rgba(0,0,0,1)) 157% 453px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 359px 225px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 435px 32px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 185px 701px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 857px 499px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 359px 225px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 500px 751px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 757px 159px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 357px 158px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 419px 825px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 339px 832px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 785px 741px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 57px 399px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 659px 25px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 510px 71px no-repeat, | |
linear-gradient(#fff, rgba(0,0,0,1)) 57px 859px no-repeat, | |
#001 linear-gradient(#fff, rgba(0,0,0,1)) 50px 50px no-repeat; | |
background-size: | |
0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, | |
0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, | |
0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%, 0.15% 25%; | |
} | |
#moon { | |
border-radius: 50%; | |
width: 300px; | |
height: 300px; | |
display: inline-block; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin: -150px 0 0 -150px; | |
box-shadow: 0 0 500px #666; | |
background: #000; | |
} | |
#moon:hover { | |
cursor: none; | |
box-shadow: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment