A while ago, the popular tech blog TechCrunch launched a new design for their website. Along with this design, they released a new logo. I wanted to generate this logo in HTML using jQuery.
This logo looked like the perfect candidate to do so, since it uses huge pixels and only a couple of colours (4 shades of green). With only little HTML, CSS and jQuery, I was able to generate this logo with not much effort.
Did you check out the demo to see what we’re going to do? This is how you can generate this pixellogo yourself!
HTML
As always, the HTML is kept really clean. For this demo, we only need one container that will hold all the "pixels" from the logo.
<div id="techcrunch">
<!-- jQuery will inject the HTML here -->
</div>
Take note of the id which is used, since we refer to that in the CSS and the jQuery.
CSS
On to something more interesting, the CSS. As you can see, each pixel has a fixed width and height which will fill the pixellogo.
#techcrunch {
width:240px; height:120px; margin:0 auto; }
.pixel { width:10px; height:10px; float:left; }
.shade1 { background-color:#24e100; }
.shade2 { background-color:#1cbe01; }
.shade3 { background-color:#159700; }
.shade4 { background-color:#0a6300; }
The different shades are numbered. This is essential for the technique we use with the jQuery. The .shade1 is the lightest shade of green, the .shade4 the darkest.
jQuery
Now to generate the pixellogo! The code isn’t that hard to understand (I added some comments as well), so just look at it first.
// Two dimensional array that represents the logo
// Each number represents a different shade, which is referred to in the CSS
var techcrunchLogo =
[
[1,1,1,1,1,1,1,2,1,2,2,2,0,0,0,0,3,3,4,4,4,4,4,3],
[1,1,1,1,1,1,1,2,2,2,2,2,0,0,0,0,3,4,4,3,4,4,3,3],
[1,1,1,1,1,1,2,1,1,2,2,3,0,0,0,0,4,4,4,4,3,2,2,3],
[1,1,2,2,1,2,1,2,2,2,1,1,0,0,0,0,3,4,4,3,2,2,3,2],
[0,0,0,0,2,2,2,2,0,0,0,0,2,2,2,3,0,0,0,0,0,0,0,0],
[0,0,0,0,1,1,2,3,0,0,0,0,2,3,3,3,0,0,0,0,0,0,0,0],
[0,0,0,0,1,2,3,3,0,0,0,0,2,3,3,4,0,0,0,0,0,0,0,0],
[0,0,0,0,2,2,2,2,0,0,0,0,4,3,4,4,0,0,0,0,0,0,0,0],
[0,0,0,0,2,3,2,2,0,0,0,0,3,4,4,4,4,3,4,3,3,2,3,3],
[0,0,0,0,2,2,2,3,0,0,0,0,4,4,4,3,4,3,3,3,3,3,2,2],
[0,0,0,0,2,3,3,3,0,0,0,0,4,4,4,4,3,3,2,3,3,2,2,2],
[0,0,0,0,3,2,3,3,0,0,0,0,4,4,3,4,4,3,3,2,2,2,2,2]
];
// Generate the logo by iterating over the techcrunchLogo arrays
for(var i = 0; i < techcrunchLogo.length; i++) { // Rows
for (var j = 0; j < techcrunchLogo[i].length; j++) { // Columns
$("<div />")
.addClass("pixel")
.addClass("shade" + techcrunchLogo[i][j])
.appendTo($("#techcrunch"));
}
}
As you might have seen, the most important part is the techcrunchLogo variable. Each number represents a different shade, which is referred to in the CSS. We than iterate over the arrays to "paint the pixels" from the logo, and add them to the container.
That’s all there is to it! We now generated the TechCrunch logo in HTML using some nifty jQuery and CSS.
Conclusion & Download
I hope you understand this was just a little fun project; In theory, you could even make the CSS .pixel class have a width and height of 1px and generate anything you like. Still, this looked like the perfect example for me since the pixels were big and not a lot of colours are used.
What do you think of this technique? Would you like to improve the code? Would you rather see something different? Feel free to share!
