How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD

I have a dirty little secret, I hate slicing Photoshop files. By that I don’t mean that I hate turning PSD comps into websites, I mean that I hate Photoshop’s slicing tools. The whole process makes my PSD look busy, cluttered and overly complicated so I usually skip it altogether and instead opt to manually crop and save out images individually as needed.

I have a dirty little secret, I hate slicing Photoshop files. By that I don’t mean that I hate turning PSD comps into websites, I mean that I hate Photoshop’s slicing tools. The whole process makes my PSD look busy, cluttered and overly complicated so I usually skip it altogether and instead opt to manually crop and save out images individually as needed.

In order to fight this tendency and attempt to see the true usefulness of Photoshop’s slicing tools, I embarked on a mission to learn all the intricacies of how slicing works. Below is a collection of tips and tricks that resulted from this journey. Hopefully, you’ll learn a thing or two you never knew!

There are Three Types of Slices in Photoshop

Three types of slices!? This was one of the most interesting and surprising things that I learned. Having not really experimented with the slicing features too much, I just figured there was only one way to go about it. I was wrong.

The three different kinds of slices are User Slices, Auto Slices and Layer Based Slices. To begin, let’s talk about the two you’re probably familiar with: User Slices and Auto Slices. These are very closely related, in fact, one creates the other.

As you know, to slice a PSD you start by grabbing the Slice Tool (C) and drawing a box around the area that you want to export as a standalone image. By adding slices to all the areas of your comp that you want to do this to, you can quickly and easily optimize and export several images at once.

What I’ve done here is draw a box around the logo at the top of the page. This one action created both a User Slice and several Auto Slices. When you create a slice, Photoshop assumes that your end goal is to turn the entire PSD into a series of slices. I personally think this assumption is quite annoying, and we’ll discuss later how to get around it. For now, just know that because of this assumption, Photoshop extends the edges of your slice all the way across the PSD, thereby creating several other sections automatically. This is illustrated in the image above.

Tricks for Working with User and Auto Slices

While we’re on the topic of User and Auto Slices, let’s go over some of the obvious and not-so-obvious features so that you can really get a feel for what tools and options you have at your disposal.

Moving and Editing Slices

Once you’ve made a slice, you should see controls similar to that for a Free Transform that will allow you to move and edit it. You can also use the Slice Select Tool to ensure that you’re only editing current slices and not creating new ones. This tool is found under the Slice Tool in the fly out menu.

Converting Auto Slices to User Slices

Throughout the entire slicing process, Auto Slices are continually created and updated and they stay distinct from user slices. Later, we’ll look at how to export them as files or ignore them when exporting, but for now let’s take a look at how to turn an Auto Slice into a User Slice.

The process is extremely simple. First, you have to select the auto Slice using the Slice Select Tool. Next, select the Auto Slice that you want to convert and hit the “Promote” button near the top.

That’s it! Now the Auto Slice should change color, indicating that it is now a User Slice. Now you’ll have greater control over its size and how it exports.

Auto-Dividing Slices

When you have a series of objects that are distributed horizontally, vertically or even in a grid, you don’t have to take the time to go through and make a slice around each individual unit. Instead, you can make one slice that covers all of the objects and tell Photoshop to do the rest.

To do this, first make your big slice by drawing a box around all of the objects. Then, with the Slice Select Tool enabled, click the “Divide” button at the top of the page.

This should bring up the “Divide Slice” dialog box shown above. Using this window you can quickly insert extra vertical and horizontal slices. If they don’t align right, you can adjust them manually after hitting the “OK button.”

Slices from Guides

Many of you are probably much more comfortable working with guides than slices inside of Photoshop. The reality is that they both work very similar, but the guides system admittedly feels a bit smoother.

If this is how you roll, this fits perfectly into an easy workflow for creating slices. Simply drag out guides to slice up your PSD and ignore the slicing tools altogether. Then, once you’re all finished, select the Slice Tool and hit the “Slices from Guides” button at the top.

Naming Slices

One of the annoying things that will bug you the first time you work with slices is that when you export them, the resulting files all come up with big ugly names that aren’t at all meaningful. To fix this, you need to make sure you’ve gone in and named each slice appropriately. Whatever name you assign will then be carried over as the file name upon export.

To name a slice, simply double-click on its contents with the Slice Tool selected. This will bring up the dialog below.

Notice that you have several options here, including setting the color for the slice, manually inputting the dimensions and assigning a name. There’s also a bunch of HTML stuff like URL, Target, etc. It turns out, Photoshop can take your sliced PSD and output it as a web page. Some bash this functionality because the default settings create a table-based layout, however you can switch these to utilize CSS.

Now, don’t get too excited. Even with the CSS options selected, Photoshop is still pretty rotten at building a website for you. You’re much better off doing it by hand or at least taking it over to Dreamweaver, which means you should ignore all these other options completely.

Layer Based Slices and Why They’re Better

One of the main features that made slicing suck a lot less for me is Layer Based Slices. These are a particular brand of User Slices that are superior in several ways.

As the name implies, these slices are not based on a box that you draw manually but instead automatically adhere to a layer’s bounds. To create a Layer Based Slice, select a layer in the Layers Palette, then go to the menu and select Layer>New Layer Based Slice. Note that this even works if you have multiple layers selected, each layer will simply be turned into its own slice!

Obviously, in order for this to work properly, you have to be really be good about how you structure your layers. You should be building your mockups as fully layered and organized files anyway so this shouldn’t be a problem.

The Advantage

One of the main reasons that normal slices are so lame is that it creates a lot of extra work if you want to go back and tweak your designs. After you shuffle the artwork around, you have to then go back and move all your slices to align with the new layout. This annoyance is why I always just manually save out the individual pieces through cropping.

However, Layer Based Slices are actually quite intelligent. When you move around your layers, your slices automatically follow. If you add an effect that changes the bounds, such as an Outer Glow, the slice expands to include it. If you transform the layer to 30% of its original size, again the slice updates automatically!

Obviously, there’s a clear argument here for using Layer Based Slices whenever possible as it saves you an incredible amount of time in the inevitable re-design stage.

Killing the Clutter

Another of my biggest annoyances with slicing is that it can create a really cluttered looking PSD. This is mostly do to the Auto Slicing side effect.

As an example, take a look at the image below (it’s a bit over-simplified here but you get the point). Here I only really only wanted to create three slices, but Photoshop has automatically gone in and turned it into twelve slices!

I don’t know about you, but I don’t build webpages as one big collection of images all crammed together. So I simply don’t want all these extra slices! I’m not going to export these areas into images, so all they’re doing is adding noise to my interface. When I see a document like this, the slices cease to be a meaningful tool for me.

To fix this, we can grab the Slice Select Tool and hit the “Hide Auto Slices” button at the top of the screen. This does exactly what the name implies, ditches all of those nasty Auto Slices from view.

Look how much simpler our document becomes! The few slices that we used are clearly identifiable and therefore retain their usefulness. In my opinion, this method of viewing your slices is greatly preferred. This is one of those cases where Photoshop simply tries too hard to predict my preferred workflow and ends up overdoing the features.

Exporting Slices

This is where the usefulness of slicing really comes into play. Without slicing, you have to save out each portion of your comp one at a time. The workflow would be something like the following: make a selection, crop, optimize in Save for Web, save, undo crop, and repeat. That’s a lot of unnecessary steps! Let’s see how it works with slicing.

After you’ve finally figured out all the ins and outs of slicing and have your PSD ready to go, it’s time to go to the File menu and select “Save for Web and Devices.” You’re probably familiar with this dialog already but it’s a bit different when you have slices in your document.

If you have any slices, the preview of your document in this window shows all of them (unfortunately, this includes those annoying Auto Slices). From here you can simply click to select each slice and optimize the settings for each individually. This includes file type, quality, etc. So in one session, you can set up an export of three JPGs and a PNG, each at a quality that you deem appropriate.

Once you’ve adjusted everything to your liking, hit the “Save” button. A dialog should pop up that allows you to choose a folder to place all of the images in. Remember that we already set up the naming convention so just leave that as is. The key here is to make sure that you’re only exporting either “All User Slices” or “Selected Slices”.

Depending on your desired workflow, either of these options works great. The default option is simply “All Slices”, which will include not only your User and Layer Based Slices, but also the completely useless Auto Slices that you’ll just have to throw in away anyway. Save yourself the trouble and ditch these here before the actual save takes place.

Conclusion

We went over a lot of pretty technical Photoshop stuff today so I’ll try to sum it up nicely. First, slicing a PSD can really feel like a clunky process if you don’t know what you’re doing. Make sure you really look around in Photoshop and experiment with the tips above to ensure that you’re making the most of the tools available to you.

Secondly, remember that there are three types of slices: Auto Slices, User Slices and Layer Based Slices. Auto Slices are pretty lame and are more of an unfortunate side effect to slicing than a helpful feature. You don’t have to agree with me on this, but if you do, hide them so they’re not so distracting. User Slices are simply those that you intentionally create. You can adjust them with the Slice Select Tool and name them by double-clicking on the contents. Layer Based Slices are just like User Slices, only they are much smarter because they automatically adhere to a given layer’s bounds. You can move, resize and add effects to a layer and the slice will continually update on its own.

Finally, when exporting a document with slices, choose the Save for Web command and optimize each slice as its own file. Also make sure to only export the User Slices or Selected Slices, otherwise all of the Auto Slices created by Photoshop will fill up you images folder.

This is probably way more than you ever wanted to know about slicing in Photoshop, but hopefully this has helped you spot the inefficiencies in the system so that you can adjust and still take advantage of this useful set of tools without being hampered by its awkwardness.

Leave a comment below and tell us how you slice a PSD. The workflow that I’ve set up here is just one of many possible solutions and I’m anxious to hear and learn from yours!


 

Looking for a reliable PSD to HTML development company? We have all that it takes to create beautiful, responsive markups that render perfectly across platforms and devices.

Reach out to us to discuss your project and get back an immaculately coded HTML template in just a few hours!


 

Frequently Asked Questions

What is PSD slicing and why is it important in web design?

PSD slicing is the process of dividing a Photoshop Document (PSD) into smaller image files that can be used on a website. It is important in web design because it allows designers to create visually appealing, custom web designs that load quickly and efficiently. By slicing a PSD, designers can extract images and graphics, optimize them for the web, and create a website that accurately reflects their design vision.

Can you explain the difference between raster and vector slicing?

Raster slicing and vector slicing are two different techniques used to create images for websites. Raster slicing involves dividing a bitmap image (such as a photograph or scanned image) into smaller pieces, while vector slicing involves dividing a vector image (such as a logo or illustration) into smaller pieces. Raster images are made up of individual pixels, so when they are resized, they can lose quality and become pixelated.

Vector images, on the other hand, are made up of shapes and paths, so they can be resized without losing quality. As a result, vector slicing is typically preferred for creating images that need to be resized frequently (such as icons or logos), while raster slicing is more commonly used for photographs and other images that do not require resizing.

What are some best practices for optimizing sliced images for web use?

Optimizing sliced images for web use involves reducing their file size without compromising their quality. Some best practices for optimizing sliced images for the web include:

  1. Using the appropriate file format (JPEG, PNG, GIF) for the type of image
  2. reducing the image size to the smallest dimensions possible.
  3. Using compression techniques to reduce file size without losing quality
  4. Minimizing the number of colors used in the image.
  5. Removing any unnecessary metadata or hidden layers in the image
    using CSS techniques like sprites and lazy loading to reduce the number of HTTP requests.

By following these best practices, sliced images can be optimized for the web, resulting in faster loading times and a better user experience.

What are some common mistakes to avoid when slicing PSD files for web design?

There are several common mistakes to avoid when slicing PSD files for web design, including:

  1. Not organizing layers properly, which can lead to confusion and errors during slicing.
  2. Saving images in the wrong file format or at the wrong resolution, which can affect image quality and load times.
  3. Failing to account for different screen sizes and resolutions, which can lead to inconsistencies in the final design.
  4. Neglecting to optimize images for the web, which can result in slow loading times and a poor user experience.
  5. Forgetting to test the sliced images on different devices and browsers to ensure that they display correctly.

By avoiding these common mistakes, designers can ensure that their sliced images are optimized for the web and accurately reflect their design vision.

Can you provide some tips for slicing images with transparency or complex backgrounds?

When slicing images with transparency or complex backgrounds, it is important to pay attention to the details and take extra care to ensure that the final image looks good on the web. Here are some tips for slicing images with transparency or complex backgrounds:

  1. Use the right file format for the type of image (PNG is often a good choice for images with transparency).
  2. Carefully select the area of the image to slice, paying attention to the edges and any areas of transparency.
  3. Consider using a layer mask or alpha channel to isolate the area of the image that you want to slice.
  4. Use anti-aliasing to smooth the edges of the sliced image and avoid jagged edges or pixelation.
  5. Test the sliced image on different backgrounds to make sure that it looks good and blends seamlessly into the design.

By following these tips, designers can create high-quality sliced images with transparency or complex backgrounds that accurately reflect their design vision.

Are there any limitations or considerations to keep in mind when slicing PSD files for email templates or other non-web applications?

Yes, there are several limitations and considerations to keep in mind when slicing PSD files for email templates or other non-web applications. For example, email clients often have limited support for certain HTML and CSS elements, which can affect how the sliced images are displayed.

Additionally, email templates typically have stricter size limitations than web pages, so designers need to be mindful of the file size of the sliced images.

It is also important to consider the aspect ratio of the sliced images and make sure that they look good on a variety of devices and screen sizes. By keeping these limitations and considerations in mind, designers can create effective sliced images for email templates and other non-web applications.

Effortless Full Screen Background Images With jQuery

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

Today we’re going to build a simple and fun webpage for the sole purpose of showing off Fullscreenr, a great little jQuery plugin that makes it easy to add a background image to your site that automatically adjusts to the window size.

We’ll also throw in some @font-face and rgba action to keep things modern and educational on the rest of the build. Let’s get started!

 

Demo

Just so you can get a feel for what we’re building, check out the demo below. To see the jQuery in action, resize the browser window and watch how the image adapts dynamically.

View the demo

screenshot

Now that you’ve seen how it works, let’s build it!

Step 1: Grab Fullscreenr

screenshot

The first thing you’re going to want to do is go to the Fullsreenr website and download a copy. Grab the JS files and throw them into a folder with a basic website framework: html, css and images folder.

Step 2: Start the HTML

To begin the HTML, thrown in the code for an empty page and add the references for the stylesheet and the two JavaScript files.

1
2
3
4
5
6
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- JavaScript codes -->
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>

Step 2: Select a Background Image

Before we insert the code for placing our background image, we’ll need to know the size. Which of course means we need to find an image.

I grabbed the image below by Faisal.Saeed on Flickr Creative Commons. It’s an awesome snowy mountain scene that should make the perfect setting for our site.

screenshot

Next, I sized the image so that it would be 907px by 680px. These are the dimensions that we’ll use in our next step.

Step 3: Insert the Fullscreenr Snippet

In the demo files of the Fullscreenr download, you should find the following JavaScript snippet to enable the plugin. I’ve customized it a bit with the image dimensions specified above.

1
2
3
4
<script type="text/javascript"
    var FullscreenrOptions = {  width: 907, height: 680, bgID: '#bgimg' };
    jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

All you have to do for your own version is change the hight and width to match that of your own image.

Step 4: Body HTML

Next up, there is a chunk of HTML in the demo page that you’ll need to grab. The structure may seem a little funky but really all the developer has done is applied the background image to the body and created a basic container (realBody) for you to then add all the rest of your content to. If you don’t like the div ID names used by the developer, feel free to change them to something more conventional.

1
2
3
4
5
6
7
8
<!-- This is the background image -->
<img id="bgimg" src="img/mountains-907x680.jpg">
<!-- Here the "real" body starts, where you can put your website -->
<div id="realBody">
    
<!-- Here the "real" body ends, do not place content outside this div unless you know what you are doing -->
</div>

As you can see, all we’ve done here is throw in the background image.

Step 5: Add the CSS

Finally, throw in the CSS below to make everything work properly. This is necessary to make sure your content will scroll correctly and stay positioned properly in the stack.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
body {
    overflow:hidden;
    padding:0;margin:0;
    height:100%;width:100%;
}
#bgimg {
    position:absolute;
    z-index: -1;
}
#realBody{
    position:absolute;
    z-index: 5;
    overflow:auto;
    height:100%;width:100%;
    background: url('../img/raster.png');
}

And with that, you’re done! You should now have a background image that dynamically scales with the browser window. The transition is super smooth and works brilliantly.

screenshot

The plugin comes with an dotted pattern image overlay, shown below in a zoomed-in view. If you don’t like this effect, simply leave it out!

screenshot

If you’d like, you can stop here and proceed with your own design. If you’re interested on where to go from here, I’ll finish up with some fun design.

Step 6: Add a Background Div and Header

Now that we’ve got our background image, we want to center a div over the top of it and give it a background fill. We’ll also give it a basic header that I thought seemed appropriate given the snowy background image.

1
2
3
4
5
6
7
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
    </div>
</div>

Next we’ll style these two elements with CSS (insert this in addition to the CSS above).

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#container {
    width: 800px;
    height: 1000px;
    margin: auto;
    margin-top: 60px;
    padding-top: 10px;
    background:rgba(0,0,0,.8);
    
}
#container h1 {
    color:#fff;
    font-family: 'KitchenpoliceRegular', sans-serif;
    font-size:60px;
    font-weight: normal;
    text-decoration:none;
    text-align:center;
}
@font-face {
    font-family: 'KitchenpoliceRegular';
    src: url('KITCHENPOLICE-webfont.eot');
    src: local('‚ò∫'), url('KITCHENPOLICE-webfont.woff') format('woff'), url('KITCHENPOLICE-webfont.ttf') format('truetype'), url('KITCHENPOLICE-webfont.svg#webfontCRDciSXC') format('svg');
    font-weight: normal;
    font-style: normal;
}

This is a big chunk of code but it’s all super basic. First, we gave the container a height and width, then set the margins to auto. This gives us a vertical strip that automatically stays centered on the page. The background color for the container has been applied using rgba. This will give us a nice transparent container that lets some of that nice background image show through.

Next, we used applied some basic styles to the header and customized the font using @font-face. I used a font called Kitchen Police and an @font-face kit from FontSquirrel.

At this point, your page should look like the image below.

screenshot

Step 7: Add a Header Image

The next step is extremely easy. All you have to do is toss in an image that’s the same width as the container (800px).

1
2
3
4
5
6
7
8
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
    </div>
</div>

And with that your image should fall right into place without any extra styling.

screenshot

Step 8: Add Some Text

In this step we’re going to add some basic filler text to the page and in the next we’ll add a grid of images. Since the text will hypothetically tie into the images, we’ll throw it all into a “grid” div.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="exampleDiv">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
        
    </div>
</div>

To style the text, we’ll first add a little margin to the top of the div. Then we apply basic color, size, and positioning to both the h2 tag and the paragraph tag. Notice I used some more @font-face goodness, this time with Lobster.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#grid {
    margin-top: 20px;
}
#grid h2{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    font-size: 30px;
    font-family: 'Lobster', sans-serif;
    margin-bottom: 3px;
    font-weight: normal;
}
#grid p{
    color: #fff;
    text-align: left;
    margin-left: 65px;
    margin-bottom: 3px;
    font-size: 12px;
    font-family: helvetica, sans-serif;
    margin-top: 0px;
    width: 650px;
    line-height: 18px;
}
@font-face {
    font-family: 'Lobster';
    src: url('Lobster_1.3-webfont.eot');
    src: local('‚ò∫'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontcOtP3oQb') format('svg');
    font-weight: normal;
    font-style: normal;
}

This should give you a nicely style block of text similar to that in the image below. Now we can move onto the final step!

screenshot

Step 9: Add the Gallery

To finish the page up, we’ll toss in a simple image gallery that is basically just a grid of nine JPGs. To give the photographers credit, I’ve linked each to the original source images on Flickr.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<img id="bgimg" src="img/mountains-907x680.jpg">
<div id="realBody">
    <div id="container">
        <h1>Welcome to Hoth</h1>
        <img src="img/walkers.jpg">
        
        <div id="grid">
            <h2>Good Times on Hoth:</h2>
            <p>Lorem ipsum dolor sit...</p>
            <a href="http://ow.ly/35afM"><img src="img/hoth1.jpg"></a>
            <a href="http://ow.ly/35ah9"><img src="img/hoth2.jpg"></a>
            <a href="http://ow.ly/35aim"><img src="img/hoth3.jpg"></a>
            <a href="http://ow.ly/35ajg"><img src="img/hoth4.jpg"></a>
            <a href="http://ow.ly/35ajY"><img src="img/hoth5.jpg"></a>
            <a href="http://ow.ly/35alw"><img src="img/hoth6.jpg"></a>
        </div>
        
    </div>
</div>

As the final piece of the puzzle, we’ll toss in some margins and borders to make the image grid look nice and styled.

1
2
3
4
5
6
7
8
#grid img {
    margin: 20px 10px 20px 10px;
    border: 3px solid #000;
}
#grid a:hover img{
    border: 3px solid #fff;
}

That should space everything and and finish up your page! Feel free to keep going and add in a navigation section, footer, sidebar and whatever else you can think of!

screenshot

Conclusion

jQuery and the Fullscreenr plugin present the easiest and best-looking solution I’ve found for scaleable background images. If you’d rather try the same effect with CSS, check out Chris Coyier’s methods on CSS-Tricks. Chris presents three possible alternatives, the last of which uses pure CSS and works much better than other CSS attempts I’ve seen.

As always, thanks for reading. If you liked the article give us a tweet, digg or any other social shout out you can come up with!

Best Resources for Learning WordPress Development

Odds are, if you’re a web developer, learning WordPress is either on your todo list or something that you’ve already committed yourself to. Learning to build WordPress themes is an excellent professional move that will open you to a wealth of new clients and personal opportunities.

Odds are, if you’re a web developer, learning WordPress is either on your todo list or something that you’ve already committed yourself to. Learning to build WordPress themes is an excellent professional move that will open you to a wealth of new clients and personal opportunities.

To follow up our article last week on tutorials for learning web design, below is a list of books and free tutorials specifically targeted at learning to develop for WordPress. Whether you’ve never heard of WordPress or are just looking to update your current WordPress skill set, there are plenty of resources below to get you on your way.

Free Tutorials

If you’re on a budget and need to learn quick, free tutorials provide a great way to get started and provide just enough information to help you pick up WordPress without bogging you down with too much unnecessary extras.

WordPress 3.0: Ultimate Guide to New Features (Six Revisions)

Many of the articles below are for older versions of WordPress so I wanted to begin by pointing out this guide to WordPress 3.0. The older articles still have plenty of solid information and relevant examples, just be sure to keep the newest version of WordPress in mind when reading them.

screenshot

How to Create a WordPress Theme from Scratch: NetTuts

“Following on from the recent article on “PSD to HTML”, this tutorial will look at taking a HTML/CSS template and turning it into a functioning WordPress theme. There is so much you can do when creating your own theme we couldn’t nearly cover it all. So, we’re going to look at how themes are structured, creation of the core files and splitting up that index.html file.”

screenshot

Designing for WordPress: CSS Tricks

“Over the last few weeks, I have been been doing a video screencast series on Designing for WordPress. It is a three-part series which covers downloading and installing WordPress on a server all the way to a completed theme.”

screenshot

Premium WordPress Theme Design: Design Reviver

“This time you’ll learn how to slice the design and convert it into XHTML + CSS, then I’ll show you how to use the css files to mock-up a WordPress template.”

screenshot

WordPress Theme Development Checklist: divtodesign

“As you might know, I have been diving into WordPress theme development and I’ve learned many tips and tricks along the way. I noticed I was forgetting about some small issues all the time. That’s why I decided to make a WordPress Theme Development Checklist. ”

screenshot

How To Create WordPress Themes From Scratch: ThemeTation

“I’m going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.”

screenshot

Creating WordPress Themes: Introduction

“This new series will begin with the basics and then I’ll proceed to more advanced techniques. I will also be incorporating different techniques that I’ve picked up from other developers that I’ve found to be extremely handy, and I’ll be providing links and credits to that info as I go along.”

screenshot

Developing a WordPress Theme: Dezinerfolio

“Instead of coming up with some more themes, we decided to write a tutorial on how to develop a wordpress theme which we are sure will help a lot of you to design as you wish and bring them out into wordpress. We are not too advanced wordpress developers but still we are sure the below tutorial will help you successfully develop a wordpress theme. Below you will learn to convert your xHTML CSS site into a Compact WordPress Theme (final output is same as the normal theme but here code is shorter and easier to understand).”

screenshot

How to Build a Custom WordPress Theme from Scratch: SpoonGraphics

“If you’re confident with your CSS and HTML, it’s not hard at all to step up to the challenge of building a custom WordPress theme. This overview shows the process of how my latest custom WordPress theme was built from design concept through to completed theme. See how the static design is split up into the various WordPress theme files, and discover how the simple PHP snippets can add that dynamic functionality of a blog.”

screenshot

Creating A Quality WordPress Theme: 12 Points to Consider (Noupe)

“But what exactly makes a WordPress theme great? How does one go about creating a quality theme? In fact, it’s not that difficult. You can do a few simple things while developing your theme—from the planning stage right through coding—to make it stand out from the legions of average (and below-average) themes out there.”

screenshot

Customize Your Own WordPress Theme: Vandelay Design

“An increasing number of businesses and website owners are using blogs as a means of communication with their customers and website visitors. If your business already has a website it is possible to have a blog that matches the look and feel of your existing website without doing a complete re-design and without paying thousands of dollars to have the blog developed. Using WordPress you can tailor an already existing blog theme to seamlessly flow with the rest of your website.”

screenshot

Designing and Coding a WordPress Theme From Scratch: DeveloperTutorials

“In this multi-part series I’ll detail how to create and design a WordPress theme from nothing more than your imagination using Photoshop, CSS, XHTML and PHP.”

screenshot

So you want to create WordPress themes huh?

“Creating a WordPress theme from scratch is not hard. I’ll hold your hand through it. Tutorials on this topic have been written before and the WordPress website also has guides for you to follow. But are those tutorials and guides really helpful to you when you don’t understand the lingo? Even I got lost while reading the WordPress guides.”

screenshot

Create Your Own WordPress Theme from an HTML Template

“In this article, I’ll show you how to take an existing HTML and CSS site template and convert it into a theme for WordPress. Of course, WordPress theming is much too vast a topic to cover entirely in a single article, so I’ll provide you with some resources at the end to further your learning. It’s hoped, though, that this article will serve as a good introduction and give you a solid foundation to start learning about creating your own WordPress themes.”

screenshot

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial (ThemeShaper)

“In Only 11 Individual Lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development.”

screenshot

Building Custom WordPress Theme

“This chapter will show you how to build a custom WordPress theme. Although the Codex site provides very good documentations on how to create a theme, but I find it too complicated for a beginner. In this tutorial, I will explain the basics of how WordPress theme works and show you how to convert a static HTML template into a theme. No PHP skill is required, but you need Photoshop and CSS skills to create your own design.”

screenshot

Books on WordPress

If you’re serious about becoming a professional WordPress developer, it’s time to pick up a good book on the subject. These are usually far more in-depth than free tutorials and really cover the material you need to know inside and out.

Below are a few great books to consider in your search. Some are physical books that you can purchase on Amazon, others downloadable PDFs.

Rockstar WordPress Designer: $29

“During the course of the book you’ll build THREE WordPress themes, a blog, a portfolio site and a general site with menus and submenus. Each theme demonstrates different aspects of WordPress theming and all three are packaged in with the book so you’ll have Photoshop, HTML, CSS and WordPress PHP files to refer to.”

screenshot

Beginning WordPress 3: $26.99

“WordPress is one of the most popular blogging and content management web templating platforms—it easily allows you and your business to make a statement about yourself and what you do. WordPress is also quite cost-effective, as it’s free for just about anyone to use. WordPress is colorful and flexible, and includes a variety of themes, templates, and plug-ins for you to explore and use. Beginning WordPress 3 aims to address these for the beginner who wants to start using and developing with WordPress.”

screenshot

WordPress For Dummies: $16.49

“The bestselling guide to WordPress, fully updated for newest version of WordPress. WordPress, the popular, free blogging platform, has been updated with new features and improvements. Bloggers who are new to WordPress will learn to take full advantage of its flexibility and usability with the advice in this friendly guide.”

screenshot

Smashing WordPress: Beyond the Blog: $29.69

“Smashing WordPress shows you how to utilize the power of the WordPress platform, and provides a creative spark to help you build WordPress-powered sites that go beyond the obvious. You will learn the core concepts used to build just about anything in WordPress, resulting in fast deployments and greater design flexibility. Inside, WordPress expert Thord Daniel Hedengren takes you beyond the blog and shows you how WordPress can serve as a CMS, a photo gallery, an e-commerce site, and more.”

screenshot

Professional WordPress: $29.69

“An in-depth look at the internals of the WordPress system. As the most popular blogging and content management platform available today, WordPress is a powerful tool. This exciting book goes beyond the basics and delves into the heart of the WordPress system, offering overviews of the functional aspects of WordPress as well as plug-in and theme development.”

screenshot

WordPress: Visual QuickStart Guide

“This book gives readers the tools they need to create beautiful, functional WordPress-powered sites with minimal hassle. Using the WordPress user interface as a baseline, authors Jessica Neuman Beck and Matt Beck walk new users through the installation and setup process while providing valuable tips and tricks for more experienced users. With no other resource but this guide, readers can set up a fully-functional and well-designed WordPress site that takes advantage of all the features WordPress has to offer.”

screenshot

Using WordPress: $16.49

“WordPress has grown into the #1 blogging tool in its category: several million bloggers have downloaded this powerful open source software, and millions more are using WordPress.com’s hosted services. Thirty-two of Technorati’s Top 100 blogs now use WordPress. Using WordPress is a customized, media-rich learning experience designed to help new users master WordPress quickly, and get the most out of it, fast! It starts with a concise, friendly, straight-to-the-point guide to WordPress. This exceptional book is fully integrated with an unprecedented collection of online learning resources: online video, screencasts, podcasts, and additional web content, all designed to reinforce key concepts and help users achieve real mastery. The book and online content work together to teach everything mainstream Wordpess users need to know.”

screenshot

Head First WordPress: A Brain-Friendly Guide to Creating Your Own Custom WordPress Blog ($23.09)

“Whether you’re promoting your business or writing about your travel adventures, Head First WordPress will teach you not only how to make your blog look unique and attention-grabbing, but also how to take advantage of WordPress platform’s more complex features to make your website work well, too. You’ll learn how to move beyond the standard WordPress look and feel by customizing your blog with your own URL, templates, plugin functionality, and more. As you learn, you’ll be working with real WordPress files: The book’s website provides pre-fab WordPress themes to download and work with as you follow along with the text.”

screenshot

Closing Thoughts

I hope the resources provide the catalyst you need to begin your journey as a WordPress developer. In closing, I want to remind you that the official WordPress codex is definitely on of the best resources out there for all things WordPress.

Let us know in the comments below if we left out any of your favorite tutorials or books for learning WordPress.

30 Gorgeous and Versatile CSS Menus

Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site. When you turn your PSDs into HTML, make sure your navigation is legit!

Sometimes the navigation menu can be one of trickiest parts of the design process. This single area can set the tone for the usability of the entire site.

Today we’ll look at 30 inspiring examples of good menu design. Though many are pure CSS, others add in some images and/or JavaScript to increase the aesthetic and functionality.

Delving Deeper

It’s always more helpful to get a feel for the process of the development than to merely see an image, so in this section we’ll briefly discuss the aesthetic of each menu and how the developer accomplished the effect. This way you can gain inspiration into how to use new methods to create your own unique menus.

Silk Tide

This is one of the most minimal menus on the list. It’s basically just plain text with an extended blue box rollover but it’s really easy to implement and results in a nice effect.

screenshot

Glenn Sorrentino

This example uses CSS borders on the top and bottom of the menu that increase in thickness when you hover over them.

screenshot

Strutta

If you have a textured background, consider using transparency in your menu to increase the aesthetic. This could easily be done with RGBa in CSS3.

screenshot

Elbow Park

Another example of transparency in the navigation area. This one uses a similar effect to the first example with the selection box extending up to the top of the page. This increases visibility and makes for a more seamless design.

screenshot

Thoughtbot

As you rollover these buttons the background changes to a brighter red. This combined with the glossy look (accomplished with a transparent PNG) creates the illusion of the area lighting up.

screenshot

Toffee Nut Design

This beautiful example uses CSS sprites for the navigation. The entire menu is one PNG showing each of the tabs in three states: off, on, and on+selected.

screenshot

Safarista

Here we see each section of the navigation as a hybrid of image and text. The icon, gradient and smaller background make each section’s image while the larger text is styled HTML with a underline hover effect.

screenshot

David Jonsson

Another simple hover effect that bleeds to the top. This one had hidden icons that only display when you mouse over. A nice effect!

screenshot

Asvalia

I really like the colors and the crooked text on this menu. The glowing rollovers are perfect.

screenshot

Bonsai Studios

This one is an extremely simple vertical menu with transparency and a darkening hover. It gets the job done, looks great and can be built in minutes.

screenshot

Great Expectations Church

Another vertical navigation menu. This one implements some basic but attractive icons and a background GIF with a gradient for the hover.

screenshot

Ryan Couser

This one uses some simple sprites to accomplish the hover. Each icon is an image with both the on and off states.

screenshot

Kk Media

Here we see a vertical menu with more detailed icons. Each link is an HTML list item with a simple background image applied in CSS.

screenshot

Bite Club

I really loved this navigation bar. The brightness really grabs your attention and the reversal of the colors makes a perfect rollover. This also uses a sprite for each menu item, each with three states.

screenshot

Capital City Equipment Company

I though the house shaped navigation selection was clever on this one. The text in each link is part of the image, if you replicate something like this it would be simple just to use live text over the background image instead.

screenshot

Strawberry Leisure

This dropdown menu uses a small repeating transparent PNG to pull of the reduced opacity effect. Again, we can look forward to this being much easier in the near future with RGBa when more browsers get on board.

screenshot

Artificial Studio

Yep you guessed it, more image sprites (sensing a trend here?). The big buttons and excellent gradients make for a beautiful navigation area.

screenshot

Cognigen

This was by far one of the most original concepts I came across in my search. To pull of the unique 3D effect, the designer has used a whopping four states for each button that change depending on whether the button is selected, hovered over, or has an adjacent selection.

screenshot

More CSS Menu Goodness

Now that we’ve discussed quite a few great examples, here are a bunch more to check out. Use your browser’s inspect feature to check out the code and images behind any that you like!

Manndible Cafe

screenshot

Code Greene

screenshot

Opera

screenshot

Mac Rabbit

screenshot

Clark Builders

screenshot

Mr. B and Friends

screenshot

Subvert

screenshot

The Swish Life

screenshot

Mystery Tin

screenshot

LiveResto

screenshot

FeelSocial

screenshot

Gowalla

screenshot

NZ Festival

screenshot

Download Prebuilt Menus!

Need a good starting point for your own CSS menus? Check out these great free resources.

Now Show Us Yours

Do you have a CSS menu that you’re particularly proud of? Use the comments below and leave a link so we can see. Also let us know which of the examples above you liked best.

Twitter Bootstrap 2: Bootstrap Goes Responsive

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Recently, we published a piece titled 5 Incredibly Useful Tools Built Into Twitter Bootstrap, which took a look at the basic structure of Twitter’s Bootstrap framework and walked you through implementing some of the major components.

Twitter just released Bootstrap 2.0, an update so large it equates to a near full rewrite. There are quite a few new features and toys to play with, but the real headliner is that the framework is now fully responsive. Join us as we dig in to see how the new grid works and what other cool new features have been added. You’ll learn how to implement Bootstrap in your projects and will also pick up some extremely handy CSS techniques that you can use anywhere.

Demo

We’ll be talking about several new Bootstrap features today. If you want to see them in action, stop by the live demo below.

Demo: Click here to launch.

screenshot

Implementing the Responsive Grid

The most major aspect of Twitter Bootstrap is of course that it is now fully responsive. If you’re still labeling the whole responsive movement as a silly fad in hopes that you can ultimately skip learning the requisite techniques, you’re out of luck. Responsive design is well on its way to being a standard practice instead of a “nice to have” add on. It’s really not as complicated as you might think and tools like Bootstrap make it even easier.

The new responsive grid is twelve columns wide and works much like the sixteen column grid from Bootstrap 1. If you’ve ever used any grid system before, then you’ll feel right at home as there’s nothing too Earth shattering here.

screenshot

To implement the grid, you pretty much follow the same steps as you always did. Start with a container div, then create a row and fill that row with span(x) divs. Given that it’s a twelve column grid, just make sure the numbers in a row add up to twelve. Try four “span3″ divs, a “span9″ with a “span3″ or even just a straight up “span12″ to go all the way across. Here’s a quick example:

1
2
3
4
5
6
7
<div class="container">
  <div class="row">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

The above represents a static grid. It will still be responsive, it just won’t respond to every minute browser window size change, only those set by media queries. If you want a fluid grid, use the fluid classes:

1
2
3
4
5
6
7
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
    <div class="span4"><p>Lorem ipsum dolor sit amet</p></div>
  </div>
</div>

The Media Queries

The included media queries are listed below, starting at mobile and working their way up. Basically, each one goes in and changes the size of the columns to reflow the layout to something more appropriate for the viewport.

  • @media (max-width: 480px)
  • @media (max-width: 768px)
  • @media (min-width: 768px) and (max-width: 980px)
  • @media (max-width: 980px)
  • @media (min-width: 980px)
  • @media (min-width: 1200px)

The first media query (480px and below) targets smartphones and pretty much breaks everything down to a single, 100% width column. This may be a bit oversimplified for your tastes, but the beauty of frameworks like this is that they’re only suggestions, you’re encouraged to customize to your heart’s content.

The next media query targets portrait tablets with a range of 480px to 768px, then up to 980px for landscape tablets and on up to standard desktops and large displays.

For the static grid, individual columns start at 70px wide, then jump down to 60px and finally down to 42px before going 100% width for mobile.

screenshot

Tip: Grab the Right Download
Interestingly enough, the media queries aren’t included in the default download from the Bootstrap homepage. If you want them, you’ll have to grab the GitHub Download.

Nice Attribute Value Selector Usage

If you check out the code for the media queries, you might learn a neat trick or two. For instance, the devs have implemented a solid example of the “Arbitrary Substring Attribute Value Selector”, which I wrote about in CSS Selectors: Just the Tricky Bits.

screenshot

Bootstrap has many classes that use the word “span” (span1, span2, etc.), and rather than typing out each individually, the ASAVS grabs them all in one go with this fancy bit of code: [class*=”span”]. This selector actually digs through the HTML and finds anything with “span” in the class name, regardless of what follows it. Even a class of “spansomethingtotallycrazy” would be targeted.

Content Transformation

Though the heart of the media queries is to reflow the columns, there’s a lot more going on here as well. The developers have actually taken the time to restructure many of the elements so that they transform as the viewport size changes.

For instance, the navigation menus change pretty drastically when you’re viewing on a tablet or smartphone. To see an example, test out the Bootstrap Homepage. At full size, the navigation menu is a simple horizontal list of text links.

screenshot

On a tablet or smartphone though, the text is cleared out and replaced with a button up in the top right of the screen.

screenshot

Tapping on the button will expand the new menu area. Here we have a vertical list of links, which allows for larger tappable areas.

screenshot

Responsive Images

screenshot

The navigation menu isn’t the only thing that changes size with the viewports, lots of other objects do as well, from simple buttons up to more complicated objects like image carousels. To pull off the automatically resizing images, Twitter has taken the “max-width: 100%;” route. Here’s the full snippet:

1
2
3
4
5
6
img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

This makes it so that, as those columns and rows resize themselves, the image width will max out at the width of the parent column. Also notice the “-ms-interpolation-mode: bicubic;” line. This is a fairly obscure property that essentially makes image re-sizing smoother in IE.

More New Stuff

The responsive functionality is definitely the coolest new feature of Bootstrap, but there’s a lot more here to get excited about. Here are three of my favorite items:

Progress Bars

screenshot

Bootstrap now has cross-browser-compatible progress bars that are super easy to implement. Just insert a snippet like the one below:

1
2
3
<div class="progress">
  <div class="bar" style="width: 30%;"></div>
</div>

The “width: 30%” here resembles how far along the progress bar will be. If you want to change that to half full, just type in 50%.

Button Groups

screenshot

Button groups are a bit like breadcrumb navigation in that they’re individual buttons that are all smushed together. Normally, this takes a good chunk of code to pull off. Not only do you have to style the general button theme, you also have to make the first and last button different.

With Bootstrap, all you need are some links with the “btn” class inside of a “btn-group” div.

1
2
3
4
5
<div class="btn-group">
  <a class="btn" href="#">One</a>
  <a class="btn" href="#">Two</a>
  <a class="btn" href="#">Three</a>
</div>

Carousels

screenshot

The old Bootstrap JavaScript plugins have been revamped and some completely new ones have been added. My favorite here is the new jQuery carousel. The example code below may seem hefty, but if you break it down it’s pretty simple. The slide contents gets thrown in the “.item” div and an optional caption can be added. Navigation is tossed in at the end.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
         
        <div class="item active">
            <img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Lorem ipsum...</p>
            </div><!--end caption-->
        </div><!--end item-->
         
         <div class="item">
            <img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
            <div class="carousel-caption">
                <h4>Third Thumbnail label</h4>
                <p>Lorem ipsum...</p>
            </div><!--end caption-->
        </div><!--end item-->
         
    </div><!--end inner-->
     
    <!--nav-->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Conclusion

When a large company like Twitter puts out a free resource, it’s a gamble to actually build your workflow around it. One major issue is that you can’t know for sure how well it will be kept up in the long run. Fortunately, it seems like Bootstrap is, for now at least, a fairly high priority at Twitter. The new version represents a massive amount of time and effort and it really shows. This is turning into one extremely extensive boilerplate.

I’m personally stoked that Twitter deemed it necessary to take Bootstrap responsive. This will definitely help further the cause of responsive design that works well across not only all major browsers, but all major devices as well.

Leave a comment below and let us know what you think of Bootstrap 2.0. Did you try the first version? What are your favorite improvements?

20 Simple jQuery Tricks

jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.

jQuery has quickly made it’s way into nearly every web developer’s bag of tricks. The simplicity with which jQuery allows us to handle complicated events and perform smooth animations makes it the perfect tool for both beginners and experienced developers to add professional flair to their sites.

Here are 20 simple jQuery tricks to get you on your way to JavaScript bliss. The keyword here is “simple” so even if you’ve never used jQuery before, this is the perfect place to start!

 

Beginner Tutorials

Just to get you started off right, here are the beginner tutorials straight from jQuery.com.

screenshot

#1 – jQuery Rounded Corners

A short post from “15 Days of jQuery” on using the wrap, prepend, and append functions to create a rounded corner effect.

screenshot

#2 – Image Cross Fade Transition

3 Simple methods of cross fading one image into another using jQuery and CSS.

screenshot

#3 – Fading Menu – Replacing Content

Chris Coyier provides some of the best free content out there for learning web design. Here’s one of many jQuery tutorials on his site.

screenshot

#4 – Sexy Drop Down Menu w/ jQuery & CSS

Learn to create a slick, animated UI for your site with this step by step tutorial.

screenshot

#5 – Tabbed Content Area using CSS & jQuery

An oldie but goodie, this was one of the first tutorials ever posted on NetTuts. This is where I first learned about jQuery!

screenshot

#6 – jQuery Twitter Ticker

Learn how to use both the Twitter API and jQuery to create a great looking Twitter ticker.

screenshot

#7 – Vertically Scrolling Menu

This article shows you how to create a really smooth, vertically scrolling menu. A great tutorial despite the fact that the author seemed to think it was a horizontally scrolling menu!

screenshot

#8 – Easy Display Switch with CSS and jQuery

Mimic Abduzeedo’s new site and to create a switch for changing your content from list view to grid view.

screenshot

#9 – Simple Toggle with CSS & jQuery

A great beginner’s tutorial describing how to use the toggle feature.

screenshot

#10 – WordPress & jQuery Contact Form without a Plugin

A well written, in-depth look at creating a WordPress form without the need of an additional plugin.

screenshot

#11 – jQuery Sequential List

Use jQuery to take the monotony out of coding sequential items.

screenshot

#12 – Create a Fancy Share Box

Having social media share links on your site has quickly become a standard for most blogs. Use this tutorial to make yours standout.

screenshot

#13 – Create a Slick and Accessible Slideshow Using jQuery

Use this stunning content slider to put a ton of content in a small space.

screenshot

#14 – Using jQuery for Background Image Animations

Create eye-catching background animations with only a few lines of code.

screenshot

#15 – Animated Menus Using jQuery

Similar in concept to #14 but with a subtler, more sophisticated effect.

screenshot

#16 – “Outside the Box” Navigation with jQuery

An amazing technique for creating website navigation that mimics the OS X dock.

screenshot

#17 – How to implement a news ticker with jQuery and ten lines of code

A quick and easy news ticker from Antonio Lupetti.

screenshot

#18 – Create a Stunning Popup with jQuery

This tutorial shows you how to create a popup window and fade out the background.

screenshot

#19 – jQUery Feed Menus

Learn to create simple and effective RSS feed menus like those in Safari.

screenshot

#20 – Create a Funky Parallax Background Effect

This tutorials walks you through creating an incredibly unique sliding 3D background effect.

screenshot

That’s All Folks

That concludes our roundup of simple jQuery tricks. Now go and use these techniques to create some amazing effects on your site. Leave a comment using the field below to share your favorite jQuery tricks and tutorials.