Posts categorized as: Tutorials

Animate a Custom Dialog Box with CSS3 and jQuery

by Jake Rocheleau

December 7, 2011 in Tutorials

I am a particular fan of the jQuery UI library and have been following the team since it’s release. It features dozens of examples of how to pull together the best animations from such a small library of code. However in a lot of websites these days we are seeking to limit dynamic JavaScript blocks. As such CSS3 has become an important staple with building dialog boxes.

In this short tutorial I’d like to go over the process of building a simple fade-in dialog box. This may contain a signup/login form, input buttons, or even just a message to your visitors. The technique is pristine and gaining adoption in the sphere of web developers everywhere.

featured image demo screenshot - jQuery dialog box

Read More

Case Study: Building an ‘About the Author’ Box in WordPress 3.2

by Jake Rocheleau

November 7, 2011 in Tutorials

I’m sure those of you familiar with Wordpress blogs have seen the many author box designs. Most of the popular web design and social media magazines feature some type of author display box towards the bottom of each post. This features the author name, avatar, and generally a short bio along with profile links.

Wordpress users who are up to date with the latest 3.2.x release can easily implement this feature via custom plugins to extend WP functionality. But I want to explain how you can custom-code your own author box! I feel this method gives you more control over the layout and you can manipulate the HTML/CSS much further than with plugin codes.

Read More

25 Unique Adobe InDesign Tutorials for Newbies

by Jake Rocheleau

October 19, 2011 in Tutorials

Masters of the Adobe software suite often lean towards graphic design or web development. When creating documents for print this can easily be transcribed in both Adobe Photoshop and Illustrator. However, Adobe InDesign allows you to create entire projects such as a magazines, online e-books, cover pages, flyers, etc. But most people just haven’t had the time to learn how to utilize these features!

If you are feeling bold check out the showcase collection below. I put together 25 beginner-intermediate level tutorials which will get you more familiar with InDesign. Once you understand what can be accomplished it may change your entire workflow!

Business Card Design

Read More

How to Animate Threaded Comments with CSS and jQuery

by Jake Rocheleau

September 28, 2011 in Tutorials

With many social applications the use of threaded comments has become a staple in functionality. Webmasters today are focusing much more on user experience rather than content generation, and because of this there has been a rise in custom animation effects.

Below I’ll be going over a guide to building your own custom jQuery threaded comments from scratch. For the ease of our tutorial we won’t be using any backend system to actually store the data anywhere. This means no MySQL databases or PHP calls to a server – all comments are added in-page and will be lost upon page refresh.

jQuery Animated Comments Thread

Read More
Page 11 of 23« First...910111213...Last »