Archive for December, 2008

When we left off last time, I showed you how to do simple link nudging with jQuery. In this post, I’ll show you how to add some more CSS styling, so if you haven’t read the previous article, I suggest you read it now before you continue.

The last snippet in the last article was this:

$(function() {
    $('a').hover(function() {
        $(this).stop().animate( {
            paddingLeft:"30px"
        }, 300);
    }, function() {
        $(this).stop().animate( {
            paddingLeft:"0"
        }, 300);
    });
});

Let’s first begin with some CSS. This is the CSS used in this demo:

Continue Reading…

JavaScript is a scripting language used by many web designers for hover effects, image manipulation, dynamic CSS editing, form validation, text editing, and so much more.

JQuery is a very popular JavaScript library used throughout the web. In this article we will present 7 jQuery examples.

Continue Reading…

A simple, subtle yet aesthetically pleasing effect you can use is Link Nudging. What does this mean? Something like what’s seen here.

Link nudging is used by big web design websites such as CSS Tricks through MooTools or jQuery.

This post will show how to do a simple Link nudging using the JavaScript library jQuery. You can use jQuery inside <script></script> or in an external JavaScript file.

You can get jQuery here, or import it from Google AJAX Libraries API, like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Continue Reading…

Regular HTML forms may seem too simple and unappealing. They could be too small or have a poor font for your site. Or maybe they just don’t go too well with your design.

All these reasons and more give you the perfect incentive to style your forms. In this tutorial, we will create a comment form out of 3 simple images.

You may download these images (as well as our finialized HTML and CSS files!) here, or just follow along with the rest of this post.

Continue Reading…

First impressions are always important. Whether it’s a website, movie, or book, that primary effect can persuade you to put it down or continue. Website design is a key element in attracting visitors to a site. If your words are barely legible, will you really generate much traffic? This usually results in the inevitable answer: no.

With beautiful content boxes, visitors will love to read what you have in store. Let’s take a ride and learn how to create stunningly simple content boxes with just an open source image editing software and your favorite text editor.

This tutorial will be explained using GIMP, the GNU Image Manipulation Program, which can be downloaded here for free, as it is open source.

Continue Reading…