SpyreStudios

Web Design and Development Magazine

Archives for September 2011

Design a Full HTML5/CSS3 Template Replica of Digg v3

by

Social media junkies on the turn of the year 2004 surely remember Digg. It was the powerhouse of social news, all the techies would flock to Digg on a daily basis. And it’s been through quite a few changes recently with the v4 redesign. However I fondly remember Digg’s classic appeal running under v3 as the most accepted web interface.

Thus I’ve taken the liberty to re-code the entire front page template into HTML5/CSS3! And in this short tutorial I’ll be introducing you to some of my techniques. Additionally I’ve offered the source code completely free to download for your own usage. Much of the design I’ve had to piece together through the Wayback Machine Internet archives.

Digg v3 Template hand-coded into HTML5/CSS3

19 CSS3 and jQuery Tutorials for Perfect UI Design

by

I’m sure we’re all aware of how popular jQuery has become. And with the recent standards of HTML5 and CSS3 being released, web designers have been jumping all over this to build very creative content. I have particularly been focused on user interface design and have found a lot of fantastic tutorials around the web.

Check out our list of the top jQuery and CSS3 tutorials below. These pertain to prettying up your website with rounded corners, custom cursors, CSS animations, and a ton of other effects. If you have your own tutorials or would like to share a unique resource please add your conversation in the comments area below.

CSS3 Rounded Image with jQuery

26 Outstanding Social Network User Profile Layouts

by

The Internet has given rise to a slew of networked communities. User profile pages have become the norm for cloned systems such as Facebook, Digg, Twitter, and others. This trend has converted even the most basic websites into social havens for users.

Below I have cataloged 26 of the best profile designs found around the web. These feature tons of advancements including block stats, avatars, profile names, and a few other nifty features. Let us know your thoughts on the design gallery in our discussion area below.

Digg v4

33 Useful Photoshop PSD Freebies for the Web

by

Web designers have been growing en masse for quite some time. And with this dramatic rise in popularity of designing for the web more artists have begun to release their work public. Icons, vectors, layouts, boxes, buttons, badges, and a whole slew of freebies! I’ve gathered 33 of my personal favorite PSDs found around the web.

All web designers should at least take a peek a the listing below. I can’t guaranteed you’ll find anything you need. But it’s always handy to have a backup folder where you can store graphics and PSDs for later usage.

Sweet Navigation

Win 1000 Business Cards from Next Day Flyers!

by

Next Day Flyers has offered to give 1 lucky reader a set of 1000 full color business cards! To enter this contest simply make a comment on the post. For fun, include the company name you would promote with your 1000 beautiful new cards!

About Next Day Flyers

Trusted by more than 100,000 customers, Next Day Flyers prides themselves on top quality and the fastest turnaround times in the printing industry. For this giveaway they are focusing on their business card printing. However, you should also consider using them for brochures, postcards, greeting cards, even specialty die cuts.