ingraphicswetrust

studio-poana

rmaxstudio

goverdose

insanefacilities

velendil

doxea

alextrochut

peha

aeiko

What is IzzyMenu - it’s easy to use Menu Builder, which allows you to build your CSS & DHTML menu in minutes.

Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

Features

• Build your CSS menu for Free
• The easiest online menu builder ever!
• Create drop down DHTML sub-menu

Features

• - The script opens a info-pane while the cursor is moved over a image.
• - Adjustable SlideIn/SlideOut effects.
• - Link identification.
• - The appearance can be defined in a stylesheet.
• - onShow, beforeShow and onHide events.

Specification

• Requires: < Mootools 1.2 beta 2
• Tested browsers: Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 under Windows.
• Last modified on: 20/3/08
• Latest version: 0.4
• Author: janlee

You can see some demos and download it from here.

FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution.

FitFlash was made to improve accessibility of your flash website.

It was made because each user uses a different screen resolution and resizes the browser window at custom sizes.. when you set the flash size to 100% (width and/or height) the browser won’t generate scrollbars and maybe an important content will be hidden for the user.

1.Changing the background image

Location of the background image can be found in the css document right here:
body {
background:#000 url(img/bg.jpg) no-repeat left top;
.....
}
For making this background I used some nice pictures and some photoshop brushes, and I mixed them up in photoshop.
Here are some snapshots of pictures I use and the final result:

Before:

After:

Depending on your final background size you can set the position of your blog content by changing the padding of your main container area (style.css):
#main_container {
.....
.....
padding:100px 0 0 150px;
}
2.Changing logo and titles

Logo can be found in header.php document at these lines:
<div style="float:left;">
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/img/logo.gif" border="0"/></a>
</div>
I made it a transparent gif so you can make it with any font you like .
To change this edit the photoshop file logo.psd

Titles are also transparent gifs; for changing them just edit psd files.
Most of these titles can be found in sidebar.php:
<h2><img src="<?php bloginfo('template_directory'); ?>/img/archive.gif" border="0"/></h2>
<h2><img src="<?php bloginfo('template_directory'); ?>/img/meta.gif" border="0"/></h2>
......
When you save these files don’t forget to set the background of your gif the same as the background you want to place it.
Here is a screenshot of my logo:

3.Changing buttons and bullets navigation
In the .zip document you will find psd source for any button and bullet and changing them is pretty much the same, just edit the .psd and export with the same size.

For example the right menu bullet’s location can be found in style.css at this lines:
#sidebar ul li ul li {
background: url(img/bullet.gif) no-repeat 0 6px;
padding-left: 23px;
line-height: 23px;
}
You can modify position of the bullet also by changing these lines :

..no-repeat 0 6px;

4.Other areas like posts, comments, footer can be modified by changing style.css

For example I use a jpg file for background of post details (date,author,nr comments) which can be easily modified by changing post_details.psd.
Lines that contain post details information can be found in style.css here:
.post_details {
padding: 0 15px;
background:url(img/post_details.jpg) no-repeat left top #0e0e0e;
}
For any questions don’t hesitate to contact us.

CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

Download CSSVista (v0.15, Windows XP/Vista only, 8.9mb. Uninstaller included.)

Please note: This is a very early version of the software. It probably won’t explode, but it may not work perfectly 100% of the time.

abrViewer is an external application that allows you to preview Photoshop brushes without going through Photoshop application. This standalone application is particularly useful for those who downloaded free brushes from the internet but have little time to go through each one every one of them. It generates a small preview the brushes so you’ll have a clue with to be loaded into Photoshop to use.

Windows Users

abrViewer for Windows requires Microsoft .NET Framework 1.1. Click here to download abrViewer.

Mac and Linux Users

To use abrViewer on Mac or Linux, download the Java version from easyelements, and launch the application with the following shell command:

java -jar ABRView.jar

Source: http://www.hongkiat.com

VistaIcons.com is a collection of free Vista Style icon sets of over 2500 high quality icons in png and ico format.

From VistaIcons.com you can freely download 256×256 PNG icons for Windows Vista.

Icons in Windows Vista visually represent programs, objects, actions, and concepts that help users to recognize and grasp meaning and purpose, identify places and items, and find their way through the UI with visual landmarks.

Source: http://www.smashingapps.com

Step 1:

Open Photoshop and create a new document with 500X500 and transparent background. Then using a photoshop brush make a nice frame just like in this picture:

(I use deviantart.com for a nice brush)

Then cut out the center of the frame using Rectangular Marquee Tool , and using another brush make an old paper effect with 50 % opacity, and place it in the center of the frame just like below:

Then export the frame and save it png-24 whith transparent background, call it frame.png

Step 2:

We know that IE 5.5 and 6 doesn’t support PNG alpha channel so we’ll use the AlphaImageLoader, and javascript for browser detection.

For browser detection i use a script from
http://dithered.chadlindstrom.ca/javascript/browser_detect/index.html
browserdetect_lite.js
And for opacity i use opacity.js

Step 3:

Next open dreamweaver or what program are you using for html and css coding and make a new html page.
In the head of the page don’t forget to include the javascript:
…..
<script language=”javascript” src=”browserdetect_lite.js” type=”text/javascript”></script>
<script language=”javascript” src=”opacity.js” type=”text/javascript”></script>
</head>

Make a new div whitch will contain the background photo (use any photo you want to put in the frame).
I use this photo:

The photo must be the size of the center area of the frame so it could fit perfectly.
Then display the png using Variable Opacity Rules:

<div style=”background:url(picture.jpg) no-repeat center; width:344px; height:396px;”>
<script language=”javascript” type=”text/javascript”>
od_displayImage(’myImg1′, ‘frame’, 344, 396, ”, ‘Variable Opacity Rules’);
</script>
</div>

Step 4:
Test your page , new no matter if you are using IE or Firefox you png frame will look perfectly:

Download example: demo.zip

Good luck

Download with black background

Download with transparent background

Download with white background