New Blog Design and Demos

I was really hating my last design, so after saying I was going to do it for months I finally decided to redesign the blog. There’s a few things left to do like styling comment boxes, finishing the mobile version, and a few finishing touches here and there. My favorite part though about going to a design with so much white space is the ability to have some of my demos as the background. I will of course however be adding an option to turn them off for those of you who get distracted or think they are just plain ugly.

I finally feel like I can start writing some articles about my demos, games in progress, and everything else!

CSS3 Animations are Fun!

So I decided to try out webkits css3 animations. Been seeing cool things crop up lately and I wanted to try my hand at doing my own animations, and see what they are capable of. I came up with a timed rotary counter. The below example uses no images, or javascript, its all css. I cant wait until this is standard.. no more clunky markup for shadows, or creating gradients in photoshop.

Project Link

Overall the webkit css animations aren’t that difficult. The trickiest part was giving the illusion of the counter looping around. I just did this by adding a 0 at the end of the element, and changing the top position back to the original value at the end of the animation.

A New look

Was a bit sick of the older design, it had some weird issues plus honestly I really began to hate it. I am liking this one a lot more, kept the whole light bulb concept from the old design, but other than that pretty much everything else is different. Wanted to incorporate text shadows too, I think they look slick in modern browsers. It also gave me a chance to check out how themes are done in WordPress 3.0, they seem easier, and the CSS is definitely much cleaner. All I needed to do was modify the default 2010 design slightly, and I needed to make maybe 5 markup changes overall.

Cellular Texture Generation with JavaScript and Canvas

Been messing with canvas again, and put together a little demo that creates procedural cell looking textures, based off of the Worley algorithm. You can achieve some pretty amazing results, also added the option to animate, but since the algorithm has not been optimized yet you have to keep the dimensions and number of points low. Also need to implement tiling. Heres a few examples of what you can produce with some minor changes in distance calculation for points. You can check out the generator here.

Michiganwakeup.com Site Design

Just finsihed up another site for a client, http://www.michiganwakeup.com . They were very pleased with it. They asked for a site that was very simple and to the point. I still feel as if there is something missing.. but I ha a 48 hour turn around time for this so the I had to get developing pretty fast on the design. I guess there is always Wake Up Michigan 2011.

Aviary Raven

This site is awesome. I found this a while back when they created Pheonix basically an online photoshop. Today I was on Digg and I found an article related to Raven its a fantastic application very similiar to Adobe Illustrator. The great thing (besides the fact that I can access it anywhere in the world) is that its totally cross browser even supporting IE6, which unfortunatly I am currently married to it at my job….

Anyway if you don’t have the $650+ to throw down on any of the Adobe products these products from Aviary are a great alternative, and I will be using them pretty often in the near future.