ExtraTuts » Tutorials

How to make your Twins | Photoshop tutorial

extratuts — Fri, 10 Dec 2010 09:25:14 +0000

Today we will learn a new Photoshop trick it’s so funny lesson you can use it to trick your friend or to make unusual images , Imagine one day you announce to all your friends that you have a twin, by showing them a very realistic photo. these will be so fun , learn how to make it in this photoshop tutorial.

Step 1: You must use a tripod (or anything else which can hold your camera stand still). Then, shoot the 1st photo with yourselft in it, in order to make it natural, I recommend that you should take photo with a friend. Next, shoot the sencond one. Okie, with the second photo, you can change your appearance a little bit (a small different will convince viewersa perspective), changing your T-shirt, hair style, for example. Important: just chaging yourself and your position in the scene, keep the rest as it was in the 1st shoot.

The two photos should look like following:

Step 2: Go to Photoshop and put these two photos together, each gets a layer.

Step 3: in order to see the different between two photo, let’s choose the blend option of the first layer to “Overlay”.
So now you can indentify the different clearly.

Step 4: use the earaser the remove the different details of the first layer comparing to the second layer.

You need to put attention to edges and details

Conclusion: Yay, the last step is to flat the photo and you got a super realistic photo which can supprise your parents and friends. The key point to make the photo realy real is: you are the only one who changed, and the surrouding environment was kept exactly the same between the two shoots.
You can make three, four, or five of yourself, just follow that simple trick.
Good luck, dudes!

Some other similar photos, for your reference

source: 9tutorials

How to Create Batman Logo in Photoshop Tutorial

extratuts — Thu, 09 Dec 2010 19:07:37 +0000

This tutorial is very useful for beginners in Photoshop here is step by step creating an iconic Bat logo of Batman the superhero, here you are how to create Photoshop logo step by step using different Photoshop tools such as Pen Tool to sketch out the ‘bat’ and a set of Heavy Scratches brushes to add a great amount of detail to the bat logo.

Step 1

With a document size of 800 by 600 px, resolution of 140 dpi and a white background, I started with an outline of the original bat logo which I desaturated and; the contrast increased thus, leaving nothing but the shape of the logo.We’ll be using this shape as guides for our actual bat logo.

Step 2

For greater accuracy, we’ll have to enable grid lines for our document by going to View>Show>Grid.

The document enabled with Grids.

Step 3

Create a new layer ‘bat’ and on the Tools bar, select the Pen Tool and map out the shape of the bat logo as shown below:

Step 4

Now for the intricate part. For other tools options under the Pen Tool, select the Add Anchor Point Tool and add a number of points to the straight lines of the logo. With your mouse or the directional keys on the keyboard, move the Anchor points steadily upwards or diagonally to create a curve(s).

Step 5

For more smoother curves, drag the handles of the Anchor Points in the direction most appropriate.

Step 6

Add more Anchor Points and repeat the previous steps to create more curves.

Step 7

For the edges of the logo, more specifically points of the wings, ensure that they’re rounded and not sharp.

Below is the final result:

Step 8

I deleted the layer that I used as my guides and pressing Ctrl+-, the Grids were removed.

Step 9

Fill the bat logo with a grey colour.

Step 10

From www.sxc.com, download for free this brushed metal texture. Now position the top most part of the metal texture over the bat logo.

Holding down the ALT key, click inbetween the ‘bat’ and ‘metal’ layers for a Layer Clipping Mask.

Step 11

Double-click on the ‘bat’ layer and select a Bevel and Emboss Layer style. Set its parameters as shown below:

Step 12

Follow up with a Gradient Overlay style and set and adjust the Gradient Color Stops:

B.
Reduce the Gradient’s Opacity to 60%or lower, set its Style to Radial and Angle at 0degrees.

Step 13

Also select a Drop Shadow Layer Style and set its parameters as shown below:

Step 14

Now to create some scratches and dents on the metallic bat logo. We’ll be using two sets of Scratch brushes. The Heavy Scratches brushes can be downloaded fromDawghousestudio.com and another Scratches brush by can be downloaded fromBrushstock.com.Load these brushes into Photoshop and select the brush of choice from the Brushes Palette and change the foreground colour to black. These brushes have huge pixels larger than our working document and so we’ll must reduce the size of the brush(es) on application (painting that is). Do create a new layer for this.

Step 15

Hit Ctrl+T to enter the Free Transform mode and with the mouse position close to corner the selection, rotate it slightly diagonally. This is ensure some of the brush strokes don’t appear too linear.

Step 16

Select the Eraser Tool (E), and clear the brushes marks that might be left outside the logo. Also erase just slightly the inner edges of the logo. Reduce brush opacity to 90%.

The result below:

Step 17

With the ‘bat’ logo selected, create an Inner Shadow Layer style. Reduce the Shadow’s Opacity to 30%, its Angle to a 100degrees, Distance at 5 px and Size at 4 px.

Step 18

We now use another metal texture for the background. You can download this or any other metal texture you might fancy from http://www.3dmd.net/gallery/large-free-brushed-metal-texture-fs125.html.

Step 19

Press Ctrl+U for the Hue/Saturation Dialog box and make the adjusts as shown below. This sort of, to a degree desaturate the texture. (A full desaturation would have left the texture with a faint bluish tint).

Step 20

Go to Filter>Blur>Gaussian Blur and set the Blur Radius to 0.7 pixels.

Step 21

Still on the ‘background’ layer, select the Heavy Scratches brush once again and increase the brush size just large enough to cover the entire background texture.

Step 22

Select a couple of other Heavy Scratch brushes from the Brushes Palette and reduce their sizes and then paint away.

Step 23

Change the brush colour to white and reduce its opacity to 80% and add some more scratch markings around the bat logo.

Step 24

Go to Filter>Render>Lighting Effects and set the Light Type as Omni and Intensity to 9.

Step 25

Have the background image sharpen by going to Filter>Sharpen>Sharpen. Press Ctrl+F to Sharpen again.

Step 26

Select the Burn Tool (O), set the Burn Range to Highlight and Exposure to 45%. Burn around the edges of the texture background.

Step 27

Select the ‘bat’ layer and press Ctrl+L for the Levels Dialog box. Increase the light for the bat logo with the parameters below:

The result:

Step 28

Create a new layer and select a black Spatter brush. Paint sparingly one part of the bat logo.

Step 29

Go to Filter>Blur>Gaussian Blur and set the Radius to about 35 px. And we’re done.

source : DesignReviver

Photoshop tutorial A Picture Worth a Thousand Words

admin — Sun, 14 Nov 2010 18:38:51 +0000

There is these tutorial for all Photoshop designers how love to make a new and unique ideas in there designs the following tutorial is a perfect example of one of those techniques. In this issue, we’re going to take a portrait and replace the person’s image with text (think 2009 Grammy posters).

1 CHOOSE YOUR PHOTO

Pick a portrait that offers good contrast—a photo that’s very dramatic and dark probably won’t work as well. I’ve had the best success with straight-on head and shoulder shots, but again, feel free to experiment with all types of photos. For the best results, choose a photo that has a light background (or select the background around the person and make it lighter).

©ISTOCKPHOTO/JOAN VINCENT

2 CREATE VARIOUS TEXT BRUSHES

Create a new document (File>New) in a size that’s smaller than your photo: the specifics don’t really matter. Press D to set the Foreground color to black. Use the Type tool (T) to type several different words in various fonts and sizes (in this case we used a person’s name). One at a time, draw a selection around each word with the Rectangular Marquee tool (M), and from the Edit menu, choose Define Brush Preset. Name each brush in the Brush Name dialog and click OK.

3 SELECT THE SHADOWS AND MAKE A LAYER

Switch back to the photograph. From the Select menu, choose Color Range. From the Select drop-down menu in the Color Range dialog, choose Shadows and click OK. (In our example, nothing in the background was selected. If parts of the background are selected in your photo, see the next step for removing those selected areas.)

Then, press Command-J (PC: Ctrl-J) to copy the selected pixels onto a new layer. Press Command-J (PC: Ctrl-J) to copy the selected pixels onto a new layer. Click back on the Background layer in the Layers panel.

4 SELECT THE MIDTONES AND MAKE A LAYER

Go back to the Select menu and choose Color Range again. From the Select drop-down menu in the Color Range dialog, choose Midtones and click OK. If (as in this example) some of the background is selected, use the Lasso tool (L) with the Option key (PC: Alt key) held down to circle the areas you don’t want selected. Then, press Command-J (PC: Ctrl-J) to copy the selected pixels onto a new layer.

5 FILL THE LAYERS WITH BLACK AND GRAY

Click the Eye icon next to the Background layer in the Layers panel to hide that layer from view. Click on the midtones layer and from the Edit menu choose Fill. Use 50% Gray, check the Preserve Transparency box, and click OK. Then, activate the shadow layer and use the Fill command again, except this time use Black with Preserve Transparency checked. You should have a very basic portrait made from black and 50% gray.

6 FINE-TUNE THE RESULTS AND MERGE DOWN
If necessary, show the original Background (click where the Eye icon used to be) and use the Brush tool (B) to paint with black on the shadow layer, gray on the midtones layer, or use the Eraser tool (E) to completely remove areas. (Note: For gray, click on the Foreground color swatch, enter R:128, G:128, and B:128 in the Color Picker, and click OK.) In this example, we added a little more definition to the ears by painting with gray on the midtones layer. Once you’re satisfied, click on the top layer (the shadow layer) and press Command-E (PC: Ctrl-E) to merge it with the midtones layer.

7 ADJUST BRUSH SETTINGS AND PAINT SOME TEXT

Click the Create a New Layer icon at the bottom of the Layers panel. Press D to set your default colors. Press Command-Delete (PC: Ctrl-Backspace) to fill the new layer with white. Choose one of your custom brushes from the Brush Picker in the Options Bar, and in the Brushes panel (Window>Brushes), click on the words “Brush Tip Shape.” Adjust the Spacing so there’s space between each word. Under Shape Dynamics, vary the size and rotation of the brush. As you paint on the white layer, experiment with the Shape Dynamics. Repeat with your other custom brushes. For now, just get some “text paint” on the layer—we’ll continue painting in a moment.

8 COPY THE PORTRAIT
Create a new layer and drag it above the black-and-gray portrait layer. Press Command-Delete (PC: Ctrl-Backspace) to fill it with white. This will provide a white background behind our image. Hide all the layers except the black-and-gray portrait layer, and then click on that layer to make it active. Press Command-A (PC: Ctrl-A) to Select All and then Command-C (PC: Ctrl-C) to Copy.

9 PASTE INTO A LAYER MASK
Show all layers and activate the layer with the painted words. Click on the Add Layer Mask icon at the bottom of the Layers panel to add a layer mask. Hold down Option (PC: Alt) and click on the layer mask thumbnail (this will hide the painted text and show just the mask). Press Command-V (PC: Ctrl-V) to paste the copied pixels onto the mask. Press Command-D (PC: Ctrl-D) to Deselect. Press Command-I (PC: Ctrl-I) to Invert the mask (your mask should look like a negative of the black-and-gray pixel image that you pasted).

10 CONTINUE PAINTING, VARYING BRUSHES
Activate the painted text layer (not the mask) by clicking on the layer thumbnail, and continue painting using the different custom brushes you created. You can also continue to experiment with the brush settings for Size, Spacing, and Shape Dynamics. (Although you don’t need a pressure sensitive pen for this technique, it sure helps!)

11 ADD A LAYER WITH RANDOM TEXT
The painted text will only appear inside the white and gray areas of the mask. To add a bit more randomness to the portrait, add a new layer above the painted text layer. Then use the same text brushes to add a few words here and there outside the boundaries of the mask.

12 PAINT ON THE MASK IF NECESSARY
If there are areas where you’d like text to appear in the portrait—or there’s text showing where you don’t want it to show—click on the layer mask and paint with a round, soft-edged brush: use black to hide the text, white to show the text, and shades of gray to make the text somewhat visible.

13 VARIATION: ADD A GRAIDENT OVERLAY
Here’s a simple variation: Add a Gradient Overlay layer style to the painted words layer. Just click on the Add a Layer Style icon (fx) at the bottom of the Layers panel and select Gradient Overlay. In this case we clicked on the Gradient thumbnail, and selected the Blue, Red, Yellow gradient in the Gradient Editor. Click OK to close the Gradient Editor, then select Screen for the Blend Mode and click OK. Hold down Option (PC: Alt) and drag the word “Effects” in the Layers panel on top of the “extra words” layer to copy the same layer style to that layer.

14 VARIATION: USE TEXT BLOCKS WITH THE MASK
Use the Type tool to click-and-drag a text box around the entire image. Get a large amount of random text (we used www.blindtextgenerator.com) and paste the text into the text block. Hold down Option (PC: Alt) and drag the layer mask from the painted text layer onto this new type layer to copy the mask. Then, either hide the painted text layer, or use both the painted layer and the new type layer—the possibilities are endless!

source : layersmagazine

16 amazing jquery navigation menu tutorials

admin — Fri, 08 Oct 2010 10:02:40 +0000

JavaScript navigation menu

Demo | Download | Details

Visit PsPrint Online Printing to get the best deals in online printing services!

BEST 25 ajax photo sliding solutions

admin — Mon, 22 Mar 2010 08:10:49 +0000

Having lots of photos and want to display them in suitable and effective way that would make them more valuable?

Here are about 35 ajax solutions that will satisfy your passion! using this technique will make your gallery even more representable. so if you want to display your images in one big screen, on thumbnails or in slide show, and you were interested in special effects that take place during browsing the photo gallery,here are the most impressive solutions to perform this purpose. Take your time while choosing, because they are really eye catcher.

1.JonDesign’s SmoothGallery

This one uses mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

2.AgileGallery

3.Lightbox2

is a simple, unobtrusive script used to overlay images on the current page. It groups related images and navigate through them with ease using great fancy pants transitions.

4.TripTracker slideshow

is a lightweight JavaScript image viewer with an animated slideshow feature.

5.Interface elements

Simple and small photo slider that will make you easily navigate through your photo gallery.

6.Flickrshow

Flickrshow is a lightweight, cross-browser javascript slideshow, providing you with an easy way to display your Flickr images on your own website. It is simple to install and can be used to access images within Flickr groups or photosets, or using a tag-based search.

7.AJAX Slideflow

great ajax photo slider that you can navigate through using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation.

8.minishowcase

It is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

9.slideViewer

slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery.

10.Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

11.noobSlide

Another photo slider that considered of the most simple ones. It depends on mootools scripts. you can find many sliding types that should satisfy your needs.

12.Spacegallery

Another image gallery that you can navigate through the gallery by clicking on the image to see the next one. It’s easy to be used.

13.Photo Slider

One great tutorial that will make you able to make a great photo slider by your own, Its simple and attractive.

14.Animated JavaScript Slideshow

This dynamic JavaScript slideshow is feature packed and under 5KB. Includes description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.

15.s3Slider jQuery plugin

The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Its attractive, simple and useful.

16.Highslide JS

Highslide JS is an open source image, media and gallery viewer written in JavaScript, such as Quick and elegant looking, No plugins like Flash or Java required, Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it and much more.

17.BarackSlideshow

BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images.

18.JQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

19.jQuery virtual tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

20.jQuery: jqGalScroll

jQuery Gallery Scroller (jqGalScroll) takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos.

21.Sliding Photograph Galleries

This application is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size.

22.flash-gallery

Flash Gallery is a free application that allows you to create a slideshow on your website easy and fast. You won’t need any programming skills to install or use it. Just embed it into your website and script will automatically form a slideshow from a specified folder or from Flickr photostream.

23. 3d curve wall

3D Curve Wall for thumbnail gallery powered by Papervision3D, ActionScript 3 and XML.

24.dfGallery 2.0

great one, this application has so much advantages, such as you can upload custom images, changing its theme easily, wat hyour gallery in full screen and so much more.

25.Polaroid Gallery v.1.01

Polaroid Gallery is a free, open source flash gallery.The script loads images and image titles dynamically from an external xml file or a flickr RSS feed. Then the script processes the data and creates an interactive flash gallery.

15 amazing jquery tabs tutorials

admin — Sun, 29 Nov 2009 14:51:09 +0000

Who didn’t see a jquery menus and didnt like it with its special effects that could catch both expert and beginners eyes?

admin — Tue, 29 Sep 2009 15:51:37 +0000

in this article we will highlight some of the tricks and techniques using CSS to help you enhance your practical side using CSS.

1. conditional-css

Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers.

usage : http://www.conditional-css.com/usage

2. CSS Browser Selector

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

usage : http://rafael.adm.br/css_browser_selector/

3. adding a CSS StyleSheet to your RSS feeds

it is an old technique , but we mentioned it as it is important to broke the regular pattern of the RSS readers viewing system .

usage :

you will need to add the tag ( xml-stylesheet ) to your RSS feed file

< ?xml version="1.0" ?>

< ?xml-stylesheet type="text/css" href="rss.css" ?>

Next you will need to create the CSS file called rss.css , how each RSS tag is displayed .

here’s an example for the RSS.css file

rss, title, link, item, docs {

display: block;

}

rss {

font-family:tahoma;

}

title {

margin: 5px;

padding: 2px;

color: gray;

border-bottom: 1px solid silver;

}

link {

font-size: small;

padding-right: 10px;

}

item {

padding: 2px 30px;

}

docs {

background-color: #ffffe6;

margin: 20px;

text-align: center;

padding: 5px;

color: #7f7f7f;

border: 1px solid silver;

}

note : you can use the stylesheet to show or hide some feeds items to force the visitor to visit your site , but I do not support that .
language, lastBuildDate, ttl, guid, category, description, pubDate {
display: none;
}

4. CSS Watermark Effect

CSS Watermark is an unobtrusive and easy way for creating watermark (crossbrowser semi-transparent text) effect on your website’s images. You may choose between four standard and easy applicable text positions – topleft, topright, bottomright and bottomleft over the image.

Download : http://acidmartin.wemakesites.net/DownloadAdmin/click.php?id=50

5. Alternative style sheets switching via the browser menu

alternative style sheets allow the user to select the style in which the page is displayed using the View>Page Style submenu. This provides a way for users to see multiple versions of a page, based on their needs or preferences.

Usage : https://developer.mozilla.org/en/Alternative_style_sheets

6. Alternative style sheets switching via the website

Usage :

we will add the alternative style sheets to the document , in our example we have three styles : default , blue and black , inside style.css we will define the formats which will appear in all styles , and default.css is for the formats belongs to the default but it will be change in the other styles .
Note : I added the tag ( rel=”stylesheet” ) to the default style and the tag ( rel=”alternate stylesheet” ) to the secondary.

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

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

<link rel="alternate stylesheet" type="text/css" media="screen" title="blue" href="blue.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="black" href="black.css" />

next add the styleswitch.js file by adding this code at the head tag

<script src="js/styleswitch.js" type="text/javascript"></script>

you can download the styleswtich file from here

Now , the final step is to add the Switching style opthion by one of these methods :
Radio menu :

<form id="switchform"><input onclick="chooseStyle(this.value, 60)" name="choice" type="radio" value="none" />default
<input onclick="chooseStyle(this.value, 60)" name="choice" type="radio" value="blue" />blue
<input onclick="chooseStyle(this.value, 60)" name="choice" type="radio" value="black" />black
</form>

Note : we used the titles of styles to define the value of the input .

URLs :

<a href="javascript:chooseStyle(‘none’, 60)">Default</a>
<a href="javascript:chooseStyle(‘blue’, 60)">Blue</a>
<a href="javascript:chooseStyle(‘black’, 60)">Black</a>

Opthions select menu (switchcontrol) :

<form id="switchform"><select name="switchcontrol" size="1"><option selected="selected" value="none">Default</option><option value="blue">Blue</option><option value="black">Black</option></select>
</form>

7. Forming Tooltip using CSS3

We used to create tooltips using JavaScript , it was hard in changing colors and shapes but with CSS3 it is very easy.

Usage :

First we will make a div

and adding the StyleSheet code which will hide the title when moving the cursor (pointer) on the div .

div:before{

content:attr(title);

display:none;

}

now add the CSS code to show the tooltip when you move the pointer on it .

div:hover::before{

width:250px;

display:block;

background:#ccc;

border:1px solid #aaa;

padding:5px;

margin:20px 0 0 10px;

}

div:hover{

z-index:10;

position:relative;

}

25+ Best Practise Photoshop Layout Design Tutorials

admin — Thu, 10 Sep 2009 01:03:51 +0000

This Roundup includes 25+ Best Practice Photoshop Layout Design Tutorials , Applying these tutorials will strenghten your practical and Creative side , please share us by tweeting and digging this article .

18. Business Layout #6

19. How to Make a Green & Sleek Web Layout in Photoshop

20. Create a Magic Night Themed Web Design from Scratch in Photoshop

21. Design Studio Layout

22. Dark Layout #2

How to Display Delicious Counts In WordPress

admin — Tue, 08 Sep 2009 01:12:46 +0000

This easy step by step tutorial is going to show you how to use Delicious API together with WordPress custom field to save and display the Delicious saved counts .

ExtraTuts » Tutorials

How to make your Twins | Photoshop tutorial

How to Create Batman Logo in Photoshop Tutorial

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Step 18

Step 19

Step 20

Step 21

Step 22

Step 23

Step 24

Step 25

Step 26

Step 27

Step 28

Step 29

Photoshop tutorial A Picture Worth a Thousand Words

16 amazing jquery navigation menu tutorials

BEST 25 ajax photo sliding solutions

15 amazing jquery tabs tutorials

1.Slick Tabbed Content Area using CSS & jQuery

2.simple JQuery Tabs

3.A Tabbed Interface Using jQuery

4.Simple Tabs w/ CSS & jQuery

5.jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

6.Playing with jQuery Tabs

7.How easy to create a slide tabbed box using jQuery

8.Javascript: JQuery Tabs

9.Create Flipping Content Tabs Using jQuery

10.Ultra simple jQuery tabs

11.jQuery Tabs made easy

12.Animated tapped content with jquery

13.jQuery To Fade Effects tabs

14.JQuery TabContainer Theme with Tab Transition Animations

15.jQuery Sliding Tab Menu for Sidebar Tutorial

about 20 excellent jquery menus tutorials

1. Sliding Top Menu With jQuery

2.Sexy Drop Down Menu w/ jQuery & CSS

3.jquery css example dropdown menu

4.Color Fading Menu with jQuery

5. Making a Smooth Animated Menu with jQuery

6.jQuery Drop Line Menu

7.Animated Menus Using jQuery

8.Horizontal Scroll Menu with jQuery Tutorial

9.Simple JQuery Accordion menu

10.jQuery Pop-up Menu Tutorial

11.jquery feed menus

12.Creating a Floating HTML Menu Using jQuery and CSS

13. Sliding Jquery Menu

14.Fading Menu – Replacing Content

15.Make a Mega Drop-Down Menu with jQuery

16.accordion menu

17.Simple animated menu with jquery

18.apple style menu and improve it via jQuery

19.jQuery Sliding Tab Menu for Sidebar Tutorial

CSS techniques web developer should use

1. conditional-css

2. CSS Browser Selector

3. adding a CSS StyleSheet to your RSS feeds

4. CSS Watermark Effect

5. Alternative style sheets switching via the browser menu