post this at del.icio.uspost this at Diggpost this at Technoratipost this at Newsvinepost this at Ma.gnoliapost this at Furlpost this at Blinklistpost this at Spurlpost this at Wistspost this at Redditpost this at Farkpost this at Blogmarkspost this at Yahoo! my webpost this at Blinkbitspost this at Connoteapost this at de.lirio.uspost this at feedmelinkspost this at LinkaGoGopost this at Netvouzpost this at RagSugarpost this at Scuttlepost this at Shadowspost this at TailRankpost this at Smarkingpost this at Kinjapost this at Winkpost this at Mr. Wongpost this at Netscapepost this at Windows Livepost this at StumbleUponpost this at Google Bookmarkspost this to Twitter


CSS Based Pixel Art

So I got bored the other day… really bored. After spending the whole day working on client projects, I felt the need to just relax and have a little fun. A person can only tolerate starting at a computer monitor for so long before they start pulling their hair out. Realizing that I haven’t had a chance to sit down and do anything fun, useless and amusing with CSS lately I decided to crack open the old sketch book and go to town.

The first page I opened to had a little Super Mario Bros. warp pipe doodle on it that I drew one day in a meeting. Seeing as how Super Mario Bros. 3 is one of my all time favorite games, I thought it would be fun to pay tribute to Mario and Nintendo with a series of pixel art like images created using nothing more than XHTML and CSS. Yep, you read that right! Not one image was harmed (or used) in the creation of these pieces!

When I have more time I want to throw together a nice tutorial for others to have fun with this. For those of you that like to dabble on your own, please feel free to take a look at the code. Pretty much all I did was draw an image on a grid and than recreate the grid with a series ofdiv containers. I could have used tables but I felt using the divs would be more fun. So far I have not found any usefulness for this latest project other than making me smile.

For today, I’ll leave you with a Super Mario Bros. (NES) Warp Pipe as well as a Super Mushroom. Be on the lookout for more pieces to be released by weeks end!

VIEW

This entry was posted on Nov 15, 12:54 AM by Rocco Augusto. You can skip to the end and leave a response using the comment form.

2 Responses to "CSS Based Pixel Art"

    1. Jonathan Miller says:
      Nov 27, 04:42 PM

      I saw your site, from a blog listing and don’t wish to comment as I don’t have any real CSS experience; my web technology skills are functional, varied, rather like a jack-of-all-trades than compared to, say, a PHP, AJAX or FLASH guru. It’s like learning to master a musical instrument or spoken language; focus and direction are somketimes issues for me as I don’t earn my living from IT but use it as a hobby and occasionally to supplement my teaching in class as a science teacher (in China) or update my website.

      What do you recommend: focus on one area, say ONE programming language (for server/database access) or dabble in several to use on a “when needed” basis, but may be not competent enough for a career! It seems that most are either designers with an artistic flare for digital media or more academic programmers: to be expert in both is a monumental, anti-social and time consuming task – but it keep does you out-of-mischief!


    1. Rocco says:
      Nov 27, 04:51 PM

      Hello Jonathan,

      Personally, I would recommend dabbling in anything you can get your hands on. While I know a ton of programmers and designers that are only masters of one thing, their skill set is limited to just that, one thing. At the end of the day though, it really depends on where your passion lies. I myself find all technology fascinating so I tend to play with everything that crosses my path… it makes life more interesting!

      On the other hand, if you’re only passionate about CSS or PHP or Ruby on Rails or anything else that you can think of, dabbling in tons of other languages or technologies would most likely become daunting and unbearable over time.

      It’s all in the eye of the beholder but I personally believe knowledge is power so learn all you can while you can!

      Best,
      Rocco