The Steps

So adding rounded corners to IE6, IE7, and IE8 is fairly simple thanks to css3pie . First things first, download the PIE distribution zip and save it.

You should have 3 files inside of the folder. Look for a file called pie.htc and drag it into your website directory. It can be place where just remember to call it correctly in the stylesheet.

Now we will create the rounded corners and call the effects. In the code below I have written some css. The #myelement is the variable that you can identify in your HTML document. I’ve also called for the pie.htc function in my stylesheet where I would like for rounded corners to work in IE.

#myelement {
       behavior: url(PIE.htc);
       border-radius: 15px;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
}

You should now have rounded corners in IE browsers. Remember that this is this development is still in beta so if you just so happens discover a bug or so report it to the css3pie team. I have not encountered a problem yet but everyone code is different so look out. I hope you guys enjoy this little hack. What are your thoughts on this and have you used css3pie before?

Call Css Externally

The method below is the normal method for calling a stylesheet via HTML document. Place code inside of the head tags.

<link rel="stylesheet" type="text/css" href="style.css" />

Call Css via stylesheet

The method below is the normal method for calling a stylesheet from a css document. Place code inside of your stylesheet. @ Import tells the css document to import another stylesheet.

 @import url("import.css");

Call Css Internally

The code below is a way for calling a stylesheet within a HTML document. Place code inside of the body tags.

<style>
/*Insert Style code here*/
</style>

Things you need

• CSS Image
• VIEW THE DEMO

The HTML

When creating rollover images/ css image sprites(Same things) all that is needed in the HTML are the div tags. We used the div tag to define the rollover image later in the css file. So inside of your newly open HTML document create a new div.

<div id="image-sprite"></div><!--end image-sprite-->

The CSS

The CSS is the most important part of creating rollover images because this is where we tell our HTML document to look for the styling of our images. So you’ve downloaded the example image that I’ve created for you all to use while during this tutorial. So as you can see we have an image that is 336px in height x296px in width. The width doesn’t really matter considering they’re are the same. The height is what we care about. So earlier I created two separate images in Photoshop. One of the images equal 168px and height. So I created 2 images and put them together which is how we got the height of 336px(168+168=336).

So lets style of rollover images. Copy the css code below in I will explain it.

#image-sprite {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
}

So above I have called the HTML div tag using css. Then I called for the css to grab the background image. The trick to the css rollover image is when you define the height you only put the height of one image. So the height of one image was 168px and the width like I said before doesn’t really matter because they’re both the same.

The Rollover Effect

Now it’s time to create our rollover effect. Copy the code below and I will explain it.

#image-sprite:hover {
	background:url(sprite.jpg);
	width:296px;
	height:168px;
	background-position:0 -168px;
}

So I applied a hover effect to our css file which tells the HTML document that when ever someone hovers over it to change the image. Everything is the same as our first div except I used the css tag background-position: to change images. The first zero in the background-position tag tells the css to move left or right and we did not want that because are images are stacked vertical. The right numeral -168px tells the the css to move up or down. I told the css to move down -168px which created our rollover effect. Now you’re all done.

There are many ways you can create css rollover images. The technique I showed you guys today is the very simple but can be used to create very
complex rollover images. I hoped you learned something from this tutorial today.

Note: Please place the conditional stylesheet code inside the head tags or else they will not work.

The code below Targets every version of Internet Explorer

<!--[if IE]><link rel="stylesheet" type="text/css" href="IE.css" /><![endif]-->

The code below Targets Internet Explorer 7 Only

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7.css"><![endif]-->

The code below Targets Internet Explorer 8 Only

<!--[if IE 8]><link rel="stylesheet" type="text/css" href="IE7.css"><![endif]-->

If you wanted to target multiple browsers but not include one you would use the code below. The code below tells whatever browsers your using to target every Internet Explorer from IE7 and down. If you wanted to target IE8 then you would simply change the 7 to 8.

<!--[if IE lt 7]><link rel="stylesheet" type="text/css" href="IE7.css"><![endif]-->

So if you every run across a bug in IE feel free to use one of the conditional stylehseet methods to target and catch those bugs. I hope this tutorial was helpful to you. Now go catch some bugs!

DEMO

The HTML

When starting website I always start with the basic HTML tags such as the Head, Title, and Body tags. Then I’ve added some divs and gave them all a custom name. I give them all a custom name so I can later define them in the stylesheet.

• Masthead: – Section will contain and hold all logo, and header information.
• Container – Container will contain and hold all content and columns

Copy and paste the layout below into notepad or dreamweaver(whatever program you use for coding) and save it as index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title Goes Here</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">

</div><!--end masthead-->

<div id="container">

</div><!--end container-->

</body>

</html>

More divs

For the Masthead section we will insert two divs. The first div we will enter is logo. The logo div will contain our logo. Then we will enter another div right below it and name it header. The header div will be for our header text and slogan.

Copy and paste the code below inside of the Masthead div.

<div id="logo">
</div><!--end logo-->

<div id="header">
</div><!--end header-->

Now that we have our header section taken care of we will now insert our container divs. Create 3 divs, left_col, right_col, and page_content.

• left_col: – This will contain/hold all left column text and information.
• right_col: – This will contain/hold all right column text and information.
• page_content: – This will contain/hold all main column text and information.

<div id="left_col">
</div><!--end left_col-->

<div id="right_col">
</div><!--end right_col-->

<div id="page_content">
</div><!--end page_content-->

Our final div will be out footer div. We do not want to place the footer inside of our container tag because we would like for it to span across out entire screen. Also I always place it outside of the container so it can stay at the bottom of the page. Create a new div and call it footer.

copy in paste code below after the end of the container div.

<div id="footer">
</div><!--end footer-->

Before we begin styling our page we will need to add some text. Google search lorem ispum and you find loads of gibberish text that you can use for this tutorial. Here is what the html looks like with the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>3 Column Layout | Webdevtuts</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
	<div id="logo">
	<h1>Logo</h1>
	</div><!--end logo-->

	<div id="header">
	<h1>This is Your Header</h1>
	<p>This is your header</p>
	</div><!--end header-->
</div><!--end masthead-->

<div id="container">
	<div id="left_col">
	<h1>Left Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end left_col-->

	<div id="right_col">
	<h1>Right Column</h1>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have
	suffered alteration in some form, by injected humour, or randomised words which don't
	look even slightly believable. If you are going to use a passage of Lorem Ipsum, you
	need to be sure there isn't anything embarrassing hidden in the middle of text. All the
	Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary,
	making this the first true generator on the Internet. It uses a dictionary of over 200
	Latin words, combined with a handful of model sentence structures, to generate Lorem
	Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from
	repetition, injected humour, or non-characteristic words etc.
	</p>
	</div><!--end right_col-->

	<div id="page_content">
	<h1>Main Column</h1>
	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>

	<p>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
	classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
	professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
	consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature,
	discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum
	et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
	theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
	sit amet..", comes from a line in section 1.10.32.
	</p>
	</div><!--end page_content-->
</div><!--end container-->

<div id="footer">
<p>&copy; 2010 to Webdevtuts. All rights reserved.</p>
</div><!--end footer-->

</body>

</html>

The Css

Ok now that we have the html taken care of its time to do the dirty work. It is now time to style our 3 column web layout. Before we begin styling have to go over something really fast. In a normal website layout many people use fixed layouts but for this tutorial I am using a fluid layout.

• Fixed: – Layout is the same width and all browsers. Majority of websites use this method
• Fluid: – Layout re-sizes to users screen. Not many people use this method because it is hard styling for it but in the long
  run it’s well worth it

Copy and Paste the code below into your stylesheet. I will explain each one below.

body {
	margin: 0;
	padding: 0;
}

#masthead {
	min-width: 600px;
	background:teal;
}

#logo {
	float: left;
	width: 200px;
	background:orange;
}

#header {
	margin-left:200px;
	background:olive;
}

• body – Body class define the entire page seen on a screen. It has a margin, and padding of zero so all presets and others styles can also be set at 0.
• masthead – The masthead has a min-width of 600px which means it will never get smaller then 600px. Also it has no padding, borders, or margins.
• logo – Logo is floated to the left side of the page and has a width of 200px
• Header – Since we’re using a fluid layout we will not give the header a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left of 200px which gives us space from the left side of the page.

Now we will style our container and everything inside of it. Copy the css below and add it to your stylesheet.

#container {
	clear: both;
	min-width: 600px;
}

#left_col {
	float: left;
	width: 200px;
	background:grey;
}

#right_col {
	float: right;
	width: 200px;
	background:grey;
}

#page_content {
	margin-left: 200px;
	margin-right: 200px;
	background:red;
}

• container – Container id defines the container which holds all the content and both sidebars. I has a min-width of 600px which means it will not get any smaller than 600px. It also clears all floats to the left and right. Does not hold footer
• Left_col – The left column is floated to the left side of the page and has a width of 200px
• right_col – The right column is floated to the right side of the page and has a width of 200px
• page_content – Since we’re using a fluid layout we will not give the page content a fixed width because we want it to re-size according to the users screen size. So we’ve added a margin to the left and right of 200px which gives us space from the left and right side of the page.

The Footer

The footer is the last part to are 3 column layout. Copy the code below into your stylesheet and I will explain it below.

#footer {
	clear: both;
	background:teal;
}

• footer – The footer is at the bottom of the page and has no width nor height applied to it because it usually is just a line of text. It has a style of clear both which mean to clear both the left and right and then pushes the footer down to the bottom of the page.

There you go. You should now have a 3 column layout that adjusts to all screen sizes. I hope this tutorial has helped you understand how to create a fluid 3 column layout. Thanks for following this tutorial.

Mixing Fonts

When I first begin designing and coding for the web I would always mix my typography. For example I would use a serif font(Georgia) with a sans-serif(Arial) font. If you are just starting off you might think that those fonts can be used together but they cannot. Serif fonts are different from sans-serif fonts.

What fonts can I mix?

I bet you’re wondering what fonts you can use for your next design or web project. There are 3 main types of font categories

• serif
• sans-serif
• monospace

Serif fonts are commonly used by publishing companies or if you have ever been to a news site or magazine site you will often find that they are using one of the serif fonts.

Serif

• Georgia
• Palatino Linotype
• Times New Roman
• Book Antiqua

Sans-serif fonts are mostly used by all types of websites. I usually use San-serifs fonts for most of my projects.

sans-serif

• Arial
• Helvetica
• Arial Black
• Impact
• Lucida Sans Unicode
• Lucida Grande
• Tahoma
• Veranda

• Geneva

Monospace fonts are not used as often as Serifs, and sans-serif fonts but they are used.

monospace

• Courier New
• Lucida Console
• Monaco
• Courier

Line height

Line height is very important when it comes to making your text look neat and clean. Often if you just leave a text as is then it will look cluttered, and tight. When I first began working with text I never really understood how to change the line height of a text and what it actually did. To give you a better understanding of line height I will give some examples below so you could better understand what I am talking about.

There is no line-height below just the default text. So I applied 12px line height to the paragraph below and as you can see the text looks cluttered and not very attractive.

Arial Font(line-height) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a line-height of 24px applied the paragraph below.

Arial Font(line-height) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

Think of the line height as the lines on a normal sheet of paper. If you were to write paragraphs but not on the lines then it wouldn’t look so good. Now let’s say you wrote on the lines(as you would usually do). If someone were to read your paper(Teacher) then they find it very easy to read.

Letter Spacing

Letter spacing is something that should not be overlooked. Many times when creating different types of paragraphs we might like to have some spacing in between words or letters.

There is no letter spacing in the paragraph below.

Arial Font(spacing) BAD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

There is a letter spacing of 1px in the paragraph below.

Arial Font(spacing) GOOD

Marcell went to the skate park to train for an up and coming skate competition. He knew he had to practice considering there were many talented kids entering the contest.

So as you can see typography is very important when coding for the web. I have covers just the basics in this article but will teach you more in the other series. If you have a question just leave a comment below and i will help you there.

DEMO

Before we begin this tutorial it would be best if you create a New folder and inside of the new folder create a index.html file and a style.css file.

The Markup Lanuage/HTML

Open up your text editor

Note:Before you write HTML it is always good to have the basic HTML tags already written. Place the basic HTML tags below into your index.html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Webdevtuts(Speaking Navigation Menu)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

</body>

</html>

Now we’re going to start writing the markup for our navigation menu. Let’s create our nav menu outline. I’ll explain each div later in this tutorial when we start writing the css. Copy the code below into your index.html file inside of the body tags.

<div id="menu">
	<div id="menu-wrap">
		<ul id="navigation-main">
		</ul><!--end navigation-main-->
	</div><!--end menu-wrap-->
</div><!--end menu-->

Now were going to add our menu links. Ok you might get confuse with the markup below but do not worry I will explain it. Ok so we first had just our nav outline then we added are lists(li) which holds are navigation links. Inside of the list items are span tags which hold are so call tags for that specific link. For example Home is a list and inside of the home list we have the href tags which is use to link an item. Outside of the href tag are span tags with an assign class that we will later edit using css. Inside of the span tags are little description tags that I’ve added.
,

<div id="menu">
	<div id="menu-wrap">
		<ul id="navigation-main">
			<li><a href="">Home</a><span class="nav-sec">The Beginning</span></li>
			<li><a href="">Articles</a><span class="nav-sec">Tips, Tricks, Advice</span></li>
			<li><a href="">Tutorials</a><span class="nav-sec">Photoshop Techniques</span></li>
			<li><a href="">Resources</a><span class="nav-sec">Fonts, freebies, wallpapers</span></li>
			<li><a href="">Anything</a><span class="nav-sec">Description</span>
			<li><a href="">Anything</a><span class="nav-sec">Description</span>
		</ul><!--end navigation-menu-->
	</div><!--end menu-wrap-->
</div><!--end menu-->

The Css

Ok so now we’re going to style our navigation menu using css.

Note: Before css is inserted, insert Eric Meyers css reset. Work good with this nav tutorial.

#menu{
	background:#000;
	height:75px;
}

#menu-wrap {
	margin:0 auto;
	width:960px;
}

#navigation-main {
	padding:15px;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;
	float:left;
}

#navigation-main li {
	float:left;
	margin-right:20px;
}

#navigation-main li a {
	display:block;
	color:#fff;
}

#navigation-main li ul  {
	display:none;
	z-index:80;
}

#top-nav-info {
	background:#dddddd;
	float:left;
	width:1000px;
}

#top-nav-sec li a {
	padding:15px;
	display:inline;
	height:42px;
	color:#a19f9f;
}

#top-nav-sec li a:hover {
	color:#1F1E1E;
}

.nav-sec {
	display:block;
	font-size:12px;
	font-family: lucida sans unicode;
	font-weight:normal;
	text-align:center;
}

You should now have a speaking block navigation menu using pure css. I did not explain it much because I know many people do not want to read a very long sententce and the best way to earn is to experiment with things. Mess around with the code and you will be fine.

Demo

Folder Structure

In the folder of your for your image gallery you should have 3 folders and 2 files.

• Css -Contains the jquery css
• Images – Contains images
• Js – Contains the javascript
• index.html
• style

The HTML Structure

For the image gallery I simply wrapped the gallery in a div and added the images. Every 4 image has two different classed assigned to them. For example the first 4 images has a class name of thumb-small and for the other 4 images they have a class name of thumb-bottom.

<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-top" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>
<a href="images/skate1.jpg" title="You can write anything in here"><img class="thumb-bottom" src="images/skate1.jpg" alt="skateboarder" title="skateboarder"/></a>

The Css

For the Css you might wonder what -webkit, and -moz-transform is. Webkit is a Css3 tag that targets the safari web browser and moz-transform is a Css3 tag that targets the Mozilla Firefox web browser. In the css

1. -webkit-transform: – Used to rotate the images
2. -webkit-transition: – Used to zoom/ease in on the images

.thumb-top{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-bottom{
	clear:none;
	padding:10px 10px 30px 10px;
	height:200px;
	width:200px;
	background:#fff;
	-moz-transform:rotate(-4deg);
	-webkit-transform:rotate(-4deg);
	-webkit-transition: -webkit-transform 0.1s ease-in; /* Tells webkit to make a transition of a transform */
	border:1px solid #ececec; /* This border merges with the colour of the shadow in supporting browsers
	but in non-supporting browsers the border acts as the edge of the image */
	margin-bottom:25px;
}

.thumb-top:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(-8deg) scale(1.2);
	-webkit-transform:rotate(-8deg) scale(1.2);
}

.thumb-bottom:hover{
	z-index:100;
	position:relative; /* Make the z-index work in Safari */
	-moz-transform:rotate(4deg) scale(1.2);
	-webkit-transform:rotate(4deg) scale(1.2);
}

#gallery {
	margin-top:20px;
}

Inserting and activating jquery plugins

First things first when activating a jquery plugin is to simply make sure we call in the jquery script. Insert the code below into the head section of your document. The code below calls in jquery, then the two jquery plugins, and finally the plugin Css.

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Now we want to add the script below to the body of our HTML document right before the end of the body tag.

<script type="text/javascript">
$(document).ready(function(){
$(".thumb-top,.thumb-bottom").fadeTo("slow", 0.3);
$(".thumb-top,.thumb-bottom").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

$(function() {
    $('#gallery a').lightBox();
});
</script>

For the code below I will try to explain it the best way I can so you can better understand it. I know not everyone is good with inserting Javascript plugins or changing functions.

The first function inside of the script tag targets the light box plugin. The light box plugin is when you click on an image and the image enlarges without being taken to the direct image location.

For this $(“.thumb-top,.thumb-bottom”).fadeTo(“slow”, 0.3); function it just tells jquery to fade to anything with the class of thumb-top or thumb-bottom. So whenever your mouse is not on the image it will be darken.

For this $(“.thumb-top,.thumb-bottom”).hover(function(){ function it just tells you on hover, or whenever you move over the image with your mouse that it will highlight the image.

For the $(‘#gallery a’).lightBox(); function it just asks you what id tag would you like for it to bring up whenever you click on something with the tag of a href. For example I have the images wrapped inside of the id gallery and every image has an a href assign to it so whenever you click on it jquery knows when to call for the second lightbox function.

Note: Rotation does not work in Internet explorer browsers do to lack of support of Css3.

After that you should now have your very own css3/jquery image gallery. I am no jquery expert but I try to help you guys understand it and a easy way instead of using words that you guys are not familiar with.

Credit

Credit goes to Csswizardry for the css3 image gallery.
Credit goes to Leandrovieira for the lightbox plugin.

Click here for Demo

Getting an active state when using css can be very frustrating if you’re not that familiar with css. Many developers that are new to css often think it is the end of the world when really the active state can be accomplish with very little code.

The Body

The body is of the most important roles when you’re trying to create an active page using css. The reason the body tag is very important because when its time to define what page the user is on the body tag will keep that page active. You’re probably thinking that just body tag can complete that and truth is it can but with a little bit of help from an id or class tag. to give the body a id or class name you would simply do the following.

body id="home"
or
body class="home"

Everytime you create a new index page make sure you change the body class or id name and you will later know why.

The HTML

For the HTML I created/ a basic navigation menu with and unique id name. Notice every link such as home, about, etc all have different id names. The reason they all have different id names is so we can identify that certain linktag in the css file.

<div id="menu-nav">
	<ul>
		<li id="home"><a href="index.html">Home</a></li>
		<li id="about"><a href="about.html">About</a></li>
		<li id="team"><a href="team.html">Team</a></li>
		<li id="video"><a href="video.html">Video</a></li>
		<li id="contact"><a href="contact.html">Contact</a></li>
	</ul>
</div><!--end menu-nav-->

The CSS

Ok so you now have and idea of how the menu has to be laid out using html. Now its time to define each id element from the html. If you look at the code below
you will notice that every css tag has the body id, followed by the menu id with the a(active) tag and finished with the css properties. Take a look at css and compare it to the html.

body#home #home a,
body#about #about a,
body#team #team a,
body#video #video a,
body#contact #contact a{
	padding:10px;
	background:#FF0000;
	margin-right:5px;
	color:#FFFF00;
	text-decoration:none;
}

This was not a tutorial but I truly hope it helped you guys out. I know many people face this problem quite often and do not know what to do. It was a simple, fast, and sweet technique.