Web Design » The IMGr jQuery Plugin used for Landing page with Rounded Images

The IMGr jQuery Plugin used for Landing page with Rounded Images

IMGr stands for Image Rounder and it's a jQuery plugin and this tutorial I used it to create a nice looking and unique landing page. For the developers it very easy to create something that will be still and never be changed so the real troubles and headaches are coming when something twisted have to be editable from some CMS. This example can be easily modified to your CMS and these rounded images can be replaced from there; no need for photoshop editing of the images and creating PNG images that will be transparent because the images are normal rectangle .JPG images.

Web Design » Using jQuery Plug-ins for better web forms (In-Field Labels)

Using jQuery Plug-ins for better web forms (In-Field Labels)

In the process of creating a user friendly web form, the first thing that comes to the developer's mind is to describe the kind of data that the user needs to input properly. Sometimes a simple label can do the trick, you put “Username” label in front of a text input field named username and all is done.

Problem occurs when, for an example, you want to tell to the user more info about the data that you want to be inserted in, so the label becomes longer. Eg. “Insert your first pet name”. The form labels have different length and the form looks messy.

One solution can be to top place the labels over the input fields but if we want to make it more stylish we can use the In-Field jQuery plug-in for that.

Web Design » Creating Switch view option using jQuery and CSS

Creating Switch view option using jQuery and CSS

The web user today wants the sites to be more interactive and that interaction to be done on faster and more user-friendly level. Now I'm going to show you a few-step tutorial that will help you to increase the interaction on your site.

Web Design » Create nice-looking heading via Google Font API

Create nice-looking heading via



Google Font API

When I wrote the last blog post I thought that was the last connected with typography, but I think that this is the ultimate solution for web designers who want to use different fonts instead the standard without using any techniques mentioned in the previous posts. I think that typography is very important part of the web design, so this will be dedicated to it too.

First we include the style-sheet file direct from the Google API site with the specifying the font family that we want to use. This project is in beta version and there are 25 fonts so far.

Web Design » Text With Neon Light Effect using jQuery & CSS

Creating a Background Image

First of all we should create an image with the two different color versions of the text, and helped by the jQuery we can create a smooth transition between them. To create the image we're going to use Photoshop, so we're creating an empty 650px X 300px document and set #141414 as a hex code for background color.

For the text you can use your favorite font-family, for this example I'll use Century Gothic with a size of 60px and I'll type “jQuery & CSS liquid text effect” two times for the heading text.