About Me

nerd.of.steel: Rocco Augsuto

I am a Web Developer, Consultant, and Microsoft MVP (Most Valuable Professional) based out of the City of Roses - Portland, Oregon. I have over 15 years of education and experience in the art of Web Design and Development and have no plans to stop my quest for knowledge anytime soon. Over the past year I have been moving into the mobile Internet space and started developing applications for the Google Android platform.

CSS Based Pixel Art

Posted: Nov 15, 12:54 AM

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

2 Responses to "CSS Based Pixel Art"

  1. Jonathan Miller said:

    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!

  2. Rocco said:

    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