Toluu

Design Shack Blog

CSS, Design and Usability

Creating a jQuery DashboardOctober 29

The following tutorial was written by Michael Wilson of AtiKuSDesign.

The ‘Dashboard’ feature on a Mac looks great, and the menu allowing you to add/remove widgets is a well designed feature. A similar effect can add a whole new level of functionality to a website, providing a simple slide-down menu at the top of a page. This tutorial will walk you through the process from beginning to end.

Before getting started, you may like to check out the demo, or download full source code here.

Starting in Photoshop

1) Create a grate repeat background.

Start by creating a 56 (W) x 64 (H) px image in Photoshop. Then make a 3 coloured gradient going from #111111 to #313131 and finally back to #111111. It should look like this.

Now it’s time to add the dimples.

Select the brush tool and pick a square brush that is 2px in size and #000000. Create a new layer and make sure it is selected. Begin by making one dot anywhere on this new layer. Now move that dot 3px from the top of the image a

Creating a Virtual jQuery KeyboardOctober 22

The following tutorial was written by Kishore Nallan of Kishore Live.

For those of us who travel often, we often end up accessing our emails and other confidential web accounts on public computers. In such circumstances, we are completely at the mercy of keyloggers and other malicious software that track our keystrokes and record our passwords.

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Before I begin, let me show you how it will all look in the end.

Basic HTML and CSS Setup

Ok, let’s get started. We start off with a plain, old login form with username and password fields and a login button. We add a link which will show/hide the virtual keyboard when clicked.

Note: For the purpose of demonstration, I have actually used a normal text field instead of a password type text fi

3D Spiral Component GiveawayOctober 20

We have teamed up with FlashLoaded to give away 3 free copies of their latest Flash component, 3D Spiral (a retail value of $49.95 each).

What is 3D Spiral?

The 3D Spiral is a Flash gallery component that displays images on an interactive 3D rotating spiral. You are able to obtain different layouts by changing the height and width of the spiral. The viewer can scroll, move up/down and zoom the spiral freely.

The component includes customizable opening and closing animation styles and a built-in preloader for seamless transitions between thumbs and large images.

Have a look at the demos for a full example.

How can I win?

Entering the contest is really simple. All you have to do is:

• Post a comment about 3D Spiral below
• Only post one entry per person
• Post the comment before 27th October

Creating a Slide-In jQuery Contact FormOctober 10

The following tutorial was written by Janko Jovanovic of Janko at Warp Speed.

Contact forms are an indispensable part of every website. They are mostly implemented on a separate page and they rarely display creativity, even though there are many ways to improve their visual style. In this tutorial you will see how to create a dynamic, slide-in contact form using jQuery.

Let’s see what we’re trying to achieve with this tutorial. The image below shows the layout of our goal. In the upper right corner of the content is “Contact us” link. When the user clicks on it, the contact form will slide down. When the user submits the form they will get a message that their message has been sent successfully and within two seconds, the entire form will slide up.

Note: You can make this form fully functional by adding validation and some real code that sends the email.

Check out the demo and download full source

Creating a Digg style sign up formSeptember 28

The following tutorial was written by Janko Jovanovic of Janko at Warp Speed.

Digg.com is one of the most popular social networking sites, allowing you to discover and share the content all over the web. In this tutorial we are going to simulate their signup form, with unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. The same approach will be adopted for displaying validation messages.

Before we get started, you may like to view a demo of the end result.

How this form works?

When an input field receives focus, a tooltip with a small blue icon is shown under it. On the other hand, if validation fails, an error message is shown in the same place. Both cases are shown on the screenshot below.

Let’s start

We are not going to recreate the entire form, but rather a few fields just to see how it works. Let’s take a closer look at the code sample. Each field row has a label, an input field, an info message and a validation message. Below you can see t