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.
abrViewer for Windows requires Microsoft .NET Framework 1.1. Click here to download abrViewer.
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
This is my first post here and I will start with an old tutorial I wrote a while ago.
I will start this tutorial by explaining what I want to do.
The main objective is to make the header of a page have alternatives (multiple images for the header) so that people can choose the one they like.
We will start by choosing the images we want to be shown to the public. I have selected three and made them all the same width and height. I have named them header.jpg, header1.jpg, header2.jpg. You can give other names to them but I have used this convention to help me writing the javascript function.
The header is set up in the css stylesheet by the following code:
#header
{
background: url(images/header.jpg) no-repeat top left;
height:200px;
width:765px;
}
You are interested mainly in the background properties. Here you give the url to the image for the default header. Also you have to set the height and width accordingly to the sizes of your image.
Next we will make small thumbnails of all the images we want to be available for the users to select from. After that we will add the css code for representing the small boxes with the thumbnails.
#alt_header
{
padding:30px 0 0 40px;
}
#alt_header .header
{
width:80px;
margin-top:5px;
}
#alt_header a
{
width:80px;
height:21px;
padding:1px;
margin:0;
display:block;
font-size:1px;
border:1px solid #ccc;
}
#alt_header a:hover
{
border:1px dashed #ccc;
}
And now to explain this code. #alt_header is the container for all the small thumbnails. I have added padding top and left so that is not aligned on the top left corner of the header. Each thumbnail will be contained in a div with the class header. These elements are set to have the width of 80px and a bottom-margin of 5px to let some space between them.
The next step is to make the border and the hover effect. These things are done by the rules #alt_header a and #alt_header a:hover. To be notted that I have used font-size:1px; there because on IE the bottom padding was bigger than that 1px.
And now here is the html code used on my page:
<div id="header">
<div id="alt_header">
<div class="header">
<a href="#" onclick="changeHeader('');return false;">
<img src="style/images/smallHeader.jpg" alt="Purple Flowers" />
</a></div>
<div class="header">
<a href="#" onclick="changeHeader('1');return false;">
<img src="style/images/smallHeader1.jpg" alt="Grass" />
</a></div>
<div class="header">
<a href="#" onclick="changeHeader('2');return false;">
<img src="style/images/smallHeader2.jpg"
alt="Purple Flowers with green leafs" />
</a></div>
</div></div>You can see that the changing of the header images is handled by the javascript function changeHeader().
Here is the changeHeader() function:
<script type="text/javascript">
<!--
function changeHeader(header)
{
headerElem = document.getElementById("header");
if (headerElem)
{
headerElem.style.backgroundImage =
"url(style/images/header"+header+".jpg)";
}
}
-->
</script>As you can see the function is called with a parameter which indicates what header must be loaded. This function can suffer a lot of improvements. Among these:
In the next episode we will try to implement the improvements outlined here.
Loading ...
csscreme 2007 . All Rights Reserved