Toluu

Design Shack Blog

CSS, Design and Usability

Creating a Slide-In jQuery Contact FormToday

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

Ten Years of A List ApartOctober 7

As far as online web design magazines go, A List Apart has been around for as long as I can remember. Their regular articles never cease to probe into new areas of design, or express existing techniques in a new and forward thinking way.

A new post today is celebrating A List Apart’s 10 year anniversary, looking back at how the project started out and evolved over a decade. It also gives an insight into how article submissions are processed and filtered, along with who edits and designs the site today.

If you’re a regular reader, or interested in contributing to A List Apart in the future, it is an article well worth a read.

Free WordPress Theme: Simple Balance 2October 2

Alex, from Blogsessive, has released a minimalist WordPress theme called Simple Balance 2. Full information about the theme and download information can be found over at the release post.

Simple Balance features a whole host of customizable options, and it’s great to see a free WordPress theme offering what usually would be paid for features:

• Several colour schemes
• Different advertising layouts
• The ability to manage adverts from the backend
• Variable layout structure

Download Simple Balance

US Presidential Logo DesignSeptember 30

DesignBay have a very interesting study of presidential campaign logos over the past few years. The results of this study can be used to analyse the logo designs of other 2008 presidential candidates, and gain an insight into what makes good logo design and what should be avoided.

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