Archive

Archive for February, 2011

jQuery plugin Easy Image Zoom

February 21st, 2011 No comments

I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!

Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you’ll find this very easy to apply to your own websites.

Take a look at the demo or
Download the plugin

Introduction

First I suggest you check out the demo to see what the plugin is all about. Then come back here and continue reading this article :)

Markup

I usually start this section of my articles with the same sentence: “the markup couldn’t be simpler” :) The main idea behind this and other plugins I write is – keeping the markup as simple as possible. No unnecessary elements and bloated HTML. Also markup (for all of my plugins) makes content accessible even with JavaScript turned off, which is important.

All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required:

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

The script (and CSS) takes care fo the rest.

Options

This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element’s size, position and appearance. In my demo I am using this definition:

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:15px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #555;
	-webkit-box-shadow:0 0 10px #555;
	box-shadow:0 0 10px #555;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

You will notice the line-height property… I am using if for vertical alignment of the message text that is displayed while the detailed image is loading. Of course you can use your own positioning methods, your own text, insert extra markup if you want to and add your own CSS to style the preloader. Perhaps some preloader gif as a preloader image? I’ll leave that to you, what I am showing here is a bare-bone example that you can easily customize.

Let’s take a look at the plugin options. Here is a list of them with default values and descriptions:

id

Default value: “easy_zoom”
The ID of the newly created image zoom element. Of course you can use your own, but make sure you update the CSS accordingly.

parent

Default value: “body”
This defines the DOM element where newly created image zoom element will be inserted. You can insert it anywhere you like in the DOM by editing this option.

append

Default value: “true”
If set to true (by default) the newly created element will be inserted as a last child of the parent element. If this option is set to false then the newly created element will be inserted as a first child of the parent element.

preload

Default value: “Loading…”
A message that appears before the large image is loaded. You can use this option to write your own preload messages and insert any HTML you want. If you want to use the preloader gifs, I suggest you go with background images.

error

Default value: “There has been a problem with loading the image.”
In case the large image is not found or can’t be loaded, this error message will appear. You can use this option for custom error messages.

Here’s a sample code for using some custom options:

jQuery(function($){
	
	$('a.zoom').easyZoom({
		id: 'imagezoom',
		preload: '<p class="preloader">Loading the image</p>'
		parent: '#container'
	});

});

In one of the next articles here on CSS Globe I will offer a one page portfolio template that uses this image preview, so stay tuned!

Categories: Designing, Others Tags:

jQuery plugin Easy Image Zoom

February 21st, 2011 No comments

I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!

Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you’ll find this very easy to apply to your own websites.

Take a look at the demo or
Download the plugin

Introduction

First I suggest you check out the demo to see what the plugin is all about. Then come back here and continue reading this article :)

Markup

I usually start this section of my articles with the same sentence: “the markup couldn’t be simpler” :) The main idea behind this and other plugins I write is – keeping the markup as simple as possible. No unnecessary elements and bloated HTML. Also markup (for all of my plugins) makes content accessible even with JavaScript turned off, which is important.

All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required:

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

The script (and CSS) takes care fo the rest.

Options

This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element’s size, position and appearance. In my demo I am using this definition:

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:15px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #555;
	-webkit-box-shadow:0 0 10px #555;
	box-shadow:0 0 10px #555;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

You will notice the line-height property… I am using if for vertical alignment of the message text that is displayed while the detailed image is loading. Of course you can use your own positioning methods, your own text, insert extra markup if you want to and add your own CSS to style the preloader. Perhaps some preloader gif as a preloader image? I’ll leave that to you, what I am showing here is a bare-bone example that you can easily customize.

Let’s take a look at the plugin options. Here is a list of them with default values and descriptions:

id

Default value: “easy_zoom”
The ID of the newly created image zoom element. Of course you can use your own, but make sure you update the CSS accordingly.

parent

Default value: “body”
This defines the DOM element where newly created image zoom element will be inserted. You can insert it anywhere you like in the DOM by editing this option.

append

Default value: “true”
If set to true (by default) the newly created element will be inserted as a last child of the parent element. If this option is set to false then the newly created element will be inserted as a first child of the parent element.

preload

Default value: “Loading…”
A message that appears before the large image is loaded. You can use this option to write your own preload messages and insert any HTML you want. If you want to use the preloader gifs, I suggest you go with background images.

error

Default value: “There has been a problem with loading the image.”
In case the large image is not found or can’t be loaded, this error message will appear. You can use this option for custom error messages.

Here’s a sample code for using some custom options:

jQuery(function($){
	
	$('a.zoom').easyZoom({
		id: 'imagezoom',
		preload: '<p class="preloader">Loading the image</p>'
		parent: '#container'
	});

});

In one of the next articles here on CSS Globe I will offer a one page portfolio template that uses this image preview, so stay tuned!

Categories: Designing, Others Tags:

Create A Scrapbook Alphabet

February 16th, 2011 No comments

Introduction In this Photoshop Text Effect you’ll learn to create cool Scrapbook style text that can be used as a stand alone word treatment or converted to individual reusable .png files with a transparent background. READ THIS: If you haven’t already done the Text In Stitches tutorial and you want to add the stitches to […]

Categories: Designing, Others Tags:

Create A Scrapbook Alphabet

February 16th, 2011 No comments

Introduction In this Photoshop Text Effect you’ll learn to create cool Scrapbook style text that can be used as a stand alone word treatment or converted to individual reusable .png files with a transparent background. READ THIS: If you haven’t already done the Text In Stitches tutorial and you want to add the stitches to […]

Categories: Designing, Others Tags:

The Anatomy of a Perfect Login Page

February 16th, 2011 No comments
login page

In this article I am going to analyze what a perfect login page or login form should have. Also you are able to download the pure CSS3 login form for free.

Login forms are very simple in terms of the required elements. When it comes to forms, it doesn’t get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.

Let’s take a look at what I think are necessary elements.

Take a look at the login page or
Download the demo

1. The title

I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.

2. Non members

Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.

3. Input fields and labels

Although login forms usually contain two input fields, it is important that they’re styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels “connect” them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.

4. Forgot password link

This is also very important link. Many users have numerous accounts and passwords and they often can’t remember which one they used on your site. The best placement for this link is near the password field itself.

5. Submit button

This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.

6. Remember me

Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.

7. Back link

If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.

Validation

Although the form shouldn’t rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.

Demo

I have prepared a demo page for you to download (for free). The login page is contains a pure CSS3 styled form and a simple validation script, ideal for learning purposes. Hope you’ll enjoy it!

Categories: Designing, Others Tags:

The Anatomy of a Perfect Login Page

February 16th, 2011 No comments
login page

In this article I am going to analyze what a perfect login page or login form should have. Also you are able to download the pure CSS3 login form for free.

Login forms are very simple in terms of the required elements. When it comes to forms, it doesn’t get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.

Let’s take a look at what I think are necessary elements.

Take a look at the login page or
Download the demo

1. The title

I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.

2. Non members

Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.

3. Input fields and labels

Although login forms usually contain two input fields, it is important that they’re styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels “connect” them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.

4. Forgot password link

This is also very important link. Many users have numerous accounts and passwords and they often can’t remember which one they used on your site. The best placement for this link is near the password field itself.

5. Submit button

This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.

6. Remember me

Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.

7. Back link

If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.

Validation

Although the form shouldn’t rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.

Demo

I have prepared a demo page for you to download (for free). The login page is contains a pure CSS3 styled form and a simple validation script, ideal for learning purposes. Hope you’ll enjoy it!

Categories: Designing, Others Tags:

Drawing Calendar Icon With CSS3

February 7th, 2011 No comments

In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn’t be simpler than it is.

The final result looks like the image below.

Take a look at the demo

HTML

As mentioned the HTML I am using for making this calendar icon to work is very simple:

<p class="calendar">7 <em>February</em></p>

We have a wrapping paragraph, although you may go with the DIV (or HTML5?s new element – TIME). Inside the wrapping element you need one extra element that contains a month’s name.

The principle

Now, I have 2 elements to work with, plus I will create 2 pseudo element for each of the real elements which will give me total of 6 elements I can use to draw shapes and position them properly. Pseudo elements will be used for the calendar’s spiral (actually those are some kind of rings, not sure what is the correct English word for it… sorry about that).

If you take a look at the image below the idea behind this will be more clear.

First we style the container element. You will notice that I used box-shadow, border-radius and CSS gradients. Not all browsers will render all of these properties, but at least it will degrade nicely.
Note that the fixed height is not defined, you control the overall height with line-height properties in both container and nested em element.

.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:80px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

Em element is also styled, it contains the month’s name.

.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, “holes in te paper”.

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

…and em’s pseudo elements are used to create the rings:

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}	

There are 2 demos you can check out:

It is important to say that if you’re going to customize the width there will be some tweaking needed, mainly for the placement of the pseudo elements.

That is it! Enjoy! :)

Categories: Designing, Others Tags:

Drawing Calendar Icon With CSS3

February 7th, 2011 No comments

In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn’t be simpler than it is.

The final result looks like the image below.

Take a look at the demo

HTML

As mentioned the HTML I am using for making this calendar icon to work is very simple:

<p class="calendar">7 <em>February</em></p>

We have a wrapping paragraph, although you may go with the DIV (or HTML5?s new element – TIME). Inside the wrapping element you need one extra element that contains a month’s name.

The principle

Now, I have 2 elements to work with, plus I will create 2 pseudo element for each of the real elements which will give me total of 6 elements I can use to draw shapes and position them properly. Pseudo elements will be used for the calendar’s spiral (actually those are some kind of rings, not sure what is the correct English word for it… sorry about that).

If you take a look at the image below the idea behind this will be more clear.

First we style the container element. You will notice that I used box-shadow, border-radius and CSS gradients. Not all browsers will render all of these properties, but at least it will degrade nicely.
Note that the fixed height is not defined, you control the overall height with line-height properties in both container and nested em element.

.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:80px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

Em element is also styled, it contains the month’s name.

.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

Now I am styling the pseudo elements. Container’s pseudo elements (:before and :after) are used to create thos circles, “holes in te paper”.

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

…and em’s pseudo elements are used to create the rings:

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}	

There are 2 demos you can check out:

It is important to say that if you’re going to customize the width there will be some tweaking needed, mainly for the placement of the pseudo elements.

That is it! Enjoy! :)

Categories: Designing, Others Tags:

Create A 3D Push Pin

February 4th, 2011 No comments

Introduction Back when I wrote the popular A Scrap Of Notebook Paper tutorial quite a few of you wanted to know how I created the push pin shown in my final image. Well the wait’s over my friends! In this Photoshop tutorial I’ll show you how to create your own 3D push pin using Photoshop […]

Categories: Designing, Others Tags:

Create A 3D Push Pin

February 4th, 2011 No comments

Introduction Back when I wrote the popular A Scrap Of Notebook Paper tutorial quite a few of you wanted to know how I created the push pin shown in my final image. Well the wait’s over my friends! In this Photoshop tutorial I’ll show you how to create your own 3D push pin using Photoshop […]

Categories: Designing, Others Tags: