Tutorial

  • Create a Diagonal grid pattern in Photoshop

    3

    Grids are very popular among web designers. While working on my current project I decided to use a grid for the background. Normal grids didn’t give my design the edge I was looking for. I wanted to add a diagonal grid. Normal grids usually get associated with technical, futuristic design, where as diagonal grids give a more funky, modern feel to a design.

  • Pimp out your Testimonials page with CSS3

    5

    All too often images are given borders, drop-shadows, rotated slightly, etc via photoshop or some image editing program. This is not only undesirable since CSS should be taking care of the layout, but it is very restricting. A single change in the image would force you to change all the images individually. CSS cascade, which is what makes them so awesome.

  • How to Create a Fancy CSS3 Menu

    5

    Fancy CSS MenuIt’s good to know and keep up with the latest CSS tricks, especially with all the latest browsers on the verge of coming out.

    In this tutorial, I’m going to create a navigation menu that relies heavily on CSS3. The purpose for this is to learn about CSS3 Properties you might not have already known, see them in use and perhaps get you to dream about the things developers will be able to do without relying on other technologies such as javascript.

  • Create a scrolling anchor link with jQuery

    25

    I’ve been meaning to do this tutorial for a while now and it seems as if I’m finally getting around to it!

    Very simply put, this will function like a normal internal anchor link or named anchor link, but will scroll to the specified destination instead of merely jumping there. It’s a really easy-to-implement and awesome thing to add to almost any website.

  • Create a simple jQuery looped timer

    9

    Timers are useful things to have in your javascript toolbox of tricks. Common examples of looped timers are carousel plugins. These normally have a couple of options, and often one of them is to have the carousel window change every –insert amount of seconds here– seconds. This is basically what we’re going to go through during this tutorial.

    This timer isn’t going to be doing anything crazy, it’s merely going to rotate between <p> tags every second. The rest is up to you and your imagination.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6