Web Designers Desk

Create Animated Price Grid Using CSS3

Admin — Mon, 02 Aug 2010 11:02:19 +0000

So here today we will create a animated Price grid using css3 only. No Jquery No Images No flash at all.

What we will learn today

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 Transition

CSS3 Animation

Check Out Demo First (Only Safari and Chrome)

Step 1 HTML Documentation

First of all we need to write Raw HTML codes first to setup a base. So here we required a Grid Which can hold all our content in. Then Four Column and 6 Rows in each Column. Check out the Below Codes.

<div id="grid">
	<div id="detail">
    	<h1>Hosting</h1>
    	<ul class="hosting">
        	<li>Space</li>
            <li>Bandwidth</li>
            <li>Processor</li>
            <li>Ram</li>
            <li>Price</li>
        </ul>
    </div>
 
    <div id="basic">
    <h1>Basic</h1>
    	<ul class="basic">
        	<li>100 MB</li>
            <li>1 GB</li>
            <li>Core 2 Duo</li>
            <li>512 MB</li>
            <li>10$</li>
        </ul>
        <div>Basic Plan for Small Size business.</div>
    </div>
 
    <div id="premium">
    <h1>Premium</h1>
    	<ul class="premium">
        	<li>2 GB</li>
            <li>10 GB</li>
            <li>Core 2 Duo</li>
            <li>1 GB</li>
            <li>20$</li>
        </ul>
        <div>Run Multiple Website on single CP.</div>
    </div>
 
    <div id="ultimate">
    <h1>Ultimate</h1>
    	<ul class="ultimate">
        	<li>5 GB</li>
            <li>20 GB</li>
            <li>Core 2 Duo</li>
            <li>2 GB</li>
            <li>30$</li>
        </ul>
        <div>Use this for High Traffic Websites.</div>
    </div>
</div>

Step 2 CSS

Now Styling our HTML Document. Here i want 3 different gradients, Linear Gradient on Heading and Price Row and Radial Gradient on Remaining Rows. Check out the Below Codes with Full Explanation.

/* The Base Layout which holds all the table in it */
#grid {
	margin-top:200px;
	margin-left:auto;
	margin-right:auto;
	width:605px;
	height:auto;
	background-color:#9CF;
}
/* First Coloumn */
#detail {
	width:150px;
	float:left;
	text-align:center;
}
/* Second Coloumn */
#basic {
	width:150px;
	float:left;
	text-align:center;
 
}
/* Third Coloumn */
#premium {
	width:150px;
	float:left;
	text-align:center;	
}
/* Forth Coloumn */
#ultimate {
	width:150px;
	float:left;
	text-align:center;	
}
/* Heading */
h1 {
	padding-top:15px;
	padding-bottom:15px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:20px;
	font-weight:bold;
	border:1px solid #CCC;
	/* Linear Gradient For Mozilla */
	background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
	/* For Safari and Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	text-shadow: #fff 1px 1px 1px;
}
li {
	padding-top:10px;
	padding-bottom:10px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	border:1px solid #256490;
	text-shadow: #000 2px 2px 2px;
	color:#FFF;
}
li {	
    /* For Mozilla */
	background: -moz-radial-gradient(50% 50% 90deg,ellipse closest-corner, #296a96 10%, #1c5a85 100%);
	/* For Safari and Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #296a96),color-stop(1, #1c5a85));
 
}
/* Set another Style for last element of LI */
ul li:last-child {
	/* For Mozilla */	
    background: -moz-linear-gradient(top,  #7d910f,  #aec31f);
	/* For Safari and Chrome */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7d910f),color-stop(1, #aec31f));
    border:1px solid #8c9d17;
    font-family:Verdana, Geneva, sans-serif;
    font-weight:bolder;
    font-size:18px;
}

Now animation time.. Here i want to make each column to be bigger than its original size when hovered. To do this we will use CSS3 Transition Property, we will set the original size of Column as 1 and on hover its 1.1. Check out the below codes with Explanation

/* Now here we will set transition effect to increase size of basic coloumn when hovered */
#basic {
	/* For Mozilla */
	-moz-transition: all 0.5s ease-in-out;
	/* For Safari and Chrome */
	-webkit-transition: all 0.5s ease-in-out;
}
/* Increase the size of Coloumn 10% when hovered */
#basic:hover {
	/* For Mozilla */
	-moz-transform:scale(1.1);
	/* Safari and Chrome */
	-webkit-transform:scale(1.1);
}
 
#premium {
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#premium:hover {
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
}
 
#ultimate {
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
}
#ultimate:hover {
	-moz-transform:scale(1.1);
	-webkit-transform:scale(1.1);
}

Now i need to display one pop up when each column hovered in coda bubble style. To do this we will use one div under each divs(#basic, #premium and #ultimate). Now using css we set its opacity to 0 first. And on hover its opacity will be set 1. Along with Transition ease in out effect with 0.5second of delay, set the margin of pop up according to the place you want to display it. Check out the below CSS codes with explanation.

#basic > div {
    width: 100px;
	height: 50px;
  	position: absolute;
    padding: 7px;
    visibility:hidden;
    opacity: 0;                
    background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	/* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */		
}
 
#basic:hover > div {
	visibility:visible;
    opacity: 1;
    margin-top: -150px;
	margin-left: 170px; 
    /* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}
 
#premium > div {
    width: 100px;
	height: 50px;
  	position: absolute;
    padding: 7px;
    visibility:hidden;
    opacity: 0;                
    background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	/* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */		
}
 
#premium:hover > div {
	visibility:visible;
    opacity: 1;
    margin-top: -150px;
	margin-left: 170px; 
    /* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}
 
#ultimate > div {
    width: 100px;
	height: 50px;
  	position: absolute;
    padding: 7px;
    visibility:hidden;
    opacity: 0;                
    background: -moz-linear-gradient(top,  #b0b0b0,  #ffffff);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #b0b0b0),color-stop(1, #ffffff));
	/* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */		
}
 
#ultimate:hover > div {
	visibility:visible;
    opacity: 1;
    margin-top: -150px;
	margin-left: 170px; 
    /* Transition property */
	-moz-transition: all 1s ease-in-out; /* Firefox */
    -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
}

Check Out Demo

You can join us for best web design services Exam & SK0-003 solutions. Our 70-685 contains all those materials you want to pass for real pass4sure 70-284 exam & ccna voice.

Fancy Image Hover Using CSS3

Admin — Sun, 13 Jun 2010 12:19:08 +0000

So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.

Check Out Demo First (Works in Safari and Chrome only)

HTML

In html elements we need one container for image which holds the image along with the layer which would come on the top of image. So here we will first define a class images and id arrt. as image1 and now under this element there are two more elements one the layer and one image. So this way write html elements for all images.

<div class='images' id='image1'>
<div class='layer'></div>
<img src='baby.jpg' />
</div>
 
<div class='images' id='image2'>
<div class='layer'></div>
<img src='baby.jpg' />
</div>	
 
<div class='images' id='image3'>
<div class='layer'></div>
<img src='baby.jpg' />
</div>	
 
<div class='images' id='image4'>
<div class='layer'></div>
<img src='baby.jpg' />
</div>

CSS3

Here we will first use Transform property of css3 just to scale the image to smaller first when page loads and then on hover we will increase its size to larger than the previous one. Now here we will also use Transition Duration property to half second to perform the transform animation. That is on hover the image takes half second to animate from smaller size to bigger size. We also need to clear the layer which was on the top of all images, so as soon as cursor hover on any image we need to remove the layer mask from it in cooler way. To do this we will use Transition Duration property which will set the time duration for layer to remove from the image. Now will individually set different properties on layer so that we will get different hover effect on each images. Check out the below CSS3 Codes for more clarification.

.images{	
	float:left;
	margin-left:-20px;
	margin-right:-20px;
	margin-top:10px;
	-webkit-transform:scale(0.6);/*Initial size of image when page loads*/
	-webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/
}
.images:hover{
	-webkit-transform:scale(0.8);/*When hover on images image size will increased*/
	-webkit-box-shadow:0px 0px 40px #ccc;
}	 
.images .layer{
	width: 100%;
	height: 100%;
	background-color:#000;
	position: absolute;	 
	opacity:0.5;
	-webkit-transition-duration: 0.8s;
}
#image1:hover .layer{
	width:0%;	
}
#image2:hover .layer{
        height:0%;
}
#image3:hover .layer {
	height:0%;	
	margin-top:150px;
}
#image4:hover .layer{
	margin-left:150px;
	margin-top:150px;
	height:0%;
	width:0%;
}

Ensure your 100% success by using our incredible best web hosting study packages. We are providing the best 642-681 and 70-270 training solutions for final exam preparations of pass4sure 70-272. You can also get hp certification free if you download all the dumps.

Animated Navigation Menu with CSS3

Admin — Tue, 01 Jun 2010 20:06:38 +0000

Since Last some days we are writing articles on CSS3. And today we will learn here to create animated navigation menu with css3. Here will try to create animated menu with css3 and also will create the same animation using jQuery. So lets start..

Check Out Demo First

So now we assume that we guys have checked the demo. Now we know what we really going to create so here first of all we need HTML documentation. We need here unordered list and will have two div elements with different attributes in li tags. We will use two div elements in li tags because we will separate them with margin in our css codes later with setting ul tags overflow to hidden and when as soon as user hover over li tag we will move the displayed div element to top to show the hidden element. Anyways lets first code HTML codes. Then we will go to css coding.

HTML

<div id="menu-demo">
<ul>
    	<li>
        <div id="up"><a href="#">Home</a></div>
	<div id="slide"><a href="#">Home</a></div>
	</li>
 
        <li>
        <div id="up"><a href="#">About Us</a></div>
	<div id="slide"><a href="#">About Us</a></div>
        </li>
 
        <li>
        <div id="up"><a href="#">Services</a></div>
	<div id="slide"><a href="#">Services</a></div>
        </li>
 
        <li>
        <div id="up"><a href="#">Contact Us</a></div>
	<div id="slide"><a href="#">Contact Us</a></div>
        </li>
</ul>
</div>

Now CSS.. Explanation is in codes only as comments

Set Overflow of UL tag as hidden so when the slide animation will start div up will hide and div slide will shown

Here we will use CSS3 Gradient to style menu background, Text shadow, Box shadow and CSS3 Animation for animation purpose

#menu-demo ul {
	width:500px;
	height:50px;
	background-color:#CCC;
	overflow:hidden;
	/*CSS3 Border radius*/
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	/*CSS3 Box Shadow*/
	-moz-box-shadow:1px 2px 4px #666;
	-webkit-box-shadow:1px 2px 4px #666;
	/*CSS3 Gradient Property for menu*/
	background-image:-moz-linear-gradient(rgb(48,161,171), rgb(56,192,207));
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
                          from(rgb(48,161,171)), to(rgb(56,192,207)));
 
}
#menu-demo li {
	float:left;
	list-style-type:none;
	margin-left:40px;
	text-shadow: 1px 1px 2px #ccc;
}
#menu-demo li a {
	text-decoration:none;
	color:#303;
	font-size:20px;
	font-family:Tahoma, Geneva, sans-serif;	
}
#up {
	margin-top:13px;
	margin-bottom:40px;
}
li:hover {
	/*As soon as hover over li elements animation will start*/
	-webkit-animation-name: slide;
	/*Duration of Animation would be 1 Second*/
	-webkit-animation-duration: 1s;
}
@-webkit-keyframes slide {
	0% { margin-top: 0px;}
	/* When animation completed the li will move up 60pixel*/
	100% { margin-top: -60px;}
}

Same Effect With jQuery

NOw we will achieve the same effect with jquery animate property.

$(document).ready(function() {
	$("#menu-demo li").hover(function() {//as soon as the mouse hovers over li
		$(this).stop().animate({//animation will start now
			marginTop: "-60"//move li tag up with 60px
		}, 1000);//time to complete animation would be 1 second
	} , function() {
		$(this).stop().animate({
			marginTop: "0"
		}, 0);
	});
 
});

Try out our free business hosting and latest 70-663 training courses to get high flying success in final HP0-P14 & pass4sure 70-271 exams; ccie exam is also very useful tool.

Create Ajax Loading Animation with CSS3

Admin — Sun, 30 May 2010 09:00:57 +0000

Normally Front end developers use gif animation for Ajax data loading. But now CSS3 animation property has been introduced and we can achieve the same Ajax loading animation effect using only css3 no gif animation required. So lets start working on it to get our desired effect.

Important : Only web kit based browser support (Safari and Chrome)

Check Out Demo

HTML

Here we will code only the first ajax loader which we shown in demo. So first of all we need to have a container named loading which holds all the elements of animation in it. Then we will define an individual div id’s to all the coloum with same class attribute.

<div id='loading'>
		<div id='coloumn1' class='coloumns'></div>
		<div id='coloumn2' class='coloumns'></div>
		<div id='coloumn3' class='coloumns'></div>
                <div id='coloumn4' class='coloumns'></div>
		<div id='coloumn5' class='coloumns'></div>
		<div id='coloumn6' class='coloumns'></div>
</div>

Now Style it and Animate it With CSS3

All codes with explanation below.

#loading{
	margin-top:30px;
	float:left;
	width:95px;
	height:32px;
	background-color:#779ec2;
	margin-left:30px;
	/* CSS3 Border  Radius for rounded corner */
	-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
}
.coloumns{
	background-color:#fff;
	border:1px solid #fff;
	float:left;
	height:30px;
	margin-left:5px;
	width:10px;
	/* Here we will define an animation name and then we will animate it later */
	-webkit-animation-name: animation;
	/* total time for animation to complete one cycle */
 	-webkit-animation-duration: 3s;
	/* Number of loops for animation cycle we set it infinite */
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	/* Initially the opacity of coloumns is zero */
	opacity:0;
	/* Scale it to 0.8 in starting */
	-webkit-transform:scale(0.8);
	}
#coloumn1{
	/* Coloumn1 animation delay by .3 seconds */
 	-webkit-animation-delay: .3s;
 }
#coloumn2{
	/* Coloumn2 animation delay by .4 seconds */
 	-webkit-animation-delay: .4s;
}
#coloumn3{
	/* Coloumn3 animation delay by .5 seconds */
 	-webkit-animation-delay: .5s;
}
#coloumn4{
	/* Coloumn4 animation delay by .6 seconds */
 	-webkit-animation-delay: .6s;
 }
#coloumn5{
	/* Coloumn5 animation delay by .7 seconds */
 	-webkit-animation-delay: .7s;
}
#coloumn6{
	/* Coloumn6 animation delay by .8 seconds */
 	-webkit-animation-delay: .8s;
}
/* Earlier we have defined animation-name as animation now the animation properties will set here */
@-webkit-keyframes animation{
	/* opacity of coloumn will be 0 at beginning of animation */
	0%{opacity:0;}
	/* opacity of coloumn will be 1 at middle of animation */
	50%{opacity:1;}
	/* Back to opacity zero when animation completes its cycle */
	100%{opacity:0;}
}

CSS codes for Loading Animation 2 and 3.

#loading1{
	margin-top:30px;
	float:left;
	margin-left:30px;
}
.coloumns1{
	background-color:#39F;
	border:1px solid #00F;
	float:left;
	height:30px;
	margin-left:5px;
	width:8px;
	-webkit-animation-name: animation1;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	opacity:0.2;
	-webkit-transform:scale(0.6);
	}
#coloumn11{
 	-webkit-animation-delay: .3s;
 }
#coloumn22{
 	-webkit-animation-delay: .4s;
}
#coloumn33{
 	-webkit-animation-delay: .5s;
}
#coloumn44{
 	-webkit-animation-delay: .6s;
 }
#coloumn55{
 	-webkit-animation-delay: .7s;
}
#coloumn66{
 	-webkit-animation-delay: .8s;
}
@-webkit-keyframes animation1{
	0%{-webkit-transform: scale(.9);opacity:1;}
	100%{-webkit-transform: scale(.2);opacity:0.1;}
}
#loading2{
	margin-top:30px;
	float:left;
	margin-left:30px;
}
.coloumns2{
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	background-color:#39F;
	float:left;
	height:20px;
	margin-left:5px;
	width:20px;
	-webkit-animation-name: animation2;
 	-webkit-animation-duration: 2s;
 	-webkit-animation-iteration-count: infinite;
 	-webkit-animation-direction: linear;
	opacity:0;
	}
#coloumn111{
 	-webkit-animation-delay: .1s;
 }
#coloumn222{
 	-webkit-animation-delay: .3s;
}
#coloumn333{
 	-webkit-animation-delay: .5s;
}
#coloumn444{
 	-webkit-animation-delay: .7s;
 }
@-webkit-keyframes animation2{
	0%{opacity:0;}
	50%{opacity:1;}
	100%{opacity:0;}
}

Let me know any bugs or improvement on this. Hope you enjoy it thank you.

If you are looking for fast success in adult web hosting Exams then join today to explore complete 640-721 resources and pass 70-681 certifications on first try. A person can chose pass4sure 70-620 & security+ certification for his easiness.

Impossible Things With CSS Now Possible With CSS3

Admin — Wed, 26 May 2010 10:37:44 +0000

Today will discuss about some basic properties of css3. Last week one of our reader asked me to post an article based on css3 basic and advanced properties so today we come up with some css3 basic properties.

1. Border Radius

Earlier we used to use images to get border radius, which is bit a long procedure and lots of codes are needed to complete this. But now with CSS3 Border Radius Property we can do it in second.

Browser Support : Firefox 3+, Chrome 4+, Safari 3.1+

Code

#border-radius {
width: 200px;
height: 150px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

Demo

2. Box Shadow

This is the new property of CSS3 which gives shadow to selected DIV. Using Box Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

Code

#box-shadow {
width: 200px;
height: 150px;
-webkit-box-shadow: #244766 5px 5px 10px;
-moz-box-shadow: #244766 10px 10px 10px;
box-shadow: #244766 10px 10px 10px;
}

Demo

3. Text Shadow

This is the new property of CSS3 which gives shadow to Text. Using Text Shadow we can set the X and Y offset of shadow, color of shadow along with Blur in pixel.

Browser Support : Firefox 3.5+, Opera 9.6+, Chrome 2+, Safari 4+

Code

#text-shadow {
-webkit-text-shadow: #555 4px 4px 4px;
-moz-text-shadow: #555 4px 4px 4px;
box-text: #555 4px 4px 4px;
}

Demo

WD Desk

4. Text Stroke

This is the new property of CSS3 which gives stroke/outline to Text. Here we will use syntax as text-fill-color for color of text, text-stroke-color which gives color to the stroke and text-stroke-width for width of stroke/outline.

Browser Support : Chrome 2+, Safari 4+

Code

#text-stroke {
font-size:24px;
-webkit-text-fill-color: #000;
-webkit-text-stroke-color: #C00;
-webkit-text-stroke-width: 1px;
}

Demo

WD Desk

5. Linear Gradient

Linear Gradient gives a gradient to any HTML elements. Visit Webkit for more detail on this property.

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

Code

#linear-gradient {
width: 200px;
height: 150px;
/* For Firefox */
background-image: -moz-linear-gradient(top, #F00, #F60);
/* For Safari/Chrome */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00));
}

Demo

6. Radial Gradient

This CSS3 Property gives a radial gradient to any selected element of XHTMl. Visit Webkit and Gecko for more detail on this property.

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

Code

#radial-gradient {
width: 200px;
height: 150px;
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #F60 10%, #F00 70%);
background-image: -webkit-gradient(radial, center center, 10, center center, 90, from(#F60), to(#F00));
}

Demo

7. Rotate

This CSS3 Property allows any html element to rotate.

Browser Support : Firefox 3.5+, Chrome 2+, Safari 4+

Code

#rotate {
width: 200px;
height: 150px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}

Demo

8. Reflection

This CSS3 Property allows reflection of text or boxes.

Browser Support : Chrome 2+, Safari 4+

Code

#reflection {
font-size:24px;
color: #f00;
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
}

Demo

WD Desk

9. Resize

This CSS3 Property allows resizing of box on horizontal, vertical and both axis.

Browser Support : Chrome, Safari

Code

#resizing {
width: 200px;
height: 100px;
border:1px solid red;
overflow: hidden;
resize: both;
}

Demo

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum lorem ipsum

10. Outline

When we style any element with outline then we can have a outline specified with offset to that particular element. Suppose we want to have an outline which is 5px away from the element box then we use outline property.

Browser Support : Firefox, Chrome, Safari

Code

#outline {
width: 200px;
height: 150px;
background-color:#F00;
outline: solid 1px #f00;
outline-offset: 5px;
}

Demo

We will Write Tutorials on CSS3 Animation in our upcoming articles.

Unlock the key of your success for budget web hosting exams & HP0-P14 by using our latest 642-583 and pass4sure 70-536 prep resources and scjp.

Create Custom PopUp (Modal Window) with jQuery

Admin — Mon, 24 May 2010 12:51:25 +0000

Here will try to create a modal window using css and jquery. Two years ago light box came into our life and it changes the traditional look of modal windows. We all have used modal window plugins once in our life as web designer or developer but the problem with it is you have to use the same layout formation which comes with modal window plugin you can just style the layout of model window but today here we will learn how to create a custom modal window, means here we will pop up the whole custom styled DIV as model window. Check out the tutorial to learn it but before getting started check out demo first.

Check Out Demo First

Files Needed Before Starting

Jquery Library

Step 1 : XHTML

First of all we need to add tag with attribute rel(set rel for popup window), class popup (to trigger the popupbox). Here we will use 3 tags for 3 different types of custom popup window.

Then we will write a markup for popup which can be placed anywhere in the page. Important point is that the id of markup will be matched with rel attribute of tag.

Check out the codes below

<h1><a href="#" rel="popuprel" class="popup">Click Here for 1st Custom Modal Window</a></h1>
<h1><a href="#" rel="popuprel2" class="popup">Click Here for 2nd Custom Modal Window</a></h1>
<h1><a href="#" rel="popuprel3" class="popup">Click Here for 3rd Custom Modal Window</a></h1>
 
<div class="popupbox" id="popuprel">

</div>
 
<div class="popupbox1" id="popuprel2">

</div>
 
<div class="popupbox2" id="popuprel3">

</div>

Step 2 : CSS

Here first off all we need to design 3 custom backgrounds for our pop up then will style it.

Now lets style popup markup.

/* Style you custom popupbox according to your requirement */
.popupbox {
	width:500px;
	height:300px;
	background-image:url(images/pop-up_03.png);
	background-repeat:no-repeat;
	display: none; /* Hidden as default */
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}
.popupbox2 {
	width:454px;
	height:307px;
	background-image:url(images/pu_03.png);
	background-repeat:no-repeat;
	display: none; 
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}
.popupbox3 {
	width:502px;
	height:302px;
	background-image:url(images/3_03.png);
	background-repeat:no-repeat;
	display: none;
	float: left;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
}
#fade { 
	display: none; /* Hidden as default */
	background: #000;
	position: fixed; left: 0; top: 0;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}

Step 3 : Jquery

First step is to call jquery file which you download in local computer or you can link jquery file directly from Google code.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

Now everything is set you got your jquery library linked with you document now lets create one more js file named custom.js and link it with you document and start writing codes in it.

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="custom.js"></script>

$(document).ready(function() {
	// Codes Goes Here...
});

Now lets get it working.. Check out below codes with full explanation in it. Thank You

$(document).ready(function() {
 
// Here we will write a function when link click under class popup				   
$('a.popup').click(function() {
 
 
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link							
var popupid = $(this).attr('rel');
 
 
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
 
 
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('
');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
 
 
// Now here we need to have our popup box in center of 
// webpage when its fadein. so we add 10px to height and width 
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
 
 
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});

Demo Download

Note : You can add close button into it too. Play with the custom popup.

Want to pass ecommerce hosting exams? Check out our latest 352-001 study guides and 642-415 demos give you 100% exam pass guarantee of pass4sure 70-236. You can also get ccda certification dumps from this website.