Generate the Stack Overflow logo
Entry for a StackExchange Programming Puzzles & Code Golf challenge. http://codegolf.stackexchange.com/questions/4561/generate-the-stack-overflow-logo
CSS
* { padding: 0; margin: 0; }
div { position: absolute; width: 100px; height: 20px; background-color: red; }
.s { background-color: gray; }
#d0,#d2 { width: 20px; height: 70px; }
#d0 { left: 20px; top: 160px; }
#d1 { left: 20px; top: 230px; width: 160px; }
#d2 { left: 160px; top: 160px; }
.e { -moz-transform-origin: 200% center; -ms-transform-origin: 200% center; -o-transform-origin: 200% center; -webkit-transform-origin: 200% center; transform-origin: 200% center; }
JavaScript
for (var i = 0; i < 9; i++)
$('body').append($('<div/>').attr('id', 'd' + i).attr('class', i < 3 ? 's' : 'e'))
$('.e').each(function(i) {
$(this).css({
left: (50 - i * 3) + 'px',
top: '200px',
backgroundColor: '#' + (i + 10).toString(16) + 'a' + (10 - i * 2).toString(16),
'-moz-transform': 'rotate(' + (i * 15) + 'deg)',
'-ms-transform': 'rotate(' + (i * 15) + 'deg)',
'-o-transform': 'rotate(' + (i * 15) + 'deg)',
'-webkit-transform': 'rotate(' + (i * 15) + 'deg)',
transform: 'rotate(' + (i * 15) + 'deg)'
});
});