WebMuch » Aayush

Top 10 Must Follow Web Blogs + 6 Web News Repositories

Aayush — Sat, 25 Jul 2009 17:33:23 +0000

Well I thought it was about time I published my comeback article. Exams are over and a percentage of performance down-fall of WebMuch is something I don’t want Google Analytics to show me anymore. So I thought why not do WebMuch’s first round-up article, with a list of top 10 Web Design & Development Blogs that I follow on a daily basis, plus 6 top web community news websites where most web bloggers publish their article links. I guess this will be enough for your daily appetite for web knowledge & inspiration. Go Gobble.

Web Design & Development Blogs

1. Nettuts

2. Smashing Magazine

3. Instant Shift

4. CSS-Tricks

5. Noupe

6. Smashing Apps

7. David Walsh Blog

8. Speckyboy

9. Six Revisions

10. Web Designer Depot

Web News Repositories

1. CSS Globe Community News

2. Script & Style

3. Webdesign-Ne.ws

4. Devmarks

5. Design-Newz

6. Design Bump

Image Flip Using jQuery

Aayush — Wed, 17 Jun 2009 00:11:42 +0000

Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.

Preview:

Note: Image flip with reflection is for demo purposes only, it’s done using the PHP GD Library and it’s source files are also included in the source code, so meddle with them if you like.

DEMO-1 | DEMO-2

HTML Code:





Image Flip Illusion Using jQuery





	Image Flip Illusion Using jQuery

CSS Code:

body{
	background-color:#000;
}
h1{
	color:#FFFFFF;
	font-family:Arial;
	font-size:24px;
	font-weight:bold;
}
#container{
	width:400px;
	margin:0px auto;
	height:380px;
	margin-top:50px}
#image1{
	position:absolute;
	cursor:pointer;
	width:300px;
	height:190px;
}
#image2{
	display:none;
	position:absolute;
	cursor:pointer;
}

As you can see in the above code, I’ve placed the two images in a division and given them absolute positioning to assign their positions in the division.

To achieve the Horizontal flip we are basically reducing the width of the first image to 0 pixels, increasing the left side margin from zero to half it’s width and as soon as we finish that, Increase the width of the second image from zero to it’s actual width and do the opposite for left side margin what we did for the first image i.e reduce it from half the width of the image to zero.

This process takes place when you click on the first image (#image1) and the same process also takes place when you click on second image (#image2) except for the obvious shuffle in their ids.

Just look at the jQuery code below and you will have a better idea of what’s happening:

jQuery:

$(document).ready(function(){
var margin =$("#image1").width()/2;
var width=$("#image1").width();
var height=$("#image1").height();

$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#reflection2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});

	$("#image1").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

	$("#image2").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

});

If you want to perform a Vertical flip the jQuery code for that too is included in the source code.

Feel free to leave comments if you appreciate the tutorial or if you have any queries. You can also criticize the work but don’t be rude.

You can always find some good tutorials and articles on the Resources page. You can always reach it using the menu up-top.

Thanks for Reading!

Download the Source Code

New Author + Resources Category on WebMuch!

Aayush — Fri, 05 Jun 2009 20:31:38 +0000

Hello Everybody,

This is Aayush the website administrator at WebMuch. I am being succumbed by a force I call college examination and will not be able to publish on WebMuch for a while. I have been overwhelmed by the amount of readers we’ve been getting, which is good enough for a start. I do not want to lose any readers at all, on a thought of which I am bringing in a fabulous web developer and a long time friend Atul, to replace me for a while. He has agreed to write for WebMuch for a very luscious deal, a deal that I will write for him when he is through with his project (currently under development). He will be posting at the same pace with at-least an article/week. He published his first article day before, and it is already the most viewed article on WebMuch. Check it out here

In other updates, I have included a resources link in the navigation bar. It will gather articles related to Web Design & Development from across the web and display them. Please check that out. I will keep including more feeds into it once I’m through with my exams.

Also, please subscribe to our RSS feeds; it helps us a great deal in reaching you better & faster.

Thank You.

Animated Navigation Bar Using jQuery

Aayush — Thu, 04 Jun 2009 00:07:58 +0000

This is my first guest tutorial at WebMuch so please bear with me if I miss out on anything.

Preview:

DEMO!

I am assuming that the readers are well versed with CSS and HTML.

HTML Code:


    
       	
       		Home
                News
                Blog
                Pictures
                Videos
                Gallery
                About
                Contact

*NOTE: I do not encourage inline styling, I did it because It’s a sin I was willing to commit.

CSS Code:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body{
background-color:#1f1f1f;
}
.container{
	width:960px;
	margin:0px auto;
	color:#FFFFFF;
	font-family:Arial,sans-serif;
	font-size:20px;
	font-weight:bold;
}
#navbar1{
	float:left;
	width:960px;
	height:36px;
	font-size:14px;
	margin:20px 0 0 0;
	background:url(images/navbar_bg.png);
}
#navbar1 ul{
	float:left;
	width:585px;
	height:36px;
	margin-left:188px;
	color:#000000;
}
#navbar1 ul{
	background: url(images/anim_3.png) no-repeat;
	background-position:1px 4px;
}
#navbar1 ul li{
	float:left;
	width:72px;
	margin:3px 0 0 0;
	height:22px;
	display: inline;
	text-align:center;
	padding:7px 0 0 0;
	border-left:1px solid #1f1f1f;
	cursor:pointer;
}

*NOTE: This tutorial is only effective when using a predefined width for each button or list item as shown in the above image, this can also be implemented on navigation bars using dynamic widths, but you might have to change the jQuery and the image sprite quite a bit to achieve any kind of consistency in your design. Well to give you a basic explanation as to how we will animate the navigation bar from here on in, we will take a background image equal to the size of the list item, which, on mouse-over positions itself to the left of each respective list item. So, as you can see in my HTML code I have named(id) my unordered list as ‘sprite’ with a backround image. I have also named(id) my list items b0,b1,b2,b3….b7, depending on the number of list items you wish to have in your navigation bar. I’ll explain why we are doing this in a bit, after you read through the jQuery code.

jQuery Code:

$(document).ready(function(){
	var selected=0; // Default background position
	var position=0;

	$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
	position=$(this).attr("id").slice(1,2)*($(this).outerWidth());
	/*width of your list item*/
	$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:200});
	});

	$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
	$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:200});
	});
});

Step By Step Read Through:

In the first line, we define the default background position of the background image of #sprite (even though, we’ve already mentioned the default background position in the CSS file, we still have to declare the default background position in jQuery, because for some reason, Internet Explorer shows an error after repeated mouse-over states).
Now, on mouse-over of any of the list items, we simply calculate the background position of the image in the background of #sprite and using the animate method of jQuery we move it to its destined location. For example: On mouse-over of b0, in my case I moved it 0 * 73(width of my button) i.e. 0 pixels from the left of #sprite. On mouse-over of b1, I moved it 1 * 73 i.e. 73 pixels from the left of #sprite. On mouse-over of b2, I moved it 2 * 73 i.e. 146 pixels from the left of #sprite, so on and so forth. That is the very reason I named (id) my list items b0, b1, b2…, so that I can slice out the numerical values from it using slice(1,2).
Using the sliced numerical values we calculate the position of the background image, finally animate it and avoid a list of if else statements for each list item.
On mouse-out of any of the list items the background image comes back to its original position i.e. 0px (var selected;) from the left and 4px from the top.
Now, if you got any of the stuff I’ve explained there is one question popping in your head that do I have to manually give value to the variable “selected” for every page , well to avoid this you just have to edit the jQuery from the top to the one below.

Now we can easily name the class a0 or a1 or a2 or a4 of our list item (active list item) in our HTML to set the default background position of our background in #sprite and the script basically looks for the class with prefix “a” then slices out the next element i.e. 0 or 1 or 2 or 3, etc and multiplies it to the width of the element and gives it a default position from the left.

Feel free to leave comments if you appreciate the tutorial or if you have any problems implementing it.

Thanks for reading.

Download the Source Code

How & why you should use Google CDN

Aayush — Sat, 30 May 2009 14:47:37 +0000

What is Google’s CDN?

Google CDN stands for Google Content Distribution Network. It provides a loading architecture for the most popular, open source JavaScript libraries.

Why should I use Google’s CDN links?

Most of the websites I see, still host their JavaScript Library on their own server (Most, not all). Actually never have I ever seen any Web Development Blog hosting the library on their own server. They always use Google CDN, which is great because it has a number of advantages:

Google’s Content Distribution Network has libraries on their various servers across the world and if you use their CDN link, when a user’s browser resolves the URL, their browser will automatically download the file from the closest available server, which will be a much faster download than if you force a user to download the file from your host server in whichever country your website is hosted.
Google’s Content Distribution Network will save you a great deal of bandwidth if you have large traffic on your website and a limited bandwidth with your host.
There is a good chance that the Google hosted version of that library is already cached on the user’s browser cache, as lot of big websites and portals use Google’s CDN links including Google itself and Google’s servers instruct browsers to cache the file for one year if there are quite a few requests for the same hosted file.

How to use Google CDN?

Google’s CDN provides most of the popular, open source JavaScript Libraries with two ways of using each of them via the direct path in the

The Google AJAX Libraries API provides a simple and powerful google.load() method which accepts two arguments, the first argument to google.load is the name of a library. The second argument is the version of the library:

But to use this API, there is a different approach for the ready functions of all the libraries. For example, in the above code, we use google.setOnLoadCallback(function(){ }); instead of jQuery’s ready function. In-fact we use google.setOnLoadCallback(function(){ }); instead of all different library’s ready functions. This can be seen as a drawback or a good feature; I see it as a good feature as it gives me a single ready function for all libraries.

The second method to use Google’s CDN links is by the direct paths of the libraries in the

In the above code, we started a count from 1 as we will need to increase the value of background position with each click. But first we set the background position of the division with the id of “slideshow” to zeros. This is a good thing to do as we live in a world where Internet Explorer still survives. Then when the anchor (a.next) is clicked we initiate a function where we catch the count multiplied by 300 in a variable (x_position) and a minus sign for animating leftwards and then we animate the background-position with that value. Finally we increase the count by 1 for the next click, therefore, the first time we click the value of x_position is -300, the second time we click, it is -600 and so on.

Note: make sure to comment out or remove the console.log statement as it creates problems in all the browsers except Firefox.

Thanks for reading.

Download the Source Code

Image Stripe Using PHP GD Library

Aayush — Sat, 09 May 2009 17:01:50 +0000

Preview:

What we are going to do today is quite simple. We will read a specific directory for all available images in it and merge them into a single image. Sounds simple, well it is.

What We Need:

Create a project main folder and create two more folders in it, name them: “css” and “slides” respectively.
In the project main folder create two files, name them: “index.php” and “createImage.php” respectively.
In the slides folder put in some jpeg images with same width and height. In my case I used 300px width and 225px height.

index.php:






PHP GD Library Image Stripe











	PHP Image Stripe

In the above code the only new thing to you should be the source(src attribute) of the image tag, which is the link of our “createImage.php” file, this is because the file itself when executed outputs an image file. Hope that makes sense, it sure will after you read the excessively documented code of “createImage.php” below.

createImage.php:

Note: Remember, the height and width of the JPEG’s in the slides folder must be the same.
Note: imagecreatetruecolor() method does not support GIF images.

Links:

Thanks for reading!

Download the Source Code

Website Build-Up Series – Final

Aayush — Sun, 26 Apr 2009 00:24:52 +0000

Preview:

DEMO!

So as you’ve seen what we are going to end up with. Let’s start working for it.

Add Mark Up:

Inside the content division start by adding a H2 heading and type any heading between the tags. Add a few paragraphs and at-least two images, give one of them a class of rightimg and the other one leftimg. You can add more images but make sure you give them any one of the two class I just mentioned.

This is a heading:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

As we are adding content to the division I would like to share an amazing service I always use. It’s a Chris Coyier project called HTML-Ipsum. This is special: as clicking on any heading will copy the respective mark-up onto your clipboard. For example, if you want to add a couple of paras to the page, instead of finding the lorem ipsum routine online, go to HTML-Ipsum and click on Medium Paragraph come back to your source code and start pasting it. Trust me in the long run it will really make your life easier.

After we’ve added content to the content division, after the closing tags of content division and content-container division, right before closing tag of the container division(the main website container) add this code:



	
		Home
		About
		Feedback
		Contact
	
	© Copyrights 2009

If we view the page in the browser, we can see the non styled part of the page.

Let’s Style It:

The CSS code below should be added to the master CSS file. Due to some rendering issues on the page there were few minor tweaks(mostly width and border) I had to do in the master CSS file. Although I have notified most of the issues in the CSS file as comments, I would tell you a method to check the differences between your code and the downloadable source code available below. Google a software called WinMerge or goto: winmerge.org (for MAC users the software is: MELD). These softwares let you find differences between two text files. Just compare your master.css with my downloaded master.css and it will highlight all the differences for you. Me being a Windows User have experience with WinMerge and it’s awesome. As of MELD is supposed to be the MAC alternative for WinMerge and hopefully it will be good. Although I would like to know about it through the comments.

As of my CSS code, it is filled with explanatory comments and is pretty easy to understand.

/* Inside Content */

/*
I have changed the width of the content division we made in the last tutorial by 2 pixels as I have added 1 pixel left and right borders to it.
*/
#content{
overflow:hidden;/* as we will be floating elements inside this (mostly images)*/
/*you can and you should insert this property with the content division properties above I have placed it here to let you know that I have added this now*/
}
#content img{
background: #fff;
padding:5px;/*so the white background is visible*/
border:1px solid #000;
}
#content p{
margin-bottom:10px;
line-height:130%;/*to increase the vertical spacing between lines*/
}
#content h2{
font-size:25px;
font-weight:bold;
color:#263f5d;
font-family:Times, Times New Roman, Georgia, serif;
padding-bottom:5px;/*to make space between the border and text*/
border-bottom:2px dotted #263f5d;
margin-bottom:10px;
}
img.leftimg{/*a class for floating images left*/
float:left;
margin-right:5px;
}
img.rightimg{/*a class for floating images right*/
float:right;
margin-left:5px;
}
#footer{
width:958px;/*as there are left and right borders of 1px each which makes it 960*/
border:1px solid #444;
border-bottom:none;/*to remove the border-bottom*/
background:gray url('../images/footer-bg.png') repeat-x;/*just made a 1px wide and 80px long gradient image and repeated the background on the x-axis*/
height:80px;
line-height:80px;/*to vertically center the inline elements inside it*/
clear:left;/*for clearing the float of sidebar and content. had to insert it as the page wasn't rendering properly*/
/*for some reason our overflow hidden isn't clearing this float. Therefore the clear: left;*/
overflow:hidden;/*for clearing floats inside it*/
}
#footer ul{
width:50%;
float:left;
margin-left:10px;
}
#footer ul li{
display:inline;
margin-right:30px;
}
#footer ul li a{
color:#fff;
text-decoration:none;/*to remove the underline*/
}
#copy{
color:#fff;
float:right;
width:auto;
margin-right:10px;
}

If there are any queries please notify me in the comments and I will try my level best to help you with the code. You can also suggest tutorials you want in the comments. Also, please subscribe to my RSS feed, it will help me reach you much faster.

Thanks for reading!
Download the Source Code

Lightbox Effect Maintenance Page

Aayush — Sun, 19 Apr 2009 20:50:50 +0000

Preview:

OK! Before starting let me warn you that this technique is totally based on HTML & CSS, so make sure you take care of all this on the server end as-well, which basically means that if the page in the background has a form, then it shouldn’t be active & things like that. So moving on: I have taken an old template I was working on to show the Lightbox overlay effect on it. It is shown below; you can take anything you like instead.

We obviously wouldn’t be making this template here.

What We Need:

Make a 1px * 1px image in Photoshop and fill a new layer with black and reduce it’s opacity by 50% then hide the background layer and save the transparent image as a 24bit PNG in the images directory name it overlay.png
Make another image around 400px wide and make something you want to display on a page under maintenance and save it in the images directory name it maintain.png

Moving on: Once you have the page to be in the background open it in a text editor of your choice; As the body tag opens, place this code(even before the container).

It is the hierarchy we need to understand here. We want to display a dark transparent overlay on the whole page therefore we place the division with an id of overlay on the top and then we want to display a maintenance image on top of it and so we place the img tag with that image even on top of the overlay division.

Now make a new stylesheet in your CSS directory, call it technique.css, include it on the page and then place this code in it. (You can place this code in your master stylesheet as well).

#overlay{
width:100%;
height:1100px; /*about the height of the background page*/
background:url('../images/overlay.png') repeat; /*to include & repeat the image on the whole page*/
position:absolute; /*to place it anywhere on the page*/
top:0;/*start from  the top*/
left:0;/*and start from  the left*/
z-index:90; /*tells the browser that it should be displayed above the items with a “z-index” value less than 90*/
}
#maintain{
position:absolute;
left:50%; /*so the image starts after half of the page from the left */
top:50%; /*so the image starts after half of the page from the top */
margin: -140px 0 0 -200px; /*we bring up the image by half it’s height and bring it left by half it’s width*/
/*now the image should be in the center of the page.*/
z-index:100; /*tells the browser that it should be displayed above the items with a “z-index” value less than 100*/
}

IE6:

To make the transparent background image render transparent in IE6, download the DD_belatedPNG JavaScript. Place the .js file in the js directory of the page and if the IE browser version is less than 7 then include it in our page right before ending the body tag, then open another script tag and run the fix method, pass in the ID of the overlay division in it. To know more about the DD_belatedPNG read it’s documentation.

I’ll be continuing with the Build-Up Series in the next post.

Thanks for reading!

Download the Source Code!