Don't forget to include the jQuery library

You'll need to include the jQuery library in the of your html document in order for this tutorial to work correctly. The easiest way, and some say the best, is to grab the url for the jQuery files hosted by Google. You can use the call below:

A little bit of CSS
Make it look a little less plain.

Build a Box

Next, we will throw together some HTML really quick to manipulate using jQuery. Nothing fancy here – a couple list items, a div and some paragraph content. (I'm using generic id and class names for this example – when coding you should try to use descriptive id and class names)

Finally some jQuery

Start off with a couple of script tags – just like JavaScript. In between the script tags the jQuery code starts with a document ready call.

jQuery Click and Change Background Color
We want the click event to happen on the list items we created – Change Color and Slide. First lets make the background color of the content box change.

We use jQuery to call the .click() event on the list item for Change Color which is <li id="#color"> – let's grab that element by it's ID name and add the .click() method to it:

The function() {} inside the .click() event is going to tell jQuery what we want to do once the ID is clicked. So, let's add some CSS to the ID and give it a background color:

Simple – try it out – click on Change Color and the content box background should change to a greenish color.

jQuery Click Toggle Slide Up and Slide Down
We are going to use the same .click() method on the other list item we created – <li id="slide">.

Now to make it slide up and then slide down using the jQuery slideToggle method on the box.

There you have it – a couple of quick and easy examples of the jQuery .click() method. See how easy jQuery just made it to create a cool little item that slides up to 'disappear' and the slide back down 'into view'.

See the Results
Here is all the code put together:

Here's a quick CSS Tip you can use if you need to style an item with two(or more) classes.

Sometime you might need to make something stand out a little more than the rest of the elements using the same CSS Class. You could throw a span tag around it or you can uses a second CSS Class. This way if you need to use this style again you aren't constantly having to type out the whole span tag.

It's actually pretty simple…
The HTML

<div class="one two">This text has TWO classes.</div>

The CSS
.one
{
color: #ff0000;
}
.two
{
font-size: 1.5em;
}

and here is the result:

A simple but very useful CSS Tip.

GIMP Tutorial – The User Interface

GIMPLite Quickies

Important GIMP hotkeys

Transparent Glass Lettering

Glow Effect

How to Create a Gradient Background Image in GIMP

Making a Web 2.0 Logo in GIMP

Make a Gimp pattern from scratch

Quickmask Tutorial

How To Create Your Own Website Design Using Gimp

BG Tutorial 1: Caution tape

Vista Button

30 Ultimate Web 2.0 Layer Styles for Gimp

45 Photo Editing Tutorials for Photoshop – A great list of tutorials to help you learn about photo editing in Photoshop.

Designflavr – I just found this site and I really enjoy it. "DesignFlavr is a breed of website that hopes to deliver the latest and freshest art and design straight to you with no frills and no hassle. The concept behind this website is to help support the vast and ever growing number of Designers and Artists that reside here on the World Wide Web."

css-warfare – Another inspiration site with a lot of good CSS designs.

25 MORE Reasons You Might Be A Hardcore Graphic/Web Designer – A list of reasons you might be a hardcore graphic or web designer over at bittbox. The first list is also available.

I recently came across a great article over at perishablepress.com that explains what they are used for and gives a long list of different types of resets. I have unknowingly used resets before when setting padding and margin to 0 for different elements and then adjusting it to my liking.

It's important to design sites with cross-browser compatibility in mind. With the different ways that browsers handle CSS and the fact that each browser has it's own default setup for things like margins and padding, adding these global resets can really help the design process. I plan on implementing some of these resets in future design projects.

Here is an example of a CSS reset. To find a lot more check out this Killer Collection of Global Reset Styles.

* {
     padding: 0;
     margin: 0;
}

The * is called a wildcard symbol. Here it is used as a wildcard selector which means that these properties are applied to every element. So, all the padding and margins are reset to 0.

You can add other properties to the wildcard selector. Some people will add border: 0; and outline: 0;. The above, with padding: 0; and margin: 0;, is one of the most popular CSS resets used.

The post at perishablepress is worth a read, and they have a lot more reset options.

:link – this pseudo-class is used to style a normal unvisited link. When you are styling links you should put this pseudo-class first.

a:link
{
color: #339966;
}

Notice that we use the HTML tag, or selector, a because that is how a link is represented in HTML. The :link represents the pseudo-class. Then you set your properties between the curly braces. This CSS will change all the unvisited links to a green color.

:visited – this pseudo-class is used to style a visited link. When you are styling links you should put this pseudo-class second.

a:visited
{
color: #00ffff;
}

You will see that most sites will set the visited link color to the same color as the normal a:link color.

:hover – this pseudo-class is used to style the mouse over effect of a link. When you are styling links you MUST put this after a:link and a:visited.

a:hover
{
color: #FF0000;
}

:active – this pseudo-class is used to style an activated link element. When you are styling links you MUST put this after a:hover.

a:active
{
color: #FF00FF;
}

This effect is seen while clicking the link. You will find the a lot of sites will style a:hover and a:active the same.

Putting it together in the HTML.

<html>
<head>

<title>Link and pseudo-classes</title>

<!-- Embedded Styles -->
<style type="text/css">
a:link
{
color: #339966;
}

a:visited
{
color: #00FFFF;
}

a:hover
{
color: #FF0000;
}

a:active
{
color: #FF00FF;
}

</style>

</head>

<body>
<p>
<a href="#">A Link</a> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed <a href="#">diam nonummy
nibh</a> euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.
</p>

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

You can see how the styles effect the links. You can also combine these anchor CSS pseudo-classes with regular CSS classes. This can help you style links differently throughout the page.

a.className:link, a.className:visited
{
color: #ff0000;
text-decoration: none;
}

a.className:hover, a.className:active
{
color: #00ff00;
text-decoration: underline;
}

The above CSS shows you how to add a class name to the pseudo-classes and how to style multiple elements at the same time. className can be whatever you want to name your class. You can put the :link and :visited pseudo-classes together by adding a comma between declarations. The HTML would look like this:

<p>
<a class="className" href="#">A Link</a> Lorem ipsum
dolor sit amet, consectetuer adipiscing elit,
sed <a class="className" href="#">diam nonummy nibh</a> 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

All you need to do is add class="className" to the anchor tag.

A Link Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Styling links using CSS is easy – just remember to put the pseudo-classes in the correct order – :link, :visited, :hover, :active.

The HTML

.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}

Some text in the box

Let's take a closer look at the css border properties. We start off by creating a border: that has a 3px 'stroke' that is solid and the color black. The next property we use is border-color:. The format here is TOP, RIGHT, BOTTOM, LEFT – or clockwise around the square starting from the top. Even though we set a color in the border: property, we put border-color below it which gives it precedence – or it 'overwrites' the border's color.

Need the HTML – I used an embedded stylesheet here, but this will work the same in an external stylesheet.

<html>
<head>
<title>CSS Different Colored Border</title>

<style type="text/css">
.exampleBox
{
width: 100px;
height: 100px;
border: 3px solid #000;
border-color: #ff00ff #00ff00 #0000ff #00ffff;
}
</style>
</head>

<body>

<div class="box">
<p>
Some text in the the box
</p>
</div>

</body>
</html>

He has a few other videos…
Link Building 101 Rap
Paid Search 101 Rap
Social Media Addiction Rap
Conversion Closing Rap
Worth a watch and you might actually learn something.

First of all you need a few files – if you have your own textures that's great. I am using a couple of concrete textures. We also need some sort of object to add the texture to. I'm just going to use an RSS icon, but feel free to try other things, like text.

The Background

Open a new file. I made mine 800px X 600px. The size doesn't matter that much.

Fill the Background layer with a color. I think darker colors look better with the concrete textures we will be using. My color #2c2721.

Create a new layer and name it light spot.

Grab the Gradient Tool. Make it a Radial Gradient and pick a very light gray and a medium gray as your background and foreground colors. Foreground #e1e1e1 Background #898989
Drag from the center of the image almost to the top.

Set the Blending Mode for the layer to Overlay
This gives us a spotlight look.

Texture the Background

Now, we will add a texture to the Background layer. I will be using the second concrete texture from above.

Go to File->Place… and browse to where you saved the second concrete texture from above. Select it and click Place.

The image will come in ready to be resized or moved around. Resize it to cover the whole image/background and hit Enter.

Rename the layer that was created to bg texture.

Right-click the bg texture layer and select Rasterize Layer.

I have found that changing the Layer Blending mode to Multiply works best for texturing. Feel free to experiment with other Blending Modes. Like Overlay, Soft Light, and Hard Light.

Change the bg texture's Layer Blending mode to Multiply and adjust the opacity to about 50%.

What we've got so far.

The Icon

Next, we will bring in our next item to texturize. I'll be using the RSS icon from above. If you are using text, you don't need to bring anything in – just type out your text.

Go to File->Place… and navigate to where you saved your RSS icon. Select it and click Place.

Resize the image if you need to and hit Enter. Rename the layer icon and right-click the layer and select Rasterize Layer.

Double-click the icon layer to change its Layer Styles. Add a Drop Shadow and change the Angle to 90.

Next, right-click the icon layer and go to Duplicate Layer… rename it reflection and hit OK.

Drag that layer below the icon layer. Double-click the reflection layer to change its Layer Styles and remove the check by Drop Shadow.

With the reflection layer selected. Go to Edit->Transform->Flip Vertically.

Select the Move tool (keyboard shortcut 'v'), hold down the shift key, and drag the reflection down below the other icon.

Now we will add a Layer Mask to make the reflection fade out.

Still on the reflection layer, click the Add Layer Mask icon at the bottom of the layers pallet.

Grab the Gradient tool – Foreground color #626262 Background color #000000.
Start your drag at the top to the reflected icon and drag to the bottom of it.

Create a new layer and name it shadow.

Grab the brush tool(keyboard shortcut 'b') and set the color to black, size to about 65, and Hardness to 0%.

Brush just underneath the main icon. Set the shadow layer's Opacity to about 35%.

Finally – Texture the Icon

Now, we can add a texture to the icon. I will be using the first concrete texture from above.

With the icon layer selected, go to File->Place… and browse to where you saved the first concrete texture, select it and click Place.

Resize the texture if you need to, I just left it the size it came in at – we will get rid of the extra later – hit enter.

Rename the layer icon texture and right-click the layer and select Rasterize Layer.

Change the icon texture layer's Blending Mode to Multiply and set the Opacity to about 50%.

With the icon texture layer selected, hold down the ctrl key and left-click on the icon layer's thumbnail to make it our selection.

Now, hit ctrl+shift+i to invert the selection or go to Select->Inverse.

Make sure the icon texture layer is still selected and hit the delete key on your keyboard. This will get rid of the extra texture image we just brought in.

And there you go – the finished product.

Click to Enlarge

Download Files