Lateral Code

Link nudging with jQuery continued

By Patrick Lin on Wednesday, December 31st, 2008 | No Comments »

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:

Read the rest of this entry »

7 jQuery Examples

By Karthik Viswanathan on Monday, December 29th, 2008 | 1 Comment »

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.

Read the rest of this entry »

Link nudging with jQuery

By Patrick Lin on Sunday, December 28th, 2008 | 3 Comments »

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>

Read the rest of this entry »

Neatly Styled Forms With CSS

By Karthik Viswanathan on Saturday, December 27th, 2008 | 1 Comment »

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.

Read the rest of this entry »

Stunningly Simple Content Boxes

By Karthik Viswanathan on Monday, December 22nd, 2008 | No Comments »

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.

Read the rest of this entry »