Awesome Cufonized Fly-out Menu with jQuery and CSS3
In this tutorial you can learn how to create a full page cufonized menu that has two nice features:

Subtle CSS3 Typography That You’d Swear was Made in Photoshop
Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby!

CSS3 Minimalistic Navigation Menu
Here is a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers:

CSS3 Background-Clip: Text
To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation: Click on the image to read more:

Create a Vibrant Digital Poster Design with CSS3
Follow this walkthrough of the making of Circlicious — a vibrant and abstract digital poster design made purely of HTML and CSS:

How to create a kick-ass CSS3 progress bar
In this tutorial you can learn how to create a fancy progress bar using CSS3 and jQuery, without using Flash or even images:

Colourful Rating System
In this tutorial you are going to follow a relatively simple jQuery tutorial. Rating systems are used on a lot on websites, for example on how to rate a certain product, article or comment:

Create Animated Price Grid Using CSS3
In this tutorial, an animated Price grid will be created with only the help of CSS3. No jQuery, No Images, No Flash at all:

Related Posts Slide Out Boxes with jQuery and CSS3
In this tutorial, a fixed list is created at the right side of the screen with some thumbnails sticking out:

Halftone Navigation Menu with jQuery & CSS3
In this tutorial you will find out how to create a CSS3 and jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links:

How to Create A Multi-Step Signup Form With CSS3 and jQuery
In this tutorial, a simple multi-step signup form using CSS3 and jQuery will be created. To spice things up a bit, we will include a progress bar with the form, so the users will be able to see the percentage of form completion:

Coding a Rotating Image Slideshow w/ CSS3 and jQuery
In this tutorial you are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow:

Animated Navigation Menu with CSS3
In this tutorial you will be shown how to create an animated navigation menu with CSS3:

Create Ajax Loading Animation with CSS3
Normally, frontend developers use GIF animations for Ajax data loading. But now CSS3 animation properties allow us to achieve the same Ajax loading animation effect, without GIF animation required:

Slick CSS3 Animated Image Caption
This is an experiment to create an animated image caption. You might have seen enough of this effect all over the web, but here we’re trying to achieve the same effect using CSS3 Transitions:

Create Animated Landscape using Pure CSS3
In this tutorial you’ll see how you can create a landscape effect with pure CSS3 technology:

Sticky Notes with CSS3
In thios tutorial you can see how sticky notes with CSS3 can be created:

How To Create a Sexy Vertical Sliding Panel Using jQuery and CSS3
In this tutorial you can find out how to create a sexy vertical sliding panel using jQuery and CSS3:

Display Social Icons in a Beautiful Way Using CSS3
The goal here was to slowly fade-in and fade-out the opacity changing, and animate the position of the tooltip a little bit:

Animated Wicked CSS3 3D Bar Chart
In this tutorial you can learn how to create a beautiful 3D bar chart::

3D Animation Using Pure CSS3
The perspective property is what we need to create the 3D effect. Using transform and transition, we can create 3D animations using pure CSS3:

Cross-Browser Rounded Buttons with CSS3 and jQuery
In this tutorial, a cross-browser with rounded buttons will be created with the help of CSS3 and jQuery:

Slide Down Box Menu with jQuery and CSS3
In this tutorial, a unique sliding box navigation is created. The idea is to make a box with the menu item slide out, while a thumbnail pops up:

Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you can learn how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, the images of that album are shown as a beautiful photo stack:

How To Change Default Text Selection Colour
Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further:

Making Better Select Elements with jQuery and CSS3
Here you can find out how to build a script, one which is going to take an ordinary ‘select’ element, and replace it with a better looking, markup powered version, while keeping all the functionality intact:

CSS3 Animated Bubble Buttons
Here is a useful set of animated buttons created with the power of CSS3s multiple backgrounds and animations. No JavaScript necessary:

BounceBox Notification Plugin with jQuery & CSS3
In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3:

Use CSS3 to Create a Dynamic Stack of Index Cards
In this tutorial you can learn how to create a dynamic stack of index cards solely with the help of HTML and CSS3 features:

Interactive Image Vamp up with jQuery, CSS3 and PHP
In this tutorial, an online application for giving some funny touches to an image is created.  jQuery, jQuery UI and PHP are needed:

Contextual Slideout Tips with jQuery & CSS3
Knowing the importance of HTML standards, here is a set of contextual slideout tips with jQuery & CSS3 which are ideal for product pages and online tours:

Carbon Fiber Signup Form with PHP, jQuery and CSS3
In this tutorial you can see how you can make a carbon fiber signup form using PHP, jQuery and CSS3:

Sexy Image Effects Similar to Flash – in Pure CSS3
Here is a very different image effect that can be achieved by not only using Flash but also CSS3:

Awesome Buttons using CSS3
Here you can check out a new look to Buttons that can be adjusted in CSS3:

Getting Clever with CSS3 Shadows
As soon as we detach a shadow from the element, itself, we can then transform the shadow in interesting and creative ways. Click on the image to find out more:

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
In this tutorial you can learn how to build a cross-browser with an awesome CSS-only drop-down mega menu, using nice CSS3 features:

Flexible, Mobile-First Layouts with CSS3
CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating:

CSS3 Slideup Boxes
Follow along and see how we can use a few very simple CSS3 transitions to create a “slideup” box effect:

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
In this tutorial you can take a look and see what can be achieved with the help of HTML5 and CSS3 as well as some jQuery:

Fancy Image Hover Using CSS3
In this tutorial you can learn how to create a fancy image hover with CSS3. As you all know, we can have cool image hover effects using jQuery. By using transform and transition properties of CSS3 we can have an even better effect:

CSS3 Dropdown Menu
Here is a Mac-like multi-level dropdown menu that can be created using border-radius, box-shadow and text-shadow:

Fun with CSS3 and Mootools
These examples came about when experimenting with the ‘extend’ property in MooTools:

Colorful Sliders with jQuery & CSS3
In this tutorial you can learn how to use jQuery and the new transformation features brought to you by CSS3 to create a three dimensional dynamic slider effect:

Coding a CSS3 & HTML5 One-Page Website Template
In this tutorial you are going to make a HTML5 web template by using some of the new features brought to you by CSS3, jQuery and the ‘ScrollTo’ plug-in:

Create a Yoyo with jQuery and CSS3
Here you can learn how to create your own yoyo with the help of CSS3 and jQuery:

How to Create Depth and Nice 3D Ribbons Only Using CSS3
In this tutorial you can learn how to create nice 3D ribbons with the help of CSS3 only:

Create a Fancy Web Form with Field Hints Using Only CSS3
Here you’ll be shown how to create a fancy web form with field hints using only CSS3:

Pure CSS Social Media Icons
This is an experiment that creates social media icons using CSS and semantic HTML:

Build a Simple Portfolio Image Gallery with CSS3
Here’s how you can use CSS3 to create a Javascript-free gallery that enlarges your images on hover:

Create Beautiful CSS3 Typography
In this tutorial, you will find out how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3:

Old School Clock with CSS3 and jQuery
Here is an interesting tutorial on how to create an old school clock with the help of jQuery and CSS3 features:

Build Awesome Practical CSS3 Buttons
Here is a video tutorial that will show you how to build some awesome practical CSS3 buttons:

(ik)

Color Scheme Designer
This tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen.

Ultimate CSS Gradient Generator
It is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.

CSS Color Codes
This tool offers two options for furnishing the hexadecimal and RGB color codes. You can pick the color from the color picker and then copy its hexadecimal value from the bottom field.

Colors Pallete Generator
This is a powerful tool that generates a color palette derived from the primary colors of the image that you upload. It is a useful tool for rapidly grabbing a particular color within an image for inspiration. With this, you can also generate Photoshop swatches and CSS styles.

CSS Colors
This color chart offers more than 16 million colors with both RGB and hexadecimal color modes.

Gradient Image Maker
This tool allows you to easily generate a gradient image of 3 types with on the spot previewing. With this tool you can create gradient images that you can use everywhere in your web page design.

CSS Layouts Tools

templatr
It is a template generator that lets you create beautiful templates for your blog and web design without requiring any HTML and CSS knowledge.

Free CSS Template Code Generator
It is a free HTML – CSS template generator that generates a three column layout without using any Tables. This template generator produces a custom-made template that can be used to control the look and feel of an entire website.

Firdamatic: the Design Tool for the Uninspired Webloggers
This tableless layout generator lets you easily create and customize layouts by simply completing a form.

CSS Layout Generator – CSS Portal
Another layout generator with which you can create a fluid or fixed width column layout, with up to 3 columns, header, footer and menu.

CSS Layout Generator
Another CSS Layout Generator that allows you to create your own template by using HTML and CSS. You can create a template with up to 3 columns and a header and footer.

Layout Generator
This tool generates multi-column and grid layouts with CSS 2.0 techniques by using pixels, percentage or em.

CSS Layout Generator
With this tool, you can modify the header, footer, sidebars and layout width and can set the document type as XHTML or HTML strict or transitional to see the preview in the same page.

YAML Builder
This tool is designed for visual development of YAML based CSS layouts.

CSS Grids Tools

The 1KB CSS Grid
It is a lightweight tool with which you can streamline page templates for content management systems.

Variable Grid System
It is a quick way to generate an underlying CSS grid that is based on the 960 Grid System.

GRIDINATOR
This tool allows you to generate grids for the 960.gs, Golden Grid, or 1KB Grid. You can even generate a basic generic grid.

Blueprint Grid CSS Generator
With this tool, you can generate more flexible versions of Blueprint’s grid.cs and compressed.css and grid.png files.

CSS Grid Calculator
This calculator allows you to envision page layouts and draw grids in a variety of ways. You can have an accurate visual feedback on how text blocks and page divisions will appear within a browser window. You can also return style declarations for divisions and text to copy and paste into style sheets.

Grid Designer
This tool allows you create design grids by giving you options to customize Columns, Pixels, Gutters and Margins.

Em Calculator
Em Calculator is a JavaScript tool that lets you design scalable and accessible CSS design. This tool converts pixels to their relative em units based on a text size.

CSS Menus and Buttons

CSS Menu Maker
This tool allows you create custom, cross browser compatible website menus.

CSS Menu Generator
This menu generator lets you generate CSS and HTML codes which you need to create an appealing set of text based navigation buttons.

My CSS Menu
This tool provides an easy way to create cross browser compatible CSS menus. With this tool, you can create Horizontal, Vertical, Drop-down web navigation.

Tabs Generator
Another CSS navigation Tab Menu generator that allows you tweak size, colors, corners and more to generate unique designs that can be downloaded for your use.

List-O-Matic
With this tool, you can choose the content, layout and presentation of your list-based navigation menus.

Button Maker Online
This tool creates XHTML valid micro buttons (80×15). You can also create larger 88×31 buttons.

CSS Button & Text Field Generator
This tool is a CSS button and text field generator that lets you easily create with just a click of the mouse.

Fonts and Text CSS Tools

Fonttester
This is an amazing tool that lets you edit loads of CSS properties including inline height, font weight, font style and variant, text indent and transform, and word and letter spacing.

CSS font style
You can use this tool to set the style of the font to italic or oblique.

Typetester
This application provides a comparison of the fonts for the screen. Since the new fonts are packed into operating systems, the list of the common fonts will be updated.

CSS Font and Text Style Wizard
You can use this wizard if you want to experiment with the fonts and text styles in order to generate sample CSS style source code. Dynamic HTML is used in this wizard that changes the style of the table in-situ, without loading another page.

CSS Type Set
This is a typography tool that allows designers and developers to test and learn the ways to style their web content.

CSS Generator & Optimizer

CSS Generator
This tool lets you choose a style for your web page. You can select different Cascading Style Sheet properties with live preview. You can choose color, HTML tag, click the field you would like to insert color into and color them.

CSS Generator
This tool gives you a live preview of the color that you select from the palette. You can directly specify colors and other design attributes. This tool helps you select a face color for your new web project straight away!

Cascading Style Sheet CSS Generator
This is a free tool that lets you create cascading style sheets for your web page. You can add as many style sheets as you want.

quickCSS – Online-CSS-Generator
With this tool, you can generate CSS with just one click.

Spiffy Corners – Purely CSS Rounded Corners
It is a simple tool to generate the CSS and HTML required to generate anti-aliased corners without using images or javascript.

Clean CSS
This is a CSS optimizer and formatter that takes your CSS code and makes it cleaner and more concise.

Simple CSS
This tool lets you create unique Cascading Style Sheets from scratch. You can also modify your existing CSS.

Regex Patterns for Single Line CSS
While formatting your CSS Style sheet single-line, you may find Dan Rubin’s Textmate macro useful if you group your ruler and add white spaces that makes scanning through the web page easier. You can also use a regular expression if you don’t want to use Textmate.

CSS Sprite Tools

CSS – Sprit.es
With this tool, you can easily generate CSS and HTML code by uploading the file you want to use in your CSS sprite and then click the button that join all your images into a single file. With this tool, you can also achieve any rollover effects.

Spritegen CSS Sprites
This tool allows you create your sprite by letting your upload your image and then add more images. You can also set the output of your images as in PNG, JPEG or GIF.

CSS Sprites
With this tool, upload any number of images and click Generate button to create your CSS sprites with ease.

Website Performance (CSS Sprite Generator)
It is a tool that allows you to upload your source file in order to create the sprite image and CSS. This tool works by ignoring duplicates, resizing the source images, setting the sprite and other CSS options like horizontal and vertical offset, background color, class prefix, CSS suffix etc.

Spritebox
It is a WYSIWYG tool that is helpful for the web designers who want to quickly create CSS classes and IDs from a single sprite image. This tool works on the principle of using the background-position property to line up areas of a sprite image into block elements of a web page.

Other CSS Tools

SlickMap CSS
This tool displays your site maps directly from HTML unordered list navigation. This is appropriate for the websites that want to accommodate up to three levels of page navigation and extra utility links that can be easily modified to meet personal requirements, branding, or style preferences.

CSS3 Please!
This tool displays the output of your code instantaneously. It is a simple yet powerful tool for the web designers and developers.

CSS Sorter
CSS Sorter is a tool that sorts CSS files and rules alphabetically so that you can easily manage your CSS files.

Sky CSS Tool
Sky CSS lets you create CSS classes without requiring any manuscript code. In order to work properly, it needs a JavaScript compatible browser.

CSS Table Wizard
This wizard helps you generate style source code and allows you to do experiments with table border styles.

Csstxt
Csstxt is a powerful tool that illustrates numerous ways to add a style to a text with ‘a’, ‘p’ or div tag.

MinifyMe
It is a small AIR application that packs together multiple CSS and JavaScript files into one and runs on your desktop.

Password Generator
This tool generates all the compulsory codes required to password protect a directory, or selects files within it on your site by means of .htaccess. This tool works by encrypting your desired password and then put the outputs inside your .htaccess and .htpasswd files.

XHTML/CSS Markup Generator
This is a simple tool that lets you quickly generate XHTML Markup and a CSS frame; shorten syntax so that you can directly jump to the elements styling. This tool significantly speeds up your work.

• Part 1: How to Design a Band Website Layout in Photoshop
• Part 2: Coding a Band Website Created in Photoshop

Working Proof

If you follow along with the tutorial, you should end up with the following live demonstration.

Click to view live demo

Setting up the files

1 Start out by creating a new folder on your computer to put all of the site files in; I titled my folder sixrevisionsband. Create another folder in your working folder you just created and call it images; it will contain all the images, including CSS background images, for the site.

2 Now open up your favorite code editor (I use Coda.) Create a new HTML file titled index.html in the root of the folder -this will be our main page template. I like to keep all of my stylesheets in one folder in case I need to add a few different stylesheets. That way they are all kept together neatly. So we’ll add a folder titled css, and a CSS file inside it titled screen.css. screen.css will be the main stylesheet for our template.

I start out the HTML with some basic stuff, making sure to add a title and a link to the stylesheet:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<title>Six Revisions Band Website</title>
</head>
<body>

</body>
</html>

My stylesheet also starts out with a few basic styles such as a border, margin, padding reset for all elements and some style declarations for common elements such as headings, lists, paragraphs, and hyperlinks. Then to organize, I break the stylesheet into several logical parts so that when I maintain the stylesheet later on, things will be easier to find:

/***** Global Settings *****/

html, body {
  border:0;
  margin:0;
  padding:0;
}

body {
  font:.9em/1.3em arial, helvetica, sans-serif;
  color:#403d3d;
}

/***** Common Formatting *****/

h1, h2, h3, h4, h5, h6 {
  margin:0;
  padding:0;
  font-weight:normal;
}

h1 {
  padding:30px 0 25px 0;
  letter-spacing:-1px;
  font:2em arial, helvetica, sans-serif;
}

h2 {
  padding:20px 0;
  letter-spacing:-1px;
  font:1.5em arial, helvetica, sans-serif;
}

h3 {
  font:1em arial, helvetica, sans-serif;
  font-weight:bold;
  padding:5px 0 10px 0;
}

p, ul, ol {
  margin:0;
  padding:0 0 18px 0;
}

ul, ol {
  list-style:disc;
  padding:0 0 18px 40px;
}

img {
  border:0;
  margin: 0 0 5px 0;
}

/***** Links *****/

a, a:visited {
  text-decoration:underline;
  color:#403d3d;
}

a:hover {
  text-decoration: none;
}

/***** Wrapper *****/

/***** Header Area *****/

/***** Homepage Content *****/

/***** Footer *****/

/***** Global Classes *****/

.clear { clear:both; }

Starting with the background (in Photoshop)

3 I like to start out from the back and work my way forward (towards the screen). If you downloaded the PSD file from Part 1, you’ll notice the layers are organized into folders: header, home, footer, and back. This helps for the coding process.

You’ll want to turn off all of the groups except for back, which contains all of the layers with the background files. You’ll also want to turn off the content area, and you’ll be left with this:

4 You’ll need to change the canvas size (Image > Canvas Size) to 1600px wide so the background will be wide enough to save as a full-width background. Once we do that, we see that the grid texture has harsh lines that we’ll need to get rid of.

5 We’ll create a mask like we did in Part 1. Select the layer with the grid texture by holding down the Cmd/Ctrl key and clicking on the layer thumbnail in the Layer Panel.

6 Then create the layer mask by clicking on the Add Layer Mask button at the bottom of the Layer Panel.

7 We’ll choose a large soft round brush, like Soft Round 300 and change the Opacity and Flow settings to 50%. Make sure your foreground color is set to black (press D to reset your foreground and background color quickly). Softly brush the sides (not the bottom) a few times until the harsh lines are all gone. Your background should look like this:

5 Our background is ready to save. Choose File > Save for Web & Devices. I like to experiment in here and find the best settings for the image, while trying to keep the file size as low as possible. With this image, I found that a JPG at 40% keeps the file size fairly low but the quality good enough so that it’s not pixilated. Save this to the images folder as background.jpg.

Adding the background to the web design

6 To add the background to your design, use the body element’s CSS background attribute. The style declaration below tells the background not to repeat, to be at the top and in the center at all times, and when the picture runs out, use the tan color #d5d4c2.

body {
  background: url(../images/background.jpg) no-repeat top center #d5d4c2;
}

Next, we’ll need to make sure all of our other items are centered in a 960-pixel wide wrapper. I’ll add a wrapper div in HTML:

<div id="wrap"></div>

And then we’ll need to give it some styles to center it:

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

Working on the site’s logo

7 Turn all layer folders back on to see what’s next. I like to code in the order the items will be in the HTML, so the logo is next. I add some guides around the logo to make everything precise and then I crop the logo to the guidelines. I save this out as a JPG at 40% as well.

8 Now we’ll add the logo in with an h1 tag, which tells search engines that this an important element on our page. Then we’ll add an a tag inside of it that will link back to the homepage.

<div id="logo"><h1><a href="index.html">Six Revisions</a></h1></div>

I like to use a negative text-indent which will hide the text from sighted viewers, but will still be visible to search engines and screen-reading technologies.

And then I add the image in as a background in the stylesheet. We’ll also need it to float it left because the navigation will be floating to the right. Here’s what the CSS looks like:

#logo h1 {
  float:left;
  display:block;
  padding:21px 0 0 23px;
  text-indent:-2000px;
  margin: 0;
}

#logo h1 a {
  width:293px;
  height:100px;
  display:block;
  background:url(../images/logo.jpg) no-repeat;
}

Coding the navigation

9 Moving on to the navigation. First we’ll go in and crop out the hover background, cropping it at 1px wide by 110px tall. We can save it out as a PNG-24. The transparency will work everywhere except in Internet Explorer 6 and below, but it’ll appear as a light grey background there, which I’m fine with.

As a quick note, I do test and make sure my sites are functioning in Internet Explorer, but as you may know, IE6 has several issues, like not supporting certain image types (like PNG-24s) and misinterpreting certain CSS specs. So I find ways to make it work but according to browsers stats by w3 schools in October 2009, only 10.6% of internet users are still using IE6 and it appears to be dropping quickly. So, although the light grey hover background isn’t as classy as the transparent PNG-24, it gets the job done, which is my method for taking care of IE6. Period. Ok let’s move on.

We’ll use a straightforward unordered list, and the HTML will look like this:

<div id="navigation">
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Songs</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Tours & Events</a></li>
  </ul>
</div>

I’ll show you the CSS and then I’ll break it all down:

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

#navigation li a {
  padding: 64px 14px 33px 14px;
}

#navigation li a:hover {
  background: url(../images/hover.png) repeat-x;
}

First, I floated the navigation to the right to get it into place. Then I added some styles to get the look of the text to be uppercase and bold with a 1.1em font size. Also, I changed the link color to #706752 and told it not to have any underline.

#navigation {
  float: right;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.1em;
}

#navigation a {
  color: #706752;
  text-decoration: none;
}

Now onto our unordered list. First, I took away any list-style and zeroed out the padding and margins, and then added another float right to get it placed correctly.

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: block;
}

Next, I floated the li to the left to get each link to sit next to each other, because the default is to line up vertically. If you float the li right, then your links will be listed backwards. Then, I added padding to the top and bottom of the li with #navigation li to get the links in the right place.

#navigation li {
  float: left;
  display: block;
  padding: 64px 0 33px 0;
}

This padding spaces the li’s out from side to side and also tells the hover action the height.

#navigation li a {
padding: 64px 14px 33px 14px;
}

And finally we add in our hover background, which will repeat horizontally.

#navigation li a:hover {
background: url(../images/hover.png) repeat-x;
}

Coding the content area

10 Moving on to the content area. Back in Photoshop, we’ll turn off these groups: home and footer, leaving back and header group on. We’ll add guides to the top and the bottom of the content area to decide where we’d like to crop it. I find that 960 pixels wide by 710 pixels tall will be a good size and plenty tall enough. Crop it and save it for the web. And again, a JPG at 40% will do the trick.

We’ll clear the float above with:

<br />

Then we’ll add a div called #contentarea for the content area and then style it. A simple hack was added here, as IE6 doesn’t recognize min-height. The two lines beneath min-height (height and _height) allow IE6 to recognize the fact that we’d like the #contentarea div to be at least 830px tall. I also added in padding to push all the content inside in the right place easily.

#contentarea {
  background: url(../images/contentarea.jpg) no-repeat top center;
  width: 908px;
  min-height: 684px;
  height: auto;
  _height: 684px;
  margin: 18px 0 0 0;
  padding: 26px 26px 0 26px;
}

11 Next, inside the content area is the feature. You can place a slider here using this tutorial called Create a Slick and Accessible Slideshow Using jQuery or use a flash component. To keep things simple for the code and for the purposes of this tutorial, we’ll just simulate the look of the an animated feature with a simple image for now.

I’ll keep call this section #flash:

<div id="flash"><img src="images3/flash.jpg" alt="flash" /></div>

And the CSS is basic dimensions and margin definitions:

#flash {
  width: 908px;
  height: 411px;
  margin: 0 0 35px 0;
}

The margin on bottom accounts for the space between the #flash div and the 3 columns that will be below.

Creating the columns

12 Now we’ll crop out the next couple photos to get everything ready for the 3 columns of content below the flash. We’ll need to crop the video (which we’ll simulate with an image for this tutorial, just like we did with the #flash image), and the 6 social media icons.

13 Next we’ll set up the HTML for the columns. The br tag clears the float for the footer that will be below these columns.

<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<br />

Some simple CSS gets the columns all set up and in place:

#column1 {
  float: left;
  display: block;
  width: 233px;
  margin: 0 68px 0 0;
}

#column2 {
  float: left;
  display: block;
  width: 335px;
  margin: 0;
}

#column3 {
  float: right;
  display: block;
  width: 207px;
  margin: 0;
}

14 We’ll add the content to the first column and your html should look like this:

<div id="column1">
  <h3>Latest Videos</h3>
  <p><img src="images3/video.jpg" alt="video" /><br />
  <a href="#">Another video to watch here</a><br />
  <a href="#">And yet another video here</a></p>
</div>

15 For the blog posts in column 2, I could use simple pie or some php script to call in the 3 most recent blog post titles and a couple lines, but for now we’ll just add some simple HTML to column 2 to simulate the look of the blog posts:

<div id="column2">
  <h3>Six Revisions blog</h3>
  <p><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a><br />
			Nunc eu mi risus, nec luctus justo.[...]</p>
  <p><a href="#">Bibendum est eu gravida cras dui sem</a><br />
			Venenatis a egestas id, consectetur faucibus nibh.[...]</p>
  <p><a href="#">Aliquam arcu nisi, sagittis at feugiat quis</a><br />
			Accumsan ut metus. Mauris rhoncus[...]</p>
</div>

16 The third column will be set up using some unordered lists, to get the indent without having to use another div. Here’s our HTML:

<div id="column3">
  <h3>Connect with us</h3>
  <ul>
    <li><a href="#"><img src="images3/facebook.png" alt="facebook" /></a></li>
    <li><a href="#"><img src="images3/myspace.png" alt="myspace" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/twitter.png" alt="twitter" /></a></li>
    <li><a href="#"><img src="images3/linkedin.png" alt="linked in" /></a></li>
  </ul>
  <ul>
    <li><a href="#"><img src="images3/flickr.png" alt="flickr" /></a></li>
    <li><a href="#"><img src="images3/rss.png" alt="rss" /></a></li>
  </ul>
</div>

I also had to add some CSS to control the unordered list properly:

#column3 ul {
  list-style: none;
}

#column3 li {
  float: left;
  display: block;
  padding: 0 27px 10px 0;
}

The finale: the footer

17 Almost there! Moving onto the final piece, the footer. Add some simple HTML:

<div id="footer">
  copy; 2009 Six Revisions Band  |  <a href="#">contact us</a>
</div>

And the CSS is pretty simple as well. The line was added with a 6px border at the top and I needed some space above the line (which I created with margins) and some space below the line and above the text (which I created with padding). I also wanted some space below the text and before the edge of the browser window, which I created with padding as well. And the font size needed to be slightly smaller than the other body copy, so I made it .9em.

#footer {
  width: 960px;
  border-top: 6px solid #c4c2af;
  padding: 10px 0 30px 0;
  text-align: center;
  margin: 30px 0 0 0;
  font-size: .9em;
}

And we’re all finished!

Thanks for following along through the full tutorial. I hope you learned some coding techniques and PSD to XHTML/CSS tricks. Feel free to ask any questions and definitely let me know what you think in the comments area.

Download the source files

• band-website-html-css (ZIP, 0.22MB)

1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall.

2 Then drag your guides from the Ruler (press Ctrl/Cmd + R if you don’t see your rulers) so that the middle content area is centered and 960 pixels wide, my preferred width to work with.

Working on the rough background

3 Start by filling your Background layer with a nice warm gray color, I chose #C4C2AF. To do this, set your Foreground color to #C4C2AF in the Tools Panel. Then, with the Background layer selected in the Layers Panel, choose Select > All and then Edit > Fill, which will open up the Fill dialog box. Make sure that the value under Use option is set Foreground Color, and then press OK.

4 Now we’ll add a texture and start to build up some layers in the background. Find a cool rock-like texture. For this tutorial, I used the SR_Rough_Texture_13 that’s part of the Free High Resolution Rough Texture pack. Download it, open it in Photoshop, and drag it into your canvas; it should automatically create a new layer on top of the Background layer.

This image isn’t quite wide enough to fill the background space (I like a full image background to be 1600 pixels wide and this one doesn’t quite cut it). So we’re going to create some new layers. Then we’re going to make a layer mask and fade the sides of the image in order to get a nice texture that doesn’t have an ugly/jarring edge.

5 To make the layer mask, you’ll need to select the whole image, which you can do by choosing the image’s layer in the Layers Panel and then going to Select > All.

6 Then click the Add layer mask icon towards the bottom of the Layers Panel. This won’t change a whole lot yet but we’ll brush away the edges to make it nice and smooth. But first, change the layer’s Blend Mode in the Layers Panel to Overlay.

Your work should look like this:

7 Click on the mask of your rock layer (not the thumbnail of your layer). Get the Brush Tool (B) from the Tools Panel and choose a nice large soft brush tip, like Soft Round 300. Make sure your foreground color is set to black (#000000) and set the Opacity and Flow to 50%. Brush away the edges until you can’t see a hard line anymore. Then enlarge the image using Image > Image Size to about 128% so it fills more of the space, and move it to the left side of the canvas.

Here’s where we’re at now:

8 Now find another cool background texture, something like Grunge Extreme 08 from the Six Revisions Grunge Extreme set in the Freebies section. Download it, open it in Photoshop, and drag it to your workspace.

9 We’ll do the same thing with this texture as we did with the last one. Create a layer mask, and this time, change the layer’s blending mode to Screen. Then brush away the edges with a large soft brush (Soft Round 300 works here as well) with the Brush Tool (B) to make them smooth. Finally, move this texture a bit off the right side of the canvas.

10 Now, we need something just a touch bolder than, this so duplicate the layer (Layer > Duplicate Layer).

Here’s what we have now:

11 We need one more texture for the background, a rusty metal texture with a grid, something like Grunge Extreme 06 from the Grunge Extreme set. Download it, open it in Photoshop, and drag it into your canvas.

12 Resize it to take up about 310 pixels in height (you can use the Free Transform Tool).

13 Now duplicate the layer so that they line up next to each other and flip it horizontally using Edit > Transform > Flip Horizontal so they repeat nicely.

14 Then, repeat the first one to make the grid go all the way across the document.

15 Now we’ll link all three layers. Select all three layers in the Layers Panel, right-click, and then choose Merge Linked.

16 Then change the blending mode to Overlay. Here’s where we’re at now:

Adding some header stuff

17 Where would a band be without their logo at the very top? We need a fun and funky font for this, so I chose Tiza from Dafont. I made it a dark warm gray color and changed the layer blending mode to Multiply.

18 We also need a navigation in the header area. Add some links to the upper right hand side using the Horizontal Text Tool (T), just about even with the logo on the left. I chose to use Arial so that it looks similar on all browsers, bolded and in all caps. I made it a dark warm gray color to match the logo.

19 I also like to determine hover actions for the main navigation in my mockups. This one will extend from the top of the page to below the navigation links. Create this by making a box using the Rectangular Marquee Tool (M) and filling it with white (#FFFFFF) via Edit > Fill (Shift + F5). Next, set the Opacity of the layer to 28% so that we can see the text link below it.

Moving on to the content area

20 Create a rectangle using the Rectangular Marquee Tool (M) that’s 960 pixels wide by about 750 pixels tall, and fill it with a warm gray color that is a bit lighter than the logo. I used #9A9686.

21 Create a layer mask by clicking on the Add layer mask icon, just as we did with the textures in the background and choose a large soft round brush. Again, make sure your color is set to black (#000000) but this time set your Opacity and Flow to 100%. Click on the mask of the layer and brush away the bottom of the content box unevenly. It should look something like this:

22 Now we need a bit of grunge for the top. Find a nice grungy brush, or download the Rough Edges Photoshop brush set from Brusheezy. I used rich horizontal from this pack and brushed away the top of the layer mask until I was satisfied with the look. Change the layer blending mode to Multiply and you should have something like this:

Let’s add some content

23 Most musicians like to see their photo up top, so we’ll set them up with a rotating banner filled with some sweet band pictures. To simulate the banner in our mockup, create a 908 pixel wide box using the Rectangular Marquee Tool (M) and fill it with a similar color to the logo, I used #49453A.

24 We’re going to need some texture in here to match the rest of the site, so bring the second texture (Grunge Extreme 08) we used on here back up and drag it into your workspace again, above the flash banner box you just created. Then select your banner box by holding down Ctrl (or Cmd) and clicking on the layer thumbnail.

25 With the box selected, click on the texture in the Layers Panel and hit the Add layer mask icon at the bottom of the Layers Panel. You should have something like this:

26 That’s a bit too loud for me, so I changed the layer blending mode to Multiply and I now have a nice box to build on.

27 Now we need to add our musician’s photo to the flash banner, and I pushed it over to the right side to make room for text on the left. I downloaded a cool rocker dude from sxc.hu, a great free stock photography site.

28 He needs some shadow behind him, if you double-click on the layer, the Layer Style dialog box pops up.

29 Turn on outer glow, changing the Glow Color to black (#000000).

30 Next, change the Blend Mode of the layer to Multiply. I think this gives a much more subtle and realistic looking shadow than the Drop Shadow in Photoshop does.

31 Add some text on the left side, giving users multiple links and places to go on the site. I used Tiza again for the headline. I do want the body text here to match what I’ll be adding later, so I used a standard font for the links, in the same size that the body text will be.

32 We’re going to add three columns below the banner to give the users some content to read and show off the most important parts of the site. We’ll start with the Latest Videos on the left, establishing the header styles for the rest of the site. I chose Arial for the text, and the headers will be all uppercase and bold. I added an opaque white triangle using the Polygon Tool with the Sides option set at 3 for a play button on the video, and some text links below where more videos can be accessed.

33 Blog posts will be in the middle column, calling in three recent blog posts with a headline that links to the full article.

34 6 social media icons are in the far right column, giving fans other avenues of contacting and connecting with the band members. The icons used are from the A Life in Pixels set here on Six Revisions.

And finally, the footer

35 A simple footer is all that’s needed here. I added a thick light gray line, #C4C2AF, across the full 960-pixel content area, as well as copyright info and a contact link.

We’re all done!

Thanks for following the full tutorial. I hope that you learned some tips and tricks that you can use in Photoshop and that you had fun following the creation of a band website in Photoshop. Let me know what you think in the comments area below.

Download the source file

• band-website-design.zip (ZIP, 12.7MB)

Note: the version used in this article is jQuery 1.2.3

View jQuery Demos

Download Demo ZIP

How jQuery works?…..

First you need to download a copy of jQuery and insert it in your html page (preferably within the <head> tag). Then you need to write functions to tell jQuery what to do. The diagram below explains the detail how jQuery work:

How to get the element?

Writing jQuery function is relatively easy (thanks to the wonderful documentation). The key point you have to learn is how to get the exact element that you want to apply the effects.

• $("#header") = get the element with id=”header”
• $("h3") = get all <h3> element
• $("div#content .photo") = get all element with nested in the <div id=”content”>
• $("ul li") = get all <li> element nested in all <ul>
• $("ul li:first") = get only the first <li> element of the <ul>

1. Simple slide panel

Let’s start by doing a simple slide panel. You’ve probably seen a lot of this, where you click on a link and a panel slide up/down. (view demo)

When an elment with is clicked, it will slideToggle (up/down) the <div id=”panel”> element and then toggle a CSS to the <a> element. The .active class will toggle the background position of the arrow image (by CSS).

$(document).ready(function(){

	$(".btn-slide").click(function(){
	  $("#panel").slideToggle("slow");
	  $(this).toggleClass("active");
	});

});

2. Simple disappearing effect

This sample will show you how to make something disappear when an image button is clicked. (view demo)

When the <img> is clicked, it will find its parent element <div> and animate its opacity=hide with slow speed.

$(document).ready(function(){

	$(".pane .delete").click(function(){
	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");
	});

});

3 Chain-able transition effects

Now let’s see the power of jQuery’s chainability. With just several lines of code, I can make the box fly around with scaling and fading transition. (view demo)

Line 1: when the <a> is clicked
Line 2: animate the <div id=”box”> opacity=0.1, left property until it reaches 400px, with speed 1200 (milliseconds)
Line 3: then opacity=0.4, top=160px, height=20, width=20, with speed “slow”
Line 4: then opacity=1, left=0, height=100, width=100, with speed “slow”
Line 5: then opacity=1, left=0, height=100, width=100, with speed “slow”
Line 6: then top=0, with speed “fast”
Line 7: then slideUp (default speed = “normal”)
Line 8: then slideDown, with speed “slow”
Line 9: return false will prevent the browser jump to the link anchor

$(document).ready(function(){

	$(".run").click(function(){

	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	  .animate({top: "0"}, "fast")
	  .slideUp()
	  .slideDown("slow")
	  return false;

	});

});

4a. Accordion #1

Here is a sample of accordion. (view demo)

The first line will add a CSS class “active” to the first <H3> element within the <div> (the “active” class will shift the background position of the arrow icon). The second line will hide all the <p> element that is not the first within the <div>.

When the <h3> element is clicked, it will slideToggle the next <p> and slideUp all its siblings, then toggle the.

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){

	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");

	});

});

4b. Accordion #2

This example is very similar to accordion#1, but it will let you specify which panel to open as default. (view demo)

In the CSS stylesheet, set .accordion p to display:none. Now suppose you want to open the third panel as default. You can write as $(".accordion2 p").eq(2).show(); (eq = equal). Note that the indexing starts at zero.

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");
	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});

});

5a. Animated hover effect #1

This example will create a nice animated hover effect with fade in/out. (view demo)

When the menu link is mouseovered, it will find the next <em> and animate its opacity and top position.

$(document).ready(function(){

	$(".menu a").hover(function() {
	  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
	  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});

});

5b. Animated hover effect #2

This example will get the menu linktitle attribute, store it in a variable, and then append to the <em> tag. (view demo)

The first line will append an empty <em> to the menu <a> element.

When the link is mouseovered, it will get thetitle attribute, store it in a variable “hoverText”, and then set the <em> text content with the hoverText’s value.

$(document).ready(function(){

	$(".menu2 a").append("<em></em>");

	$(".menu2 a").hover(function() {
	  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
	  var hoverText = $(this).attr("title");
	  $(this).find("em").text(hoverText);
	}, function() {
	  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
	});

});

6. Entire block clickable

This example will show you how to make the entire block element clickable as seen on my Best Web Gallery’s sidebar tabs. (view demo)

Suppose you have a <ul> list with and you want to make the nested <li> clickable (entire block). You can assign the click function to “.pane-list li”; and when it is clicked, the function will find the <a> element and redirect the browser location to its href attribute value.

$(document).ready(function(){

	$(".pane-list li").click(function(){
	  window.location=$(this).find("a").attr("href"); return false;
	});

});

7. Collapsible panels

Let’s combine the techniques from the previous examples and create a serie of collapsible panels (similar to the Gmail inbox panels). Notice I also used the same technique on Web Designer Wall comment list and Next2Friends message inbox? (view demo)

First line: hide all <div> after the first one.
Second line: hide all <li> element after the 5th
Third part: when the <p> is clicked, slideToggle the next <div>
Fourth part: when the <a> button is clicked, slideUp all <div>
Fifth part: when the <a class=”show_all_message”> is clicked, hide this, show <a class=”show_recent_only”>, and slideDown all <li> after the fifth one.
Sixth part: when the <a class=”show_recent_only”> is clicked, hide this, show <a class=”show_all_message”>, and slideUp all <li> after the 5th.

$(document).ready(function(){

	//hide message_body after the first one
	$(".message_list .message_body:gt(0)").hide();

	//hide message li after the 5th
	$(".message_list li:gt(4)").hide();

	//toggle message_body
	$(".message_head").click(function(){
	  $(this).next(".message_body").slideToggle(500)
	  return false;
	});

	//collapse all messages
	$(".collpase_all_message").click(function(){
	  $(".message_body").slideUp(500)
	  return false;
	});

	//show all messages
	$(".show_all_message").click(function(){
	  $(this).hide()
	  $(".show_recent_only").show()
	  $(".message_list li:gt(4)").slideDown()
	  return false;
	});

	//show recent messages only
	$(".show_recent_only").click(function(){
	  $(this).hide()
	  $(".show_all_message").show()
	  $(".message_list li:gt(4)").slideUp()
	  return false;
	});

});

8. Imitating the WordPress Comment Backend

I think most of you have probably seen the WordPress Ajax comment management backend. Well, let’s imitate it with jQuery. In order to animate the background color, you need include the Color Animations plugin. (view demo)

First line: will add “alt” class to even <div> (to assign the grey background on every other <div >)
Second part: when <a> is clicked, alert a message, and then animate the backgroundColor and opacity of <div>
Third part: when <a> is clicked, first animate the backgroundColor of <div> to yellow, then white, and addClass “spam”
Fourth part: when <a class=”btn-approve”> is clicked, first animate the backgroundColor of <div> to green, then white, and removeClass “spam”
Fifth part: when <a> is clicked, animate the backgroundColor to red and opacity =”hide”

//don't forget to include the Color Animations plugin
//<script type="text/javascript" src="jquery.color.js"></script>

$(document).ready(function(){

	$(".pane:even").addClass("alt");

	$(".pane .btn-delete").click(function(){
	  alert("This comment will be deleted!");

	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
	  .animate({ opacity: "hide" }, "slow")
	  return false;
	});

	$(".pane .btn-unapprove").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
	  .animate({ backgroundColor: "#ffffff" }, "slow")
	  .addClass("spam")
	  return false;
	});

	$(".pane .btn-approve").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
	  .animate({ backgroundColor: "#ffffff" }, "slow")
	  .removeClass("spam")
	  return false;
	});

	$(".pane .btn-spam").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
	  .animate({ opacity: "hide" }, "slow")
	  return false;
	});

});

9. Image replacement gallery

Suppose you have a portfolio where you want to showcase multi images without jumping to another page, you can load the JPG into the target element. (view demo)

First append an empty <em> to H2.

When a link within the <p> is clicked:
- store its href attribute into a variable “largePath”
- store its title attribute into a variable “largeAlt”
- replace the <img id=”largeImg”> scr attribute with the variable “largePath” and replace the alt attribute with the variable “largeAlt”
- Set the em content (within the h2) with the variable largeAlt (plus the brackets)

$(document).ready(function(){

	$("h2").append('<em></em>')

	$(".thumbs a").click(function(){

	  var largePath = $(this).attr("href");
	  var largeAlt = $(this).attr("title");

	  $("#largeImg").attr({ src: largePath, alt: largeAlt });

	  $("h2 em").html(" (" + largeAlt + ")"); return false;
	});

});

10. Styling different link types

With most modern browsers, styling the link selector is very easy. For example, to style the link to .pdf file, you can simply use the following CSS rule: a[href $='.pdf'] { ... }. Unfortunately, IE 6 doesn’t support this (this is another reason why we hate IE!). To get around this, you can do it with jQuery. (view demo)

The first three lines should be very straight foward. They just a CSS class to the <a> element according to their href attribute.

The second part will get all <a> element that does not have “http://www.webdesignerwall.com” and/or does not start with “#” in the href attribute, then addClass “external” and set target= “_blank”.

$(document).ready(function(){

	$("a[@href$=pdf]").addClass("pdf");

	$("a[@href$=zip]").addClass("zip");

	$("a[@href$=psd]").addClass("psd");

	$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")
	  .addClass("external")
	  .attr({ target: "_blank" });

});

Source:http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Sushi and Robots

Bobulate

A Way Back

LegiStyles

For a Beautiful Web……

Black Estate

Cynosura

Mark Dearman

iA

Trent Walton

Area 17

Nosotros

Atebits

Square Space

Gap Medics

Fringe

Typographica

Book Cover Archive

Search Inside Video

Red Nose Day

Carsonified

Fajne Chlopaki

Devia

Mail Chimp

Miro

Squared Eye

Clear Left

White House

45 Royale

Work at Play

Wonderbra

Legwork studio

Surly

Project 365

72 Ave

Maxvoltar

We Heart

Jeff Finley

Elliot Jay Stocks

SimpleBits

Corking Design

Adii

Burciaga

Paravel

Jeremy Charles

Brite Revolution

Go Media

31 Three

AN idea

Mission Bicycle

Source: http://www.webdesignerwall.com/trends/best-of-css-design-2009/

Adyan @ Putrajaya

More Malaysia Tour Pictures:

http://travel.webshots.com/album/575829442yCnZMf

and Putrajaya Pictures:

http://travel.webshots.com/album/575837177bmuotQ