A Love For Design » Web Design & Graphic Design Tutorials

Create An Advanced Chinese Lantern Icon In Photoshop & Illustrator

Justin Mathew — Tue, 14 Dec 2010 09:24:53 +0000

In this tutorial we will be using Adobe Illustrator and Adobe Photoshop for our icon design. This tutorial is rated advanced for those who are beginners in these programs I would recommend checking out some of our easier tutorials to start out with. Our basic shapes will start out with illustrator then we can export them over to photoshop to polish, add texture and finalize our icon.

This is what our final icon will look like.

So we’ll just dive right into it, fire up illustrator and create a new web document 800×800 or whatever size you feel comfortable working with (These shapes can be resized later).

Initial Sketch

I initially started with a sketch idea with paper and pencil then scanned it and imported it into illustrator to get a basic outline of our icon. By doing this, it saves time from having to draw something from scratch on Illustrator. If you sketch something you don’t like just trash it and start over. The main rule is to never take over 10 minutes per sketch, their suppose to be quick drawings, just to get an idea of what I want.

Now I know what kind of shape I want my lantern to take I can start using our shape tools to create the base of our lantern. I start with an ellipse tool to make the actual lantern shape, click and drag an oval shape and fill it with black for the time being.

After you’ve filled in your shape grab your pen tool , draw out the top metal handle of our lantern, fill it with black as well.

After you’ve created the top handle go ahead and duplicate the layer and then flip it upside down Object > Transform

Now grab your rectangle tool and draw a small vertical rectangle for our tassle. After, grab your ellipse tool again and draw a small circle for the ball on our tassle.

Moving on, grab your rounded corner tool and change your rounded corner radius to 12px and draw a small rectangle and select the bottom half with your direct selection tool and delete them. After you’ve created the shape get your rectangle tool again and create another vertical rectangle for the tassle strings.

Now create the same shape you did for the top metal tassle (Just duplicate the same shape and make it a bit bigger). Duplicate the same layer and position it directly over the same shape but this time color it white, then horizontally resize it a bit smaller.

Now we’re going to remove the front so we get a nice unique shape for our handle. Open up your path finder box and hit the remove front button.

Time to save your work (Although you should’ve already saved if your a good designer!). Now we’re going to export our work into photoshop to continue onto coloring and polishing it.

Exporting Into Photoshop

Doing this is super easy. Make sure you have Photoshop opened and create a new document. Select each item from Illustrator (one by one) and drag it over to your new palette in Photoshop. Now that we have all our pieces on Photoshop (you might have to put them back together) we can start coloring our lantern.

Select the top metal piece of of our lantern and apply a gradient effect – Here are the following colors chosen #cd733f, #e4b848 and white. I repeated the colors in a way to make the metal look shiny and reflective.

Here’s what you should get…

Now we’re going to add texture to our metal piece to give it a more realistic look so go back into Illustrator and drag the same piece into Photoshop once again. Now goto Filter > Noise > Add Noise and use the settings below.

Select the layer to Overlay and set the Opacity to 10% and now you have a realistic looking gold metal! Now what you can do is duplicate these layers and flip them vertically and size them down for the bottom metal part.

Time to color the top handle part of our lantern. Use the same colors as used in the metal we just created.

Now that we have the metal parts finished, we can move onto coloring the oval base where the main focus will be. Here are the colors used for the gradient: #f98526 and #bf191d. Now just add a radial gradient with the settings and colors below.

Here’s what it should look like…

Now we’re going to color the tassel metal pieces. Just use two different grays, Ill let you pick which ones you want to do. The higher the contract between the grays the more shiney it can seem but don’t go too far or it’ll look unrealistic. We’re also going to color the tassel’s ball with a yellow gradient.

Add yellow to our tassel.

Now, we’re going to add little creases to our lantern because that’s how the paper ones are made. What I did was start off with a black shape of the base lantern and resized it a little bit, hallowed out the center and, duplicated and resized over and over. When your finished redo the same process but with white and set their Opacity low. Change your black layer to Color Dodge so you get a blended effect.

Time to texture our lantern with an actual picture of a paper lantern. With a simple google image search for Chinese Paper Lantern we can find many choices, I randomly picked one that I thought would go well with our icon –

I cut the lantern out of the black and squished it vertically just a little bit to fit the contour of our lantern – Credit goes to Joern Clark for the photo.

Now set your photo layer to Overlay and Opacity to 60%.

Create a new layer and select your brush tool and hit your hotkey “D” to reset your colors so the foreground is black. Now draw across your top metal piece like my picture below, be sure not to draw to low – We’re trying to create a subtle shadow underneath the metal piece.

Now just put that layer underneath your top metal piece layer and now we got a nice shadow underneath our lantern.

Now we have a good looking Chinese paper lantern!

Our Final Polished Product

Make sure to group all these layers, duplicate and flatten (to make sure we have a workable backup) and save. After some color dodging, color burning, erasing parts of the tassel and a fancy background with a drop shadow on the lantern layer. Our final product is finished!

100+ Free High Quality Web Designer Icons

Justin Mathew — Wed, 01 Sep 2010 00:42:04 +0000

Every web designer loves fresh icon sets for their new design, and every design blog loves doing round-ups for free icons. So we said, why not? In this post we added some of our favorite high quality web designer icon sets for you to use on your next design. Please make sure to read the T.O.S. for these icons and their perspective owners, some may only be for personal use, also give credit where due.

Icons can be a bit tricky when coming to web design, you don’t want to spend too much time designing icons on a web site because there are so many other aspects of a site that need attention. That’s where free icons come in, many graphic designers offer free icons around the web a simple google search can come up with hundreds of thousands of results for icon sets. You also want your site to have originality and not see the same icons on another web site, that’s why using photoshop to mix and match icons is a great way to keep a uniqueness to your site but also save a lot of time and resources.

Money Back Guarantee Icon Set

Top 3 Icon Pack

ISO Icon Pack

Nixus Icon Set

Web Injection Icon Set

Create An Apple Style Menu Purely In CSS3 – No Images Required

Justin Mathew — Thu, 08 Jul 2010 08:45:02 +0000

This just goes to show you how much of a difference CSS2 and CSS3 are and how much more CSS3 can do for us to cut our design work literally in half. In this tutorial I will show you how to create a non-image, apple style menu all out of CSS3! The only problem with this is doing so you are limiting the amount of browsers that will be able to correctly display your work (Firefox and Safari only). So you would want to make sure to have alternatives for other browsers (meaning you WILL have to use images and alternate code).

view demo
Apple Menu

download
Zip Package

The advantage of doing all this is CSS3 is that it significantly reduces the load amount for the page, the lower the better. It not only helps the load time but reduces the cost of bandwidth used. And of course cause it’s really cool!

Step 1

First, we’re just going to start off by creating a simple horizontal list with links that have padding and text effects. Also make sure to add the class active to our index link.

HTML

	
		
			home
			menu
			projects
			affiliates
			contact

CSS

body	{
	background: #ddd;
	margin: 30px;
}
#menu	{
	float: left;
	padding: 0;
	margin: 0;
}
#menu ul	{
	padding: 0;
	margin: 0;
	float: left;
}
#menu li	{
	float: left;
	list-style: none;
	background: none;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	color: #262626;
	text-decoration: none;
	text-transform: capitalize;
	padding: 12px 28px;
}

This is what it should look like so far..

Step 2

In the next step, we’re going to add our gradient effect to our links and also add a text shadow for an embedded look.

To do this, we use the following code to encompass Firefox, Safari and what ever other browser that supports css3.

#menu li a:link, #menu li a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	display: block;
	color: #262626;
	padding: 12px 28px;
	text-decoration: none;
	text-transform: capitalize;

	/* CSS3 Text Shadow */
	text-shadow: 0px 1px 1px #fff;

	/* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}

Again, here’s what we got so far..

Step 3

Now we’re going to add another new CSS3 attribute called border radius which rounds out the corners of our links on each end of the side. We do this by also using the first-child and last-child.

#menu li:first-child a {
	/* Rounded Corners */
	-moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a {
	/* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

Step 4

We’ll now add some final touches to our first part of the menu, some more shadowing and horizontal border gradients.

On the menu div, we’re going to add a box shadow and round out the corners so it matches our links.

#menu	{
	float: left;
	padding: 0;
	margin: 0;

	/* Box Shadow */
	box-shadow: 0 1px 0 #000;
	-moz-box-shadow: 0 1px 0 #000;
	-webkit-box-shadow: 0 1px 0 #000;

	/* Rounded Corners */
	-moz-border-radius-topleft: 10px;
     -moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;

	/* Rounded Corners */
     -moz-border-radius-topright: 10px;
     -moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

Now we’re going to add a 1px margin to the right of our li to create a space so the background of our ul will show through.

#menu li	{
	float: left;
	list-style: none;
	background: none;
	margin-right: 1px;
}

Now add the gradient to the ul background.

#menu ul	{
	border-top: #f3f3f3 1px solid;
	padding: 0;
	margin: 0;
	float: left;

	/* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}

So far so good..

Step 4

Now we’ve got to add our hover event and our active state. Pretty simple, same code just different selector.

#menu li a:hover	{
	cursor: pointer;
	color: #fff;
	text-shadow: 0px -1px 1px #000;

	/* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}

And for the active state..

a.active:link, a.active:active, a.active:visited	{
	color: #fff !important;
	text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;

	/* Box Shadow */
	box-shadow: inset 0 0 10px #000;
	-moz-box-shadow: inset 0 0 10px #000;
	-webkit-box-shadow: inset 0 0 10px #000;
}

*Note for the active state to work, for each page you have the menu you on say contact.html you need to attach the class active to the proper link in the menu bar.

Final Result

view demo
Apple Menu

download
Zip Package

Final Code





Apple Menu In CSS3 Only



	
		
			home
			menu
			projects
			affiliates
			contact

How To Draw A Glossy 2.0 Loading Bar Vector In Illustrator

Justin Mathew — Thu, 01 Jul 2010 00:39:54 +0000

In this tutorial we’re going to show you how to draw a glossy slick looking loading bar in illustrator. The benefits of doing a project like this in illustrator is that it uses vectorization. By vectorizing this drawing we can resize it to what ever width and height we want without losing the quality of the image (pixelated). You can also transfer our vector from illustrator over to photoshop for easy editing.

view demo
Loading Bar

download
Zip Package

Creative Commons – Some Rights Reserved

Step 1

First we’ll start with a clean document with the size of 800 x 600. Then we’re going to create a atmospheric background that gives depth with shadowing. So grab your Rectangle Tool and draw a rectangle 800 x 380 and align it to the middle-top of your document, then grab the gradient tool and click the square. After you clicked the square it should add a black and white gradient, replace the a dark gray and scoot the gradient to the middle-top of the square and stretch it out like in the picture. Make sure you select radial gradient on your gradient tab as well.

Now make another square this time 800 x 220 and align it to the bottom middle of your document and add another gradient to it, same color but this time make the gradient linear with the dark gray at the bottom.

Now we got a nice looking black background ready for us to start our loading bar.

Step 2

Go ahead and grab the Rounded Corner Tool, click Preferences at the top and set rounded corners to 4px. Create a decent size rectangle to your liking, then color it light gray, I used #999999. Duplicate that layer and move the new rectangle down 1px with your down arrow (when selected). Grab your gradient tool once again and select the new rectangle and use the radial gradient and fill with with black and dark gray once again (like the picture below).

Copy and paste the first light gray rectangle and paste it in front, overlaying the first rectangle. Grab your gradient tool and add a linear gradient to the square with the top being white and the bottom being white at 40% opacity. Now what you need to do is lock and hide all the other layers besides the front path. Grab your square tool and draw a rectangle overlaying half (horizontally) the rectangle and go to Windows > Pathfinder and select both rectangles and select Minus Front. This will remove the rectangle and leave our background rectangle with half its height but keeps our top rounded corners, select the finished product and go to your transparency tab and reduce it to 40%.

*Group these layers together and make sure to lock them (Your backgrounds should be in a separate group and locked as well if you haven’t already done so).

This is what you should have so far..

Looking pretty good so far, we now have our background set up with our empty glossy loading bar. Now we’re going to fill this bar so we have something that actually shows us our loading!

Step 3.

So essentially we just got through with all of our core basics needed for this project, from here on out it’s pretty much a copy, paste and edit process of what we already have. So in saying that copy the whole empty bar group and paste it into a new group. First go to our new path with the gray rectangle and fill it with the color #E9FCFF. Now go and select our new path with our black and dark gray gradient rectangle and we’re going to change the gradient to linear and set the gradient as the picture shows below. The colors I used were #07F2FB for the middle gradient and #006AC0 for the two outside gradients. So now we have a filled colored bar that looks great and ready to add our final touches of the project.

Now on to our final touches

Next we’ll add a nice reflect of our filled bar to give off a three dimension to match with our background as if the loading bar is floating in mid air with soft metals around it. Go in our filled bar group and copy/paste the filled path that we previously created and place it at the bottom of the document where our second background gradient is located. Go to Effect > Blur > Gaussian Blue and set it to 14, then go to the transparency tab and reduce down to 40%, then scale it down so it matches the size of the original filled bar.

Final Product

If you kept up with everything then you will have successfully drawn a vectorized loading bar in illustrator! Congratulations, now you can move onto our part 2 of this tutorial we’re we’ll be implementing these vectors into flash to be used as a preloading mechanism.

view demo
Loading Bar

download
Zip Package

Add A Custom Ajax Twitter Feed To Your Web Site

Justin Mathew — Fri, 25 Jun 2010 08:21:46 +0000

A lot of people like to add a twitter feed to their website for convenience, but many of them are template files that they download and copy/paste onto their website and looks out of place. Twitter has provided an API service to their registered users to use jSON to pull information and display it whichever way the creator likes. In this tutorial I’ll show you how to add a completely custom twitter feed controlling how many tweets, how the date is displayed, and if their linked or not.

Twitter

"Twitter is a real-time information network powered by people all around the world that lets you share and discover what’s happening now." – Twitter.com/about

The following uses Twitters API to pull the correct information wanted and displays as told by JavaScript. While the list is being populated we added a loading ajax image to show that the tweets are being loaded and don’t clog the site from loading everything else. Then is listed in a specific ul classed and dynamically added by the jSON, after all is added we can start adding css to style it how ever we want!

Adding the JavaScript

So what this does is it calls the URL below to your twitter account, pulls the information into a .json and then uses the jQuery push command to add HTML to our defined #id. You may edit the HTML that’s being pushed if you know what your doing, otherwise I would keep as is because you could end up breaking the script.

The javascript will find our id (which is called #twitter_update_list) and insert the HTML into the ul, which has the date and the tweet in separate li’s. Right now only the twitter date is wrapped in a link to follow to the actual tweet but we can customize this to how every we want meaning, we can make the whole thing link or remove the link entirely. It’s all up to you…

//Twitter
window.onload = function() {
	var ajax_load = "";
	var url = 'http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=4';
	var script = document.createElement('script');
	$("#twitter_feed").html(ajax_load);
	script.setAttribute('src', url);
	document.body.appendChild(script);
}

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i]*[^.,;'">\:\s\<\>\)\]\!])/g,
	function(url) { return ''+url+'';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+''+reply.substring(1)+'';
    });
    statusHTML.push(''+relative_time(twitters[i].created_at)+'
 '+status+'');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + " " + values[5] + " " + values[3];
  var parsed_date = new Date();
  parsed_date.setTime(Date.parse(time_value));
  var months = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
	'Sep', 'Oct', 'Nov', 'Dec');
  var m = parsed_date.getMonth();
  var postedAt = '';
  postedAt = months[m];
  postedAt += " "+ parsed_date.getDate();
  postedAt += ","
  postedAt += " "+ parsed_date.getFullYear();
  return postedAt;
}

Change the "username" to your twitter account to pull your tweets.

var url = 'http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=4';

Adding the HTML

Below we created an unordered list with the id #twitter_update_list which javascript looks for to add the html

Adding the CSS

The point of this part is just to show you how dynamic you can get with the styling just because the twitter feed classes all their selectors so it makes for great css editing. This is my quick example of what you can do with this flexable API and jSON, be creative. Go WILD!

body	{
	background: #111111;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #ccc;
}
h1 { padding: 20px 0 0 15px; margin: 0; letter-spacing: -3px; }
h2 { padding: 0 0 0 15px; margin: 0; color: #777; letter-spacing: -2px; }
.loader		{ position: absolute; top: 250px; left: 105px; }
#twitter	{ position: relative; width: 280px; background: #222; height: 820px;  }
#twitter li p	{ padding: 0 0 15px; }
#twitter p a:link, #twitter p a:active, #twitter p a:visited	{ color: #6fb2cd; text-decoration: none; }
#twitter p a:hover	{ text-decoration: underline; }
#twitter ul	{
	width: 260px;
	height: auto;
	padding: 15px 0 0 15px;
	margin: 0;
}
#twitter li	{
	float: left;
	margin: 3px 0;
	list-style-type: none;
}
li.twitter_date	{
	background: url(../images/date_bg.jpg) no-repeat left top;
	width: 95px;
	height: 23px;
	text-align: center;
	line-height: 21px;
}
.twitter_date a:active, .twitter_date a:link, .twitter_date a:visited	{
	color: #666;
	background: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
	text-transform: uppercase;
	padding: 7px;
}
.twitter_date a:hover	{
	color: #666;
}

Final Code

For all the lazies, who don’t want to go through the tutorial and actually read and find out how it works, here’s the final code of my version of a custom twitter feed.

view demo
Custom Twitter

download
Zip Package




Custom Twitter Feed





	
		A Love For Design
		Twitter Feed

30 Free High Quality Web Designer Fonts

Justin Mathew — Wed, 23 Jun 2010 07:05:38 +0000

Over the years of web designing, I’ve collected quite a few fonts during my projects. Below, I’ll post free fonts that I most commonly see and use on designs, one thing a lot of these fonts have in common is the unique personality they have to them. Each one can give off a certain style and feeling, which is exactly what we want in our designs (to evoke some sort of feeling).

Web Typography

The popular trend right now is to steer away from pristine clean and untouched design (which is timeless in itself but web design has to evolve sometime) meaning the designs have dirt, grunge, cuts, brush strokes – attributes that associate with human mistakes to give off a very humanistic style. Below you can click each image to follow it to the original download page or you can download the whole package below, enjoy!

download
Font Package

Androgyne

Aria Penci Roman

Bebas

Boris Black Bloxx

Club

Complete In Him

Criticized

Crossword Belle

Danube

Designer Notes

Green Piloww

Hand of Sean

Just Me Again Down Here

Karabine

Love Ya Like A Sister

MOD

Never Let Go

Pastel Crayon

Pointy

Prototype

Reklame Script

Rezland

Rock Da Fonky Bit

Scratch

Sketch Block

Slant

Times New Yorker

Urban Sketch

Walk Around The Block

Zitti

18 Custom Web Safe Fonts From Google

Justin Mathew — Sun, 20 Jun 2010 13:02:57 +0000

Are you sick of using the same old fonts for your websites? Well as technology of the web advances we are now able to add other custom fonts to our web library now. Google offers a free service of offering an additional 18 web safe fonts that can be embedded into your site within two lines of code, nifty huh? Adding a custom font is easy: just add a special stylesheet link to your web page, then use the font in a CSS style. All fonts are open source high quality type faces that are cross browser accessible.

I love how easy Google has made it to implement these additional fonts, i’ll explain below.

Link Stylesheet

Here you have to link the stylesheet which links to Google’s fonts on your HTML document.

Adding a Style

You need to define a selector with the font to activate it.

body    {
      font-family: 'Font Name', serif;
}

Here’s Their Example

Below is how they linked the stylesheet, defined the font in body, and wrote something inside the body using an h1 style.


  
    
    
  
  
    Making the Web Beautiful!

And Thats It!

How easy was that? Now you have an additional 18 fonts you can use on your web site, Thank you Google.

5 jQuery Must Have Code Snippets

Justin Mathew — Sun, 20 Jun 2010 11:15:48 +0000

If you haven’t heard of jQuery yet, than you are definitely missing out on one of the most dynamic and stable JavaScript Libraries. With thousands of plug-ins and added widgets it makes jQuery one of the leaders in javascript frameworks. jQuery is designed to cut all hand-code in half if not more simplifying HTML document traversing, event handling, animating, and Ajax interactions for more streamlined web development.

If you don’t already have a copy of javascript, one way that is growing fast is hot linking through Google – Which the idea is that it might already be cached in the users browser so there would be no downloading thus making a page load quicker.

Downloading jQuery

To do this, link google’s jQuery link (Note: T his one might be out dated so make sure you get the most up to date one). Insert this into the head tag of your page.

If you would like to manual download you can vist the link here to download. With that downloaded you’ll have to load it into your page by inserting this code. (Note: Depending on your file structure, you’ll have to change the path)

Now that you have jQuery installed correctly and working we can start adding functions for our website.

1.)Linkable Div’s

Make a whole div clickable to the user

Lets start off by creating a new javascript file called ‘functions.js’. Inside function.js we’re going to add our jQuery code. So you’ll also have to link this javascript to our web site document as we did to jquery.js

Adding the JavaScript

Now after that’s done, we’re first going to add a piece of code that tells the browsers to load this code when the page is finished (We need to actually do something with the function we create, so this calls the function into action.) So, insert the following code into the functions.js:

//Clickable Boxes
$(document).ready(function(){

	$("#clickablebox").click(function(){
    	window.location=$(this).find("a").attr("href");return false;
	});

});

Adding the HTML

Now lets on to the HTML part of the project, add the following to your HTML document. This will create a div with a link and paragraph inside, the link is essential mainly because in order for the whole box to be clickable somewhere it needs to grab a URL inside of itself.


     Click Me

     This whole div will be clickable to the click you define in the above or anywhere inside the div

Adding the CSS

This portion is just for aesthetics only, just to show how you and customize it how ever you want.

#clickablebox	{
	width: 250px;
	height: 250px;
	margin: 150px auto;
	background: #E6E6E6;
	padding: 15px;
	cursor: pointer;
}

Final Code

Here’s the final produced code, enjoy!

view demo
Clickable Box

download
Zip Package




Clickable Boxes






	
		Click Me
		This whole div will be clickable to the click you define in the above or anywhere inside the div

2.)Table Stripes (Zebra)

Stripe the tr’s of your table for an easier read.

So this ones an easy but effective tool for stripping a table to make it look more professional and easier to read.

Adding the JavaScript

In the previous snippet there was a ‘functions.js’ we created, we’ll use the same file or type of file for this one aswell. Inside the javascript file add the following code:

//Table Stripes
$(document).ready(function(){
	$("table tr:even").addClass('stripe');
});

Adding the HTML

The following is just a plain table with the added class of stripe – The class calls the jQuery to add the stripe class to every even tr.


		
			Ipsum
			Ipsum
		
		
				Ipsum
				Ipsum
		
		
				Ipsum
				Ipsum
		
		
				Ipsum
				Ipsum

Ipsum	Ipsum
Ipsum	Ipsum
Ipsum	Ipsum
Ipsum	Ipsum

Adding the CSS

Again, aesthetically speaking I’m providing this to show a customized example :

body	{
	background: #111111;
}
table	{
	width: 585px;
	background: #333;
	color: #999;
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: -1px;
	font-style: italic;
	margin: 150px auto;
}
table tr	{
	height: 45px;
	text-indent: 20px;
}
.stripe	{
	background: #444;
}
table th	{
	background: #004d99;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	text-align: left;
}

Final Code

Here’s the finished product.

view demo
Clickable Box

download
Zip Package




Table Stripes







		
			Ipsum
			Ipsum
		
		
				Ipsum
				Ipsum
		
		
				Ipsum
				Ipsum
		
		
				Ipsum
				Ipsum

Ipsum	Ipsum
Ipsum	Ipsum
Ipsum	Ipsum
Ipsum	Ipsum

3.)Swap Input Fields

In this snippet there is a default text placed in the specified input field (eg. Search, Textfield) and when the user goes to click the form, the text clears ready for the user to input their information.

Adding the JavaScript

The following just indicates as the user clicks the input box the default text will clear and if there is nothing when the user clicks away then replace with original text.

// Form Swap Values
$(function() {
	swapValues = [];
		$("input.searchfield").each(function(i){
			swapValues[i] = $(this).val();
			$(this).focus(function(){
				if ($(this).val() == swapValues[i]) {
					$(this).val("");
				}
			}).blur(function(){
				if ($.trim($(this).val()) == "") {
					$(this).val(swapValues[i]);
			}
		});
	});
});

Adding the HTML

And now you add a simple input with the proper class:

Final Code

Simple as that.

view demo
Clickable Box

download
Zip Package




Swap Values

4.) Back To Top Link

These ‘back to top’ links can be essential for pages that have a long vertical stretch, allowing the user to easily glide back to the top of the page to navigate smoothly. You will need an extra plugin script for this to take action, download the small javascript file and link it to your page as you did with the jQuery script. You can grab a copy of scrollTo here.

Adding the JavaScript

This uses the class .top to define where what link is going to send the user to the top.

// Back To Top
$(document).ready(function(){
  $('.top').click(function() {
	$(document).scrollTo(0,500);
  });
});

Adding the HTML

All you need to do is make sure you have a link defined with the class .top

Back To Top

Final Code

Simplicity.

view demo
Back To Top

download
Zip Package




Swap Values







	
		Back To Top

5.)On Hover Add/Remove Class

This one is almost essential for dumb fixes for IE6, as it doesn’t support most of the common hovers now in standard browsers – So YAY for jQuery as it comes to rescue!

Adding the JavaScript

//On Hover
$('.onhover').hover(
   function(){ $(this).addClass('hover_style_class') },
   function(){ $(this).removeClass('hover_style_class') }
)

Adding the HTML


Now I Hover!

Final Code

So, with some added css you can create a link with our first tutorial on clickable divs.

view demo
Clickable Box

download
Zip Package




On Hover






	
		Hover My Div
		This div demonstrates how javascript can be used to hover specific selectors.

Welcome To ALoveForDesign.com

Justin Mathew — Fri, 18 Jun 2010 00:43:21 +0000

Greetings and welcome to the first official welcoming of our web design blog. We aim to give back information to the online world of web design because we strongly believe in free information exchange and helping the new age of technology on the web. Over the generations web design has exploded into main stream media over running most of the world’s global broadcasting: tv, radio, newspaper, magazine – These all have been put available online and having a web site is almost a must now-a-days.

That’s Where We Come In

We know half the people in this world are getting advanced technology thrown at them and are expected to understand and follow the I.T. trends. We aim to aid the process of getting to know and understand what having a web site is all about, and if you put enough time and energy into learning the how to’s of web site design then the payback can definitely be worth it.

Free Stuff

Who doesn’t like free stuff? Here at ALoveForDesign.com we do not only offer free downloads of tutorials and projects but we’ll be holding contests in the next couple of months for people to win some real prizes.

Professional Services

We also provide web design services if you would like to check out more information on that you can go over to our About Page, which explains in more detail.