A funny test of CSS3 multiple backgrounds and gradients.
A Pen by How Bizarre on CodePen.
<section id="space"> | |
<ins id="moon"> </ins> | |
</section> |
A funny test of CSS3 multiple backgrounds and gradients.
A Pen by How Bizarre on CodePen.
/*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)); |
* { | |
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; | |
} |