I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I find it very good looking and very simple to implement. We will use simple CSS and some JavaScript.

Usually for inserting text into the inputs or our forms we set the value attribute with the text and then use javascript to check for different scenarios for doing some fancy things. This is different we will use labels to fill the text and move them under the inputs and then just do our magic with JS.

The JavaScript library that we will use to create this effect for our forms is Jquery

1. Creating the markup!

            <div id="login">
                <div class="sayit">Log In:</div>
                <form action="javascript:void(0)" onsubmit="login()" autocomplete="off">
                    <label for="username">Username</label>
                    <input type="text" id="username"/>
                    <label for="password">Password</label>
                    <input type="password" id="password"/>
                    <input type="submit" class="medium button green" value="Log me In"/>
                </form>
            </div>

The above code is our markup and as you can see is very simple and it can be changed as you like because the code that we will use for checking for different scenarios in javascript will work without necessary classes or ids. We have 2 inputs and 2 labels, one is password one is text and we can work with these ones, you can add as many as you like.

Now let’s style these bastards!

2. Use CSS to style the form elements!

input[type=text],input[type=password]{padding: 5px 10px; background-color: transparent;	position: relative; z-index: 2;}
label{position: absolute; z-index: 1;-webkit-transition: opacity 0.15s linear; color: #bababa; background-color: #FFFFFF; }

#login{width: 290px; margin: 0 auto;}
#login input[type=text],#login input[type=password]{width:270px; margin: 5px 0; font-size: 24px; font-weight: bold; border: 1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; color: #595959;}
#login label{font-size: 24px; margin: 14px 10px;}

#login .sayit{font-size:24px; color: #595959; font-style: italic; padding-bottom: 5px;}

What we did here is make the label absolute so it will go under the input. This is important you will have to place the label before the input so remember this! The input will have a position relative and a z-index of 2 so we can be sure it will land above the label. Next we define the login div by using his id(#login). We use CSS3 for creating the round borders for the input and style the label by setting a big font-size to fit the input. The rest is pretty obvious, if you have trouble understanding this then let us know in the comments.

3. Make everything move with JS!

$(document).ready(function(){
    $.string(String.prototype);
    $("input,textarea").each(function (type) {
        $(this).focus(function () {
            if($(this).val().blank())
                $(this).prev("label").fadeTo('fast',0.45);
        });

        $(this).keypress(function () {
            $(this).prev("label").fadeTo('fast',0);
        });

        $(this).blur(function () {
            if($(this).val().blank()){
                $(this).prev("label").fadeTo('fast',1);
            }
        });
    });
});

We use here jQuery of course that we add using the google api like this:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

And one plugin that I use to extend the jQuery string properties and that is $.string plugin. After we do that we create the above code and we assign to input and textarea elements a focus, keypress and blur actions. We use the focus action to lower the labels opacity to 45% then on keypress we just hide it for good. Then on blur we check to see if anything was written in our sexy element and if not then we fade the label back to 100%. This is kind of everything we do here, pretty simple.

4. Showing of a demo and download source

I’ve set up a demo here: DEMO

The source code you can either pick it from the demo page or from here: SOURCE

5. Wrapping up!

So here is our nice form styling that you can use on your website and that can be done very easily. Feel free to leave us comments and suggestions. Thanks a lot!

Have fun coding!

Related posts

• Making a Mosaic Slideshow With jQuery and CSS (0)
• How to Code up a Web Design from PSD to HTML (0)
• Sweet AJAX Tabs With jQuery 1.4 and CSS3 (0)
• Making a Photoshoot Effect With jQuery and CSS (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)

Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

Step 1 – XHTML

The mosaic effect of the slideshow is achieved by dividing the original image into smaller parts. These tiles, which contain parts of the image, are sequentially hidden from view, which causes the effect. The markup of the slideshow is pretty straightforward. It consists of the main slideshow container element (#mosaic-slideshow), a left and right arrow for previous and next transition and the mosaic-slide div, which is inserted by jQuery at run-time.

demo.html

<div id="mosaic-slideshow">
	<div class="arrow left"></div>
	<div class="arrow right"></div>

	<div class="mosaic-slide" style="z-index: 10;">

		<!-- The mosaic-slide div and the tiles are generated by jQuery -->
		<div class="tile" style="..."></div>
		<div class="tile" style="..."></div>
		<div class="tile" style="..."></div>
		<div class="tile" style="..."></div>

	</div>
</div>

The div with the mosaic-slide class name is added to the page by jQuery after the transition() JavaScript function is executed (we will come back to this in the third step). Inside it you can see the tile divs. There are a total of 56 such divs, each of which has a 60px by 60px portion of the slide image set as its background.

Mosaic Slideshow

Step 2 – CSS

To make this effect work (and most importantly look good), we have to add a few lines of CSS. Only the code directly used by the gallery is shown here. You can see the code that styles the rest of the demonstration page in styles.css.

styles.css – Part 1

#mosaic-slideshow{
	/* The slideshow container div */
	height:500px;
	margin:0 auto;
	position:relative;
	width:670px;
}

.mosaic-slide{
	/* This class is shared between all the slides */
	left:80px;
	position:absolute;
	top:25px;

	border:10px solid #555;

	/* CSS3 rounded corners */
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

.tile{
	/* The individual tiles */
	height:60px;
	width:60px;
	float:left;
	border:1px solid #555;
	border-width:0 1px 1px 0;
	background-color:#555;
}

The slideshow is contained inside the div with an ID of mosaic-slideshow (or #mosaic-slideshow, if we refer to it in a form of a CSS / jQuery selector).  There can be only one such div in the page, hence the use of an ID attribute.

However there can be more than one mosaic-slide divs in the page. The effect itself is achieved by stacking two slides on top of each other and hiding the tiles of the first one to reveal the ones of the second. This is why we are using a class name instead of an ID.

Some of the more interesting rules presented here are the three CSS3 rules for rounded corners. As the CSS3 standard is still a work in progress, browsers don’t support the regular border-radius property yet (except for the new 10.50 version of Opera), and need vendor-specific prefixes to recognize it. The -moz- prefix is used by Firefox, and -webkit- is used by Safari and Chrome.

styles.css – Part 2

.arrow{
	/* The prev/next arrows */
	width:35px;
	height:70px;
	background:url("img/arrows.png") no-repeat;
	position:absolute;
	cursor:pointer;
	top:50%;
	margin-top:-35px;
}

.arrow.left{
	left:15px;
	background-position:center top;
}

.arrow.left:hover{
	background-position:center -70px;
}

.arrow.right{
	right:15px;
	background-position:center -140px;
}

.arrow.right:hover{
	background-position:center -210px;
}

.clear{
	/* This class clears the floats */
	clear:both;
}

The arrow class is shared by the previous and next arrows. They do need individual styling in addition to this common rule, so we add it after this. We are also using a CSS sprite as the background for the arrow divs. It contains a regular and hover state for both arrows, which spares us from having to use four individual images.

“CSS spriting” is a widespread technique used by web designers. It allows the designer to join multiple smaller images into a single larger one, called a sprite, which is downloaded faster and saves the web server from multiple download requests. After this, the designer can use the CSS background property in conjunction with setting the elements to a fixed size, to show only the part of the sprite image that they need.

Mosaic Slideshow

Step 3 – jQuery

After including the jQuery library to the page, we can move on to creating the script that will make the slideshow tick. To achieve the mosaic effect, the script defines 4 functions:

• transition() – this function makes an animated transition between the currently shown slide, and a new one specified by the id parameter. It works by positioning the new slide we want to show, below the current one, and then hiding the current one one tile at a time;
• generateGrid() – this function is used by transition() to generate a grid of tiles. Each tile contains a part of the slide image as its background;
• next() – detects which the next slide is and runs the transition() function with its index;
• prev() – analogous to next().

script.js – Part 1

/* The slide images are contained in the slides array. */
var slides = new Array('img/slide_1.jpg',
					   'img/slide_2.jpg',
					   'img/slide_3.jpg',
					   'img/slide_4.jpg',
					   'img/slide_5.jpg');

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	$('.arrow.left').click(function(){
		prev();

		/* Clearing the autoadvance if we click one of the arrows */
		clearInterval(auto);
	});

	$('.arrow.right').click(function(){
		next();
		clearInterval(auto);
	});

	/* Preloading all the slide images: */

	for(var i=0;i<slides.length;i++)
	{
		(new Image()).src=slides[i];
	}

	/* Showing the first one on page load: */
	transition(1);

	/* Setting auto-advance every 10 seconds */

	var auto;

	auto=setInterval(function(){
		next();
	},10*1000);
});

The $(document).ready() method is executed once the page has finished loading. This will ensure that all the divs and other elements are accessible to the script. Inside it we bind a function for the click event on the previous and next arrows, preload all the images, show the first slide (otherwise the slideshow would be empty) and set up the auto-advance interval.

script.js – Part 2

var current = {};
function transition(id)
{
	/* This function shows the slide specified by the id. */

	if(!slides[id-1]) return false;

	if(current.id)
	{
		/* If the slide we want to show is currently shown: */
		if(current.id == id) return false;

		/* Moving the current slide layer to the top: */
		current.layer.css('z-index',10);

		/* Removing all other slide layers that are positioned below */
		$('.mosaic-slide').not(current.layer).remove();
	}

	/* Creating a new slide and filling it with generateGrid: */
	var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));

	/* Moving it behind the current slide: */
	newLayer.css('z-index',1);

	$('#mosaic-slideshow').append(newLayer);

	if(current.layer)
	{
		/* Hiding each tile of the current slide, exposing the new slide: */
		$('.tile',current.layer).each(function(i){
			var tile = $(this);
			setTimeout(function(){
				tile.css('visibility','hidden');
			},i*10);
		})
	}

	/* Adding the current id and newLayer element to the current object: */
	current.id = id;
	current.layer = newLayer;
}

The transition function uses the global current object to store the id of the currently shown slide, and a reference to the current slide div. This is later used to remove leftover slides and prevent a transition from occurring if the same slide as the currently active one is to be shown.

Notice how we use the each method on line 31 to loop through the tiles of the current slide and schedule them to be hidden in i*10 milliseconds in the future. As i is incremented for every tile, this mean that they are hidden 10 milliseconds apart from one another.

Slide Transition

script.js – Part 3

function next()
{
	if(current.id)
	{
		transition(current.id%slides.length+1);
	}
}

function prev()
{
	if(current.id)
	{
		transition((current.id+(slides.length-2))%slides.length+1);
	}

}

/* Width and height of the tiles in pixels: */
var tabwidth=60, tabheight=60;

function generateGrid(param)
{
	/* This function generates the tile grid, with each tile containing a part of the slide image */

	/* Creating an empty jQuery object: */
	var elem = $([]),tmp;

	for(var i=0;i<param.rows;i++)
	{
		for(var j=0;j<param.cols;j++)
		{
			tmp = $('<div>', {
					"class":"tile",
					"css":{
						"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
					}
			});

			/* Adding the tile to the jQuery object: */
			elem = elem.add(tmp);
		}

		/* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
		elem = elem.add('<div class="clear"></div>');
	}

	return elem;
}

The parameter passed to generateGrid() is an object containing the rows and the columns we want to be generated, as well as the image to be set as the background of the tiles. While generating the tiles, the background image is offset according to the current position of the tile in the row and in the column. Finally the tile is added to an empty jQuery object which is returned at the end.

With this the mosaic slideshow is complete!

Wrapping it up

Today we created a slideshow with an animated mosaic transition effect. You can modify it to include a different number of rows and columns or change the way slides are changed entirely.

What do you think? How would you use this slideshow?

Related posts

• Awesome CSS+JS form styling (0)
• Sweet AJAX Tabs With jQuery 1.4 and CSS3 (0)
• Making a Photoshoot Effect With jQuery and CSS (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• How to Code up a Web Design from PSD to HTML (0)

HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app.  This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.

View the demo

The PSD concept

First, we’ll need to put together a concept for our app website. Create a new document in Photoshop. I use the dimensions of 1680×1050 to give a typical widescreen monitor resolution to work with.

Fill the background with grey (#252525), then add some subtle texture by heading to Filter > Noise > Add Noise. Select the Gaussian and Monochromatic options and set the amount to 1.3%.

Draw a simple app icon with the rounded rectangle, and type out the name of our app in Helvetica Bold.

Double click the layer of each object to add some layer styling. Give each one a Color Overlay of #00ffcc and a soft Outer Glow to create an illuminated appearance.

CMD-Click the layer thumbnail of each object to load the selection, then fill a new layer with a horizontal scan-lines pattern.

Change the blending mode of the scan-lines to Multiply and drop the opacity to around 35%. Add a little logo and the usual highlight to the iPhone icon graphic.

Type out an enticing introduction for the app with the type tool and add the same illuminated layer style. If you haven’t guessed already, the PKE Meter is the tool Egon Spengler uses in Ghostbusters. If Egon was busting ghosts in 2010, there’s no doubt he’d be using his iPhone to track psycho-kinetic energy.

Fill out the design with a description of the app. To give the text a little extra pop, add a black drop shadow.

Take the time to line-up the elements of your design and finish off the description of the app with a list of features.

Download the handy iPhone UI kit from Teehan+Lax and paste in the custom app screenshot in place. Position the iPhone over to the right. Keeping the scale pretty large will help it act as a main focal point for the design and maintain the small details of the app interface.

No iPhone app website would be complete without the ‘Available on the App Store’ badge. Paste in a copy of the badge and add some general styling with a subtle Inner Shadow.

With just some copyright and disclaimer information added to the footer area, the concept is ready to be sliced and exported. Save the logo, the large iPhone graphic, the app store badge and a clipping of the textured background as PNG graphics.

The HTML5 structure

<!DOCTYPE html>
<html>
<head>
	<title>PKE METER app for iPhone</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="container">

	</div>
</body>
</html>

Next we’ll put together the basics for the HTML index page. The HTML5 doctype is pretty simple indeed. Just add <!DOCTYPE html>. This is followed by some familiar HTML that outlines the <head> and <body>. We’ll add a div with an id of container to enclose all the content in a fixed width.

<header>
	<img src="images/logo.png" alt="PKE Meter" id="logo" />
	<h1>Track ghosts,<br> on your iPhone</h1>
</header>

Now the new HTML5 elements will come into play. The <header> element is used to enclose a group of introductory or navigational aids. The logo and intro title of our design would fit perfectly here. The logo itself is added as an image, and the intro, being the most descriptive element is coded in a <h1>.

<section>
	<p>Follow in the footsteps of Ghostbuster legend Egon Spengler and become a doctor of parapsychology with the PKE METER app for iPhone.</p>

	<h2>Features:</h2>
	<ul>
		<li>Study paranormal activity.</li>
		<li>Track sources of psycho-kinetic energy.</li>
		<li>Measure supernatural energy readings.</li>
	</ul>
</section>

A <section> in HTML5 refers to a grouping of content, so all the information about the app in our design can be enclosed in the section element.

<aside>
	<a href="#"><img src="images/iphone.png" alt="iPhone showcasing a screenshot of the PKE METER app." /></a>
</aside>

An <aside> in HTML5 is pretty similar to a <section> as it also basically a grouping of content, but an aside is used specifically for separate content that has a connection to a nearby section. The large graphic of the iPhone and app screenshot is related to the information that’s within the adjacent <section> element in our design, so it would work well as an aside.

<footer>
	<a href="#" id="app-store">Available on the iPhone app store</a>

	<p><small>&copy; Paranormal Lab of Columbia University.</small></p>
	<p><small>Use of PKE METER for long periods may result in brain cell mutation.</small></p>
</footer>

The <footer> element is another handy structural HTML tag that replaces the old <div id="footer"> method with something more descriptive. Within the footer I’ve used <small> tags to surround the copyright and disclaimer. The <small> element is used to represent small print, and can be used for disclaimers, caveats, legal restrictions and copyrights (not small as in size, as the name suggests.)

<!DOCTYPE html>
<html>
<head>
	<title>PKE METER app for iPhone</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="container">
		<header>
			<img src="images/logo.png" alt="PKE Meter" id="logo" />
			<h1>Track ghosts,<br> on your iPhone</h1>
		</header>

		<section>
			<p>Follow in the footsteps of Ghostbuster legend Egon Spengler and become a doctor of parapsychology with the PKE METER app for iPhone.</p>

			<h2>Features:</h2>
			<ul>
				<li>Study paranormal activity.</li>
				<li>Track sources of psycho-kinetic energy.</li>
				<li>Measure supernatural energy readings.</li>
			</ul>
		</section>

		<aside>
			<a href="#"><img src="images/iphone.png" alt="iPhone showcasing a screenshot of the PKE METER app." /></a>
		</aside>

		<footer>
			<a href="#" id="app-store">Available on the iPhone app store</a>

			<p><small>&copy; Paranormal Lab of Columbia University.</small></p>
			<p><small>Use of PKE METER for long periods may result in brain cell mutation.</small></p>
		</footer>
	</div>
</body>
</html>

So here’s our simple HTML5 page altogether. We’ve only used a couple of the new elements, but that’s all we needed for this particular design. It has however, enabled us to create a really clean markup and has seriously cut down on the number of <div> tags scattered around the HTML, making it much more easy to see where specific sections start and end.

The CSS styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, header, section, aside, footer, button {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif;
	background: #2b2b2b url(images/bg.png);
}

#container {
	width: 960px;
	margin: 0 auto;
	padding: 90px 0 100px 0;
	position: relative;
	overflow: hidden;
}

Now it’s time to get everything styled up according to the visual concept. To begin, the stylesheet is given a quick reset to strip out the browser default styling, the body is given the dark textured background and the containing div is positioned centrally.

header {}
	header img#logo {
		margin: 0 0 50px 0;
	}
	header h1 {
		margin: 0 0 30px 90px;
		font-size: 60px;
		font-weight: normal;
		line-height: 74px;
		color: #00ffcc;
		text-shadow: 0px 0px 10px #00ffcc;
	}

The logo and title can be moved into position by editing their margins, and the text for the intro title can be styled up the match the visual concept by adding the bright green color, and the illuminated effect with the CSS3 text-shadow property.

section {
	margin: 0 15px 30px 0;
	width: 530px;
	float: left;
}
	section p {
		margin: 0 0 30px 90px;
		font-size: 22px;
		line-height: 35px;
		color: #d9d9d9;
		text-shadow: 0px 1px 5px #000;
	}
	section h2 {
		margin: 0 0 10px 90px;
		font-size: 40px;
		font-weight: normal;
		color: #00ffcc;
		text-shadow: 0px 0px 10px #00ffcc;
	}
	section ul {
		margin: 0 0 30px 90px;
		font-size: 22px;
		line-height: 45px;
		color: #d9d9d9;
		text-shadow: 0px 1px 5px #000;
	}

The <section> that contains all the textual information is given a specific width and floated to the left, and all the subsequent content elements such as the header two, paragraphs and unordered list are all given the appropriate font-sizing, margin and coloring to match the PSD concept.

aside {
	position: absolute;
	top: 20px;
	right: 0;
}

The <aside> can then be moved into place with some absolute positioning. This ensures the iPhone graphic appears 20px from the top of the page, relative to the containing div.

footer {
	width: 960px;
	float: left;
	clear: both;
	overflow: hidden;
}
	footer a#app-store {
		display: block;
		width: 198px;
		height: 72px;
		background: url(images/app-store.png);
		text-indent: -9999px;
		margin: 0 0 0 84px;
		float: left;
	}
	footer p {
		float: right;
		clear: right;
		font-size: 16px;
		color: #5a5a5a;
		margin: 10px 0 0 0;
	}

The footer can then be cleared so that it sits underneath the previous content and given an overflow:hidden declaration to clear itself after the floats used on the anchor and paragraphs. Speaking of anchors and paragraphs, these elements are each given moved into place with floats to finish off the CSS.

Previewing the site in Firefox, Chrome and Safari will show the site in all its coded glory. Unfortunately, Internet Explorer doesn’t share support for HTML5, so it needs a little extra work.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
</script>

Because IE doesn’t support HTML5, it just doesn’t recognise those new fancy elements. The good news is it’s easy to tell IE to create them anyway by adding the above Javascript to your <head>. As soon as this code is added, everything looks perfect in IE, albeit with the cool illumination effects being gracefully degraded. It’s worth noting that if Javascript is turned off, IE will show the broken version of the site. Chances are with an iPhone app website like this, the majority of the visitors are going to be clued up on their browsers, so it’s a risk that we could take for this particular design.

View the demo

Related posts

• How to Code up a Web Design from PSD to HTML (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• Coding a CSS3 & HTML5 One-Page Website Template (0)
• Design a Prettier Web Form with CSS 3 (0)
• How to Make a CSS Sprite Powered Menu (0)

If you do not want to complete part one of this tutorial, you can download the source files created in that lesson here.

Step 1 – HTML

Different people will require a button for different purposes. The remainder of this tutorial will explain a simple scenario where the button functions as a simple download link. Create a link to an imaginary (or real) file for download:

<a href="path/to/download.zip" class="button"></a>

Step 2 – CSS

Add the following CSS to your HTML document:

.button {
	width:570px;
	height:64px; /* Notice that the height is not the height of the whole sprite, but the height of one single button */
	display:block;
	background-image:url(images/downloadbutton.png); /*path to the sprite*/
	background-position: top; /* the background position (in combination with the height!) makes it possible that only the top of the whole sprite will be visible */
}

When you apply the CSS code above, you will only see the grey button, because it’s positioned on top and the height is 64px

Link hover button

.button:hover{
	width:570px;
	background-position: bottom;
	height:64px;
	background-image:url(images/downloadbutton.png) no repeat;
}

When you apply the CSS code above, you will only see the green button when you hover the download button, because it’s positioned at the bottom and the height is 64px

Demo: View Live Demo

Step 3 – Fading hover effect

This step is not necessary, but it’s an optional step. The transition will be smoothed with JavaScript. We’re going to use the popular jQuery library.

The original tutorial comes from this website. I’ll do my best to explain.

Step 4 – Add code between the head tags

Download jQuery. First we need to refer in the head to the .js file that we’ve just downloaded.

<script type="text/javascript" src="path/to/jquery-1.3.2.min.js"></script>

After that we can add the following code between the head tags.

<script type="text/javascript"&gt
	$(document).ready(function() {
		// Add the class 'button' just like in CSS with a dot in front of it
		$('.button').append('<span class="hover"&gt</span&gt').each(function () {
	  		var $span = $('&gt span.hover', this).css('opacity', 0);
	  		$(this).hover(function () {
	    		$span.stop().fadeTo(500, 1); //Change the number 500 to change the speed of the Fade In
	 		}, function () {
	   	$span.stop().fadeTo(500, 0); //Change the number 500 to change the speed of the Fade Out
	  		});
		});
	});
</script>

Step 5 – Edit the CSS

.button {
	position:relative;
	display:block;
	height: 64px;
	width: 570px;
	background:url(images/downloadbutton.png) no-repeat;
	background-position: top;
}

.button span.hover { /*notice the different class: span.hover*/
	position: absolute;
	display: block;
	height: 64px;
	width: 570px;
	background: url(images/downloadbutton.png) no-repeat;
	background-position: bottom;
}

View Live Demo to check the result.

Download the source files (PSD included)

Related posts

• Design and Code a Cool iPhone App Website in HTML5 (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)
• How to Code up a Web Design from PSD to HTML (0)
• Coding a CSS3 & HTML5 One-Page Website Template (0)

If this sounds a bit confusing, don’t worry; today’s four-minute video quick tip should clear things up.

// Create an object.
var obj = {
        // this = obj
	somevar : 'some value',

	doSomething : function() {
		alert(this.somevar);
	}
};

// When bound to an event handler, this will
// refer to the target of the handler, or the div - not obj.
$('div').click(obj.doSomething); // undefined. 

// With $.proxy, we pass two parameters.
// 1. The method to call.
// 2. The context.
// In this case, we're forcing obj to once again be equal to this.
$('div').click( $.proxy(obj.doSomething, obj) ); // some value

Related posts

• Use ajax to create a cacheing system (0)
• Smooth Horizontal Tweened Menu with AS3 (0)
• Quick and Easy Way to Implement Drag n Share With jQuery (0)
• Making Image Overlay Caption Using CSS (0)
• Jquery Fade In, Fade Out Effect – Updated (0)

Graceful Degradation

Since HTML5 and CSS3 aren’t going to be supported in all the browsers, especially not older ones like IE6, we can try and make it work in everything, but it won’t look the same in all of the browsers. For instance, rounded corners wont work in IE or Opera, but it wont affect the usability of that web page. Likewise, the flexible box model only works in Firefox and Webkit.

What we can do is we can set up a failsafe so that the web page will work in every browser correctly, but not in the same way. For instance, I made it so that in Webkit browsers, the page uses the flexible box model. However everywhere else it just switches to the old fashioned way and floats the elements to either side to create columns.

Overall this is the best way to handle issues like this. Instead of compromising a users experience, just make it work but in a different way. The experience doesn’t have to be linear across all browsers.

A HTML5 Document

The basic HTML5 layout, or the skeleton of it if you will, is nothing that new. Your mind will not be blown.

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />

<title>HTML5 and CSS3 Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />

</head>
<body>

</body>
</html>

One of the most notable differences is the addition of the new doctype, <!DOCTYPE html>, which is way easier to use than the old ones HTML has provided us with. Then we just do all the normal stuff, such as define the charset, title and link.

New and Fancy

Traditionally web pages are designed like this.

With HTML5 we replace all those divs with specific elements, such as <header> and <aside>. This is a big step up from having to define our own elements with id’s and stuff, and makes HTML a lot more specific. When HTML4 was released, it wasn’t released with the web of 2010 in mind. HTML5 on the other hand was.

Don’t think the div is an unnecessary piece of baggage on the HTML5 specification, as it still has as many uses now as it did when HTML4 was released. Most HTML5 tags work in Webkit (well, in Chrome 5 anyway), so that’s the browser I’ve been using to make all of this flow together. However, Firefox doesn’t center the flexible box model correctly, and IE is, well, IE, so I’ve had to throw in a bunch of hacks to make this work correctly.

First off, stick this script in the head of your document.

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie67hacks.css" />
<![endif]-->

HTML5 tags wont work in IE, so the little javascript bit fixes that. The CSS files are there so we can fix some errors later on with the design. Oh, and by the way, this is the pretty basic design we’re going to be doing today. I’ve tried to keep it simple so that you can get a good idea of what HTML5 and CSS3 can do, rather than over complicating the process.

The Body

The body is probably the bit that you’re most worried about. HTML5 tags are a tad different from their HTML4 counterparts, but really only by their names with most of the new tags acting like <div> and <span> tags.

Header

Lets work on the header. We’re going to be using the <header> tag for this one. It’s new to HTML5, and is defined as the following:

The header element represents a group of introductory or navigational aids.

So basically the header tag contains some navigational elements and the logo or introductory text. For the navigation we’ll be using the <nav> tag, and we’ll just be using a <div> for the logo. So the skeleton of the <header> element is going to look a bit like this:

<header>
	<div id="logo">
		...
	</div>
	<nav>
		...
	</nav>
</header>

Then it’s just a case of adding the content to these elements. For the #logo div, we can stick a logo image in, or we could use headings. If you’re going to use headings, and have multiple headings (i.e. <h1> and <h2>), we can use the <hgroup> tag. The definition for the <hgroup> tag is..

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

So for example, you could have this in the logo area:

<hgroup>
	<h1>Webtint</h1>
	<h2>Web Development Blog</h2>
</hgroup>

‘course, I’m just going to use an image instead, but heck, if you want to use the logo I stuck together feel free by getting it from here.

		<a href="#"><img src="images/logo.gif" alt="Logo" /></a>

Inside the <nav> we’ll just use an unordered list.

		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">tutorials</a></li>
			<li><a href="#">resources</a></li>
			<li><a href="#">articles</a></li>
			<li><a href="#">forums</a></li>
			<li><a href="#">contact</a></li>
		</ul>

The Content

For the content area, I’ve went for a structure like this:

<div id="content">
	<section class="hfeed">
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"> ...</h2>
				<h3> ... </h3>
			</hgroup>
			<p class="entry-summary"> ... </p>
			<footer> ... </footer>
			<br /><hr /><br />
		</article>
	</section>
	<aside>
		...
	</aside>
</div>

New tags that you’ve probably noticed include the <section> and <aside> tags. There’s also an <article> tag nested inside the section, and a <footer> tag as well.

First off, the section tag is defined as “The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading”. Since the <section> is going to encompass the articles titles and their summaries, <section> seems like a suitable tag to use here.

The <article> tag is defined as “self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”, for example a blog post, so it’s perfect for the usage we’re going to be using it for. The <footer> tag inside that is defined as “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like”.

Finally, the <aside> tag is defined as “The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography”. This is great, because the sidebar is related to the content, while being separate.

After all that it’s just a case of adding the content. Here’s one I made earlier.

<div id="content">
	<section class="hfeed">
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"><a href="#">The Title</a></h2>
				<h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3>
			</hgroup>
			<p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p>
			<footer><a href="#">Comment on this (5)</a>&emsp;&bull;&emsp;<a href="#">Tweet this</a>&emsp;&bull;&emsp;<a href="#">Stumble Upon</a></footer>
			<br /><hr /><br />
		</article>
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"><a href="#">The Title</a></h2>
				<h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3>
			</hgroup>
			<p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p>
			<footer><a href="#">Comment on this (5)</a>&emsp;&bull;&emsp;<a href="#">Tweet this</a>&emsp;&bull;&emsp;<a href="#">Stumble Upon</a></footer>
			<br /><hr /><br />
		</article>
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"><a href="#">The Title</a></h2>
				<h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3>
			</hgroup>
			<p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p>
			<footer><a href="#">Comment on this (5)</a>&emsp;&bull;&emsp;<a href="#">Tweet this</a>&emsp;&bull;&emsp;<a href="#">Stumble Upon</a></footer>
			<br /><hr /><br />
		</article>
	</section>
	<aside>
		<h2>Archives</h2>
		<ul>
			<li><a href="#">February 2010</a></li>
			<li><a href="#">January 2010</a></li>
			<li><a href="#">December 2009</a></li>
		</ul>
		<br />
		<h2>Categories</h2>
		<ul>
			<li><a href="#">Tutorials</a></li>
			<li><a href="#">Articles</a></li>
			<li><a href="#">Resources</a></li>
			<li><a href="#">Inspiration</a></li>
		</ul>
		<br />
	</aside>
</div>

Apart from the elements I mentioned, it’s all regular old HTML4, eh?

The Footer

The footer is a lot easier to make, and I think that generally I’ll leave this up to you to expand. For the time being though, I’ve decided to just go with a simple copyright. You could add more to these columns if you wanted.

<footer id="main-footer">
	<section id="footer-1">
		Copyright Webtint &copy; 2010
	</section>
	<section id="footer-2">

	</section>
</footer>

The final HTML code looks a bit like this:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />

<title>HTML5 and CSS3 Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie67hacks.css" />
<![endif]-->
</head>
<body>
<div>
	&nbsp;
</div>

<header>
	<div id="logo">
		<a href="#"><img src="images/logo.gif" alt="Logo" /></a>
	</div>
	<nav>
		<ul>
			<li><a href="#">home</a></li>
			<li><a href="#">tutorials</a></li>
			<li><a href="#">resources</a></li>
			<li><a href="#">articles</a></li>
			<li><a href="#">forums</a></li>
			<li><a href="#">contact</a></li>
		</ul>
	</nav>
</header>

<div id="content">
	<section class="hfeed">
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"><a href="#">The Title</a></h2>
				<h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3>
			</hgroup>
			<p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p>
			<footer><a href="#">Comment on this (5)</a>&emsp;&bull;&emsp;<a href="#">Tweet this</a>&emsp;&bull;&emsp;<a href="#">Stumble Upon</a></footer>
			<br /><hr /><br />
		</article>
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"><a href="#">The Title</a></h2>
				<h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3>
			</hgroup>
			<p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p>
			<footer><a href="#">Comment on this (5)</a>&emsp;&bull;&emsp;<a href="#">Tweet this</a>&emsp;&bull;&emsp;<a href="#">Stumble Upon</a></footer>
			<br /><hr /><br />
		</article>
		<article class="hentry">
			<hgroup>
				<h2 class="entry-title"><a href="#">The Title</a></h2>
				<h3>Posted by <a class="author" href="#">Johnny</a> on <abbr class="updated published" title="20100228T15:08:00">February 28th</a></time></h3>
			</hgroup>
			<p class="entry-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat hendrerit ante ut sagittis. Fusce blandit interdum tellus, non ornare massa luctus id. Proin lectus libero, dignissim sit amet dignissim in, facilisis sit amet tellus. Aenean sed felis a justo ultrices facilisis. Sed vehicula sagittis consequat. Donec iaculis lacinia augue eu aliquam. Vestibulum aliquet erat quis felis venenatis a ullamcorper diam semper. Donec vel neque quis sem fermentum tincidunt ac in mi. Pellentesque auctor consectetur justo, eu fermentum urna volutpat sit amet. Suspendisse lacus tellus, porta sed condimentum et, elementum vel diam. Donec at massa neque. Sed lobortis feugiat metus, tincidunt dignissim quam convallis sed.</p>
			<footer><a href="#">Comment on this (5)</a>&emsp;&bull;&emsp;<a href="#">Tweet this</a>&emsp;&bull;&emsp;<a href="#">Stumble Upon</a></footer>
			<br /><hr /><br />
		</article>
	</section>
	<aside>
		<h2>Archives</h2>
		<ul>
			<li><a href="#">February 2010</a></li>
			<li><a href="#">January 2010</a></li>
			<li><a href="#">December 2009</a></li>
		</ul>
		<br />
		<h2>Categories</h2>
		<ul>
			<li><a href="#">Tutorials</a></li>
			<li><a href="#">Articles</a></li>
			<li><a href="#">Resources</a></li>
			<li><a href="#">Inspiration</a></li>
		</ul>
		<br />
	</aside>
</div>
<footer id="main-footer">
	<section id="footer-1">
		Copyright Webtint &copy; 2010
	</section>
	<section id="footer-2">

	</section>
</footer>

</body>
</html>

Cascading Stylesheets Numero 3

Now at the minute, if you go and look at your document, you’ll see that it isn’t looking like much, and that’s because we haven’t added any CSS yet. The CSS file I’ve compiled is very basic and simple, adding only the bare essentials in order to make it as compressed as possible. Here’s the full CSS file for your amusement:

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #f1f1f1;
	padding: 0;
	margin: 0;
	color: #222;
	font-size: 62.5%;

}

header {
	width: 960px;
	margin: 0px auto;
	display: block;

}
	#logo {
		padding: 35px 0px 35px 40px;
		background: #fff;

		-moz-border-radius: 0.8em;
		-webkit-border-radius: 0.8em;

	}
	#logo a:active {
		background: transparent !important;
	}

nav {
	width: 950px;
	margin: 0px auto;
	overflow: hidden;
	font-size: 2.0em;
	font-weight: bold;
	padding: 0px 0px 0px 10px;

	display: block;
}

	nav ul {
		padding: 0;
		margin: 0;
	}

	nav ul li {
		list-style: none;
		float: left;
		padding: 0px 35px 0px 10px;
	}
	nav a {
		text-decoration: none;
		color: #000 !important;
		display: block;
		padding: 20px;
	}
	nav a:hover {
		color: #444;
		background: #fff;
	}

#content {
	width: 960px;
	margin: 0px auto;

	display: -webkit-box;
	-webkit-box-orient: horizontal;

	font-size: 1.4em;

}

footer {
	display: block;
}
	#main-footer {
		width: 960px;
		margin: 0px auto;
		padding: 15px;
		font-size: 1.8em;
		font-weight: bold;
		text-align: center;
	}

.hfeed, x:-moz-any-link, x:only-child {
	float: left;
}

aside, x:-moz-any-link, x:only-child {
	float: right;
}

article {
	text-align: justify;
	line-height: 1.5em;
	color: #222;

	display: block;
}

#main-content, .hfeed {
	padding: 10px 20px 20px 40px;
	width: 500px;
	background: #fff;

	-moz-border-radius-bottomleft: 0.8em;
	-webkit-border-bottom-left-radius: 0.8em;
	-moz-border-radius-topleft: 0.8em;
	-webkit-border-top-left-radius: 0.8em;

	display: block;

}

aside {
	padding: 10px 20px 20px 40px;
	width: 340px;
	background: #fff;

	-webkit-border-bottom-right-radius: 0.8em;
	-moz-border-radius-bottomright: 0.8em;
	-webkit-border-top-right-radius: 0.8em;
	-moz-border-radius-topright: 0.8em;

	display: block;

}
	aside ul {
		list-style: none;
		padding: 0px 0px 0px 6px;
	}

	aside ul li {
		line-height: 1.5em;
		font-size: 1.2em;
		border-bottom: 1px dotted #d9d9d9;
	}
	aside ul li a {
		padding: 10px 0px 10px 10px;
		display: block;
		font-weight: bold;
	}
	aside ul li a:hover {
		background: #f1f7f9;
	}

/* Some Headings for You */
h1 { font-size: 3.0em; }
h2 { font-size: 2.2em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }

hgroup h3, hgroup h3 a { color: #9aa8ad !important; }
hgroup h1, hgroup h1 a { color: #51add3 !important; }
h3 a { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { line-height: 0.5em; }

a {
	color: #2a708e;
	text-decoration: none;
}

a img {
	border: 0;
}

a:visited { color: #104258; }
a:active { background: #eaf7fc; }
a:hover { color: #0c1e2f; }

hr {
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	border-top: 1px dotted #d9d9d9;
}

.floatleft {
	float: left;
}

.floatright {
	float: right;
}

You may have noticed the few lines that go like this:

.hfeed, x:-moz-any-link, x:only-child {
	float: left;
}

aside, x:-moz-any-link, x:only-child {
	float: right;
}

These are firefox hacks, as firefox was handling the flexible box model in a weird way, so I decided just to use the old fashioned way, and use floats. Speaking of the flexible box model, click here to learn more about it. Since the flexible box model has only been implemented in webkit browsers in my CSS, the only references you’ll see to it are these:

	display: -webkit-box;
	-webkit-box-orient: horizontal;

Another CSS3 feature I’ve included is rounded corners, which you may see floating about the script in forms like this:

	-webkit-border-bottom-right-radius: 0.8em;
	-moz-border-radius-bottomright: 0.8em;
	-webkit-border-top-right-radius: 0.8em;
	-moz-border-radius-topright: 0.8em;

Rounded corners are only really supported in Firefox and Webkit at the minute, so that’s the only places they’ll work. Another thing you might notice is that on all the new HTML5 tags, I’ve added display: block;. This is because firefox (again) was acting up and this seemed to remedy the problem. This leads us on to our next problem. Internet Explorer

Internet Explorer Hacks

You might remember earlier that we included some links to stylesheets for IE hacks. You’re going to want to create those files now. A lot of you may not know this, but I have a great disdain for all things Internet Explorer, mainly because of it’s awful support for web technologies. So lets try and fix that up with a little CSS magic.

In the iehacks.css file, add this:

#content {
	background: url(images/spacer.gif) repeat;
}

aside {
	float: right;
	padding-top: 40px;
}

.hfeed {
	float: left;
	padding-top: 40px;
}

hr {
	border-bottom: 1px solid #fff !important;
	border-left: 1px solid #fff !important;
	border-right: 1px solid #fff !important;
}

This is just to fix a few problems with alignment and all that. This applies to all versions of IE. The spacer.gif image is a 1×1px white square. You might want to make that or save it from here. After that, open up ie67hacks.css and add the following:

aside ul li {
	position: relative;
	right: 40px;

}

Again, alignment issues. After that it’s just a case of putting it all together and hoping it stays put. For all you out there who don’t want to go to the bother of picking things out from this article, I’ve stuck together a demo and a downloadable zip for you below.

Related posts

• Design and Code a Cool iPhone App Website in HTML5 (0)
• How to Code up a Web Design from PSD to HTML (0)
• Coding a CSS3 & HTML5 One-Page Website Template (0)
• How to Make a CSS Sprite Powered Menu (0)
• Protect Your Flash Files From Decompilers by Using Encryption (0)

<?php
function cleanInput($input) { $search = array( '@<script[^>]*?>.*?</script>@si', // Strip out javascript '@<[\/\!]*?[^<>]*?>@si', // Strip out HTML tags '@<style[^>]*?>.*?</style>@siU', // Strip style tags properly '@<![\s\S]*?--[ \t\n\r]*>@' // Strip multi-line comments ); $output = preg_replace($search, '', $input); return $output; }
?>

2) Sanitization function

Uses the function above, as well as adds slashes as to not screw up database functions.

<?php
function sanitize($input) { if (is_array($input)) { foreach($input as $var=>$val) { $output[$var] = sanitize($val); } } else { if (get_magic_quotes_gpc()) { $input = stripslashes($input); } $input = cleanInput($input); $output = mysql_real_escape_string($input); } return $output;
}
?>

Usage

<?php $bad_string = "Hi! <script src='http://www.evilsite.com/bad_script.js'></script> It's a good day!"; $good_string = sanitize($bad_string); // $good_string returns "Hi! It\'s a good day!" // Also use for getting POST/GET variables $_POST = sanitize($_POST); $_GET = sanitize($_GET);
?>

Related posts

• AJAX-enabled Sticky Notes With PHP and jQuery (0)
• AJAX User Poll Using jQuery and PHP (0)
• PHP and MySQL File Download Counter (0)
• Big HTML Tutorial & Reference (0)
• Make your MooTools Code Shorter, Faster, and Stronger (0)

Each file will have a corresponding row in the database, where the total number of downloads is saved. PHP will update the MySQL database and redirect the visitors to the appropriate files.

To track the number of downloads, you just need to upload your files to the files folder, and use a special URL to access them.

Step 1 – XHTML

The first step is to lay down the XHTML markup of the tracker.  It is pretty straightforward – we have the file-manager div, which contains an unordered list with each file as a li element.

The files, that are going to be tracked, are put into the files folder in the script root directory (you can see how the file structure is organized in the demonstration zip file). PHP then loops through all the files and adds each one as a separate li element to the unordered list.

demo.php

<div id="file-manager">

	<ul class="manager">

		<!-- The LI items are generated by php -->
		<li><a href="download.php?file=photoShoot-1.0.zip">photoShoot-1.0.zip
			<span class="download-count" title="Times Downloaded">0</span> <span class="download-label">download</span></a>
		</li>
	</ul>

</div>

Notice the href attribute of the hyperlink – it passes  the name of the file as a parameter to download.php. This is where the download tracking happens, as you will see in a moment.

You are not limited to this interface in order to provide download tracking – you can just post the links to download.php in your blog posts or site pages, and all downloads will be correctly tracked.

Download Counter Interface

Step 2 – CSS

With the XHTML markup in place, we can now concentrate on the presentation side of script. The CSS rules below target the file-manager div by id (with the hash symbol), as it is present only once in the page, and the rest of the elements by class names.

styles.css

#file-manager{
	background-color:#EEE;
	border:1px solid #DDD;
	margin:50px auto;
	padding:10px;
	width:400px;
}

ul.manager li{
	background:url("img/bg_gradient.gif") repeat-x center bottom #F5F5F5;
	border:1px solid #DDD;
	border-top-color:#FFF;

	list-style:none;
	position:relative;
}

ul.manager li a{
	display:block;
	padding:8px;
}

ul.manager li a:hover .download-label{
	/* When a list is hovered over, show the download green text inside it: */
	display:block;
}

span.download-label{
	background-color:#64B126;
	border:1px solid #4E9416;
	color:white;
	display:none;
	font-size:10px;
	padding:2px 4px;
	position:absolute;
	right:8px;
	text-decoration:none;
	text-shadow:0 0 1px #315D0D;
	top:6px;

	/* CSS3 Rounded Corners */

	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

span.download-count{
	color:#999;
	font-size:10px;
	padding:3px 5px;
	position:absolute;
	text-decoration:none;
}

The interesting part here is that the download label is hidden by default with display:none. It is shown with display:block only when we are hovering over its parent <a> element, and thus the right label is shown without a need for using JavaScript. A bit of CSS3 is also used as well to round the corners of the download label.

Hover State With CSS

Step 3 – PHP

As mentioned earlier, PHP loops through the files folder, and outputs each file as a li element in the unordered list. Now lets take a closer look at how this happens.

demo.php – Top Section

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// Including the DB connection file:
require 'connect.php';

$extension='';
$files_array = array();

/* Opening the thumbnail directory and looping through all the thumbs: */

$dir_handle = @opendir($directory) or die("There is an error with your file directory!");

while ($file = readdir($dir_handle))
{
	/* Skipping the system files: */
	if($file{0}=='.') continue;

	/* end() returns the last element of the array generated by the explode() function: */
	$extension = strtolower(end(explode('.',$file)));

	/* Skipping the php files: */
	if($extension == 'php') continue;

	$files_array[]=$file;
}

/* Sorting the files alphabetically */
sort($files_array,SORT_STRING);

$file_downloads=array();

$result = mysql_query("SELECT * FROM download_manager");

if(mysql_num_rows($result))
while($row=mysql_fetch_assoc($result))
{
	/* 	The key of the $file_downloads array will be the name of the file,
		and will contain the number of downloads: */

	$file_downloads[$row['filename']]=$row['downloads'];
}

Notice how we are selecting all the rows from the download_manager table with mysql_query(), and later adding them to the $file_downloads array with the filename as a key to the number of downloads. This way, later in the code, we can write $file_downloads['archive.zip'], and output how many times this file has been downloaded.

You can see the code we use to generate the li items below.

demo.php – Mid Section

foreach($files_array as $key=>$val)
{
	echo '<li><a href="download.php?file='.urlencode($val).'">'.$val.'
		<span class="download-count" title="Times Downloaded">'.(int)$file_downloads[$val].'</span> <span class="download-label">download</span></a>
	</li>';
}

It is simple as that – a foreach loop on the $files_array array, and an echo statement which prints all the markup to the page.

Now lets take a closer look at how exactly are the downloads tracked.

download.php

// Error reporting:
error_reporting(E_ALL^E_NOTICE);

// Including the connection file:
require('connect.php');

if(!$_GET['file']) error('Missing parameter!');
if($_GET['file']{0}=='.') error('Wrong file!');

if(file_exists($directory.'/'.$_GET['file']))
{
	/* If the visitor is not a search engine, count the downoad: */
	if(!is_bot())
	mysql_query("	INSERT INTO download_manager SET filename='".mysql_real_escape_string($_GET['file'])."'
					ON DUPLICATE KEY UPDATE downloads=downloads+1");

	header("Location: ".$directory."/".$_GET['file']);
	exit;
}
else error("This file does not exist!");

/* Helper functions: */

function error($str)
{
	die($str);
}

function is_bot()
{
	/* This function will check whether the visitor is a search engine robot */

	$botlist = array("Teoma", "alexa", "froogle", "Gigabot", "inktomi",
	"looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory",
	"Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot",
	"crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp",
	"msnbot", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz",
	"Baiduspider", "Feedfetcher-Google", "TechnoratiSnoop", "Rankivabot",
	"Mediapartners-Google", "Sogou web spider", "WebAlta Crawler","TweetmemeBot",
	"Butterfly","Twitturls","Me.dium","Twiceler");

	foreach($botlist as $bot)
	{
		if(strpos($_SERVER['HTTP_USER_AGENT'],$bot)!==false)
		return true;	// Is a bot
	}

	return false;	// Not a bot
}

It is important to check if, by any chance, the visitor is a search engine robot scanning your links and not a real person. Robots are a good thing, as they get you included in services like Google Search, but in a situation such as this, can skew your download statistics. This is why the database row is updated only after the visitor passes the is_bot() validation.

Step 4 – MySQL

As mentioned in the previous step, the download count is stored as a row in the download_manager table in your MySQL database. First, lets explain how this particular query works:

download.php

INSERT INTO download_manager SET filename='filename.doc'
ON DUPLICATE KEY UPDATE downloads=downloads+1

It tells MySQL to insert a new row in the download_manager table, and set the filename field of the row to the value of the requested file for download. However, the filename field is defined as a unique index in the table. This means that a row can be inserted only once, otherwise a duplicate key error will occur.

This is where the second part of the query kicks in – ON DUPLICATE KEY UPDATE will tell MySQL to increment the downloads column by one if the file already exists in the database.

This way new files will be automatically inserted in the database the first time they are downloaded.

Structure of the download_manager Table

Step 5 – jQuery

To make the download tracking feel almost like real-time, it will be a nice addition to update the counter next to the file name once the user initiates the download. Otherwise they would have to initiate a page refresh so that new stats for the counter are shown.

We will achieve this with a little jQuery trick:

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	$('ul.manager a').click(function(){

		var countSpan = $('.download-count',this);
		countSpan.text( parseInt(countSpan.text())+1);
	});
});

We just assign a click handler to the links that point to the files, and every time one of them is clicked, we increment the number inside of the counter span tag.

Step 6 – htaccess

There is one more thing we need to do, before we call it a day. What download.php does is to  redirect the visitor to the requested file that was passed as a parameter. However you may have noticed that, for certain file types, the default browser behavior is to open them directly. We want to initiate a download instead. This is achieved with a couple of lines inside of a .htacess file, found in the files directory:

<Files *.*>
ForceType application/octet-stream
</Files>

With this our File Download Counter is complete!

Conclusion

To run the demo on your own server, you will need to recreate the download_manager table in a MySQL database you have access to. You can find the needed SQL code that will create the table for you in table.sql, which you can find in the download archive.

After this, just add your login details for the database (as provided by your webhost) to configuration.php.

Related posts

• AJAX-enabled Sticky Notes With PHP and jQuery (0)
• How to Code up a Web Design from PSD to HTML (0)
• How to Build an Unobtrusive Login System in Rails (0)
• Advanced Event Timeline With PHP, CSS and jQuery (0)
• Halftone Navigation Menu With jQuery and CSS3 (0)

Tutorial Details

• Program: A web browser that can utilise CSS3 transistions (Chrome or Safari)
• Language: CSS
• Difficulty: Easy
• Estimated Completion Time: 30 min

Step 1 – Link Transitions

To begin, we’ll work with some basic techniques – firstly a simple change of text color when a user hovers over a specified element.

a { color:#000; }
a:hover { color:#f00; }

Here, we change the text color to red on hover. Now, with a little CSS3, we can create a much smoother look by gradually fading the color.

a{
   color:#000;
   -webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}

We’ve added the css property, -webkit-transition. Note that the -webkit prefix specifies that this will only work in Webkit engines, or Safari and Chrome. Luckily, other modern browsers have their own implementations as well. A full statement covering all browsers might look similar to the following:

a {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}

Please note that, for this tutorial, we’ll be focusing exclusively on the webkit implementation. After the declaration of the property, we have the values “color 1s ease-in.” This is the shorthand declaration; the three values represent:

1. the property to be transitioned
2. the duration of the transition
3. the type of transition

In this case, we transition using ease-in, which will begin the transition slowly, and speed up into the transition.

Step 2. Background Transitions

Another basic use of changing states is to change the background of an input box on focus.

input.ourInputBox:focus{
 -webkit-transition:background-color 0.5s linear;
 background:#CCC;
}

This time, we put the transition declaration into the hover state, so that we aren’t adding additional unnecessary classes to the CSS. We apply the transition once the input box acquires focus.

Step 3 – Transitioning Multiple Properties

CSS transitions are actually relatively straight forward to add to existing hover functionality, and give your
site that extra polish for browsers that support CSS3.

To take things a step further, we can also transition multiple CSS properties using the longhand versions of the CSS3 transition.

a.thebg {
 color:#000;
 background:#f00;
 padding:5px;
 -webkit-border-radius: 5px; 

 -webkit-transition-property:color, background;
 -webkit-transition-duration: 1s, 1s;
 -webkit-transition-timing-function: linear, ease-in;
} 

a.thebg:hover {
 color:#f00;
 background:#000;
}

This time, the background and text color changes on hover, so we can target both of these properties with our transition.
We simply split the transition: first we have -webkit-transition-property and separate the different values with a comma. So we target the color and background properties, respectively.

-webkit-transition-property:color, background;

Then we set the duration of the transition using:

-webkit-transition-duration:1s, 1s;

These are referenced in the same order as the first statement; this time, however, both values are set to 1s.

Lastly, we set the timing function, and set two different values: the first, linear, relates to our first declared variable – color; and the second relates to the variable background.

So, we’ve set the color to a linear change over one second, and the background to ease-in over that same time period.

Step 4 – Putting the Pieces Together

CSS3 transitions start to come into their own when they’re combined with other new CSS properties.

You can review examples of using overlapping elements and transitions on Andy Clarke’s For a Beautiful Web.

Let’s create a simple example of animating a pop out sign.

We first create the bounding box for the signpost, and give it a relative positioning context to ensure that we can
position items absolutely within it.

#signpost{
 width:60px;
 height:196px;
 position:relative;
}

Now we place the box on the page and put the pieces of our sign within it.

<div id="signpost">
	<img id="post" src="post.png">
	<img id="sign" src="sign.png">
</div>

Next, the post is positioned with a z-index of two, to place it on top of the sign.

#post{
 width:79px;
 height:196px;
 z-index:2;
 position:relative;
}

Now, we add in the sign, positioned underneath the post, and rotate it with the CSS3 transform property.

#sign{
 height:46px;
 width:80px;
 position:absolute;
 top:10;
 left:60;
 -webkit-transform-origin:0 0;
 -webkit-transform: rotate(86deg);
 z-index:1;
 -webkit-transition:-webkit-transform 0.5s ease-in-out;
}

The sign is rotated using -webkit-transform: rotate(86deg), and is positioned under the post. To ensure that the sign rotates around the proper point, we must change the transform origin to the top left corner: 0, 0.

We set the transition to change the -webkit-transform property over 0.5s with an ease-in-out profile, and on hover, we rotate the sign back to its original orientation.

#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
}

We do this on the containing #signpost:hover rather than on the hover of the #sign itself.

Step 5 – Introducing Animations

We can now tie all of this together, using webkit animations, which give us the power to carry out things such as continuous rotation.

We begin by creating two circle images, and positioning them inside a containing div – as we did with the signpost above.

<div id="circles">
	<img src="outer.png" width="180" height="180" class="outercircle"/>
	<img src="middle.png" width="90" height="90" class="middlecircle"/>
</div>

#circles{
	width:180px;
	height:180px;
	position:relative;
}
.outercircle{
	width:180px;
	height:180px;
	position:absolute;
	z-index:1;
	top:0:
	left:0;
}
.middlecircle{
	width:90px;
	height:90px;
	position:absolute;
	z-index:3;
	top:45px;
	left:45px;
}

Now we need to define the animations; we’ll spin the circles in opposite directions, so we need to set up two animations.

@-webkit-keyframes spin {
from {
	-webkit-transform: rotate(0deg);
}
to {
	-webkit-transform: rotate(360deg);
	}
}

@-webkit-keyframes spinrev {
from {
	-webkit-transform: rotate(0deg);
	}
to {
	-webkit-transform: rotate(-360deg);
	}
}

The animation is given a name for reference, in this case “spin” and “spinrev.” Then, we assign them a to and from value; so we rotate the image from
0 deg to 360 deg using webkit transform, and to -360 for the reverse.

Now we assign this animation to the hover states. Note that, if we assigned it to the normal state, the animation would run immediately when the page is loaded.

#circles:hover .outercircle {
	-webkit-animation-name: spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s;
}	

#circles:hover .middlecircle{
	-webkit-animation-name: spinrev;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 5s;
}

We reference the animation name we created earlier (-webkit-animation-name: spin;). Then, we declare the number of times we want the animation to run (-webkit-animation-iteration-count: infinite;).
In this case, infinite will keep it going round and round whilst the #circles div is hovered upon.

We next set the timing function (-webkit-animation-timing-function: linear;), and, finally, we set a duration for each iteration – in this case, it will be ten seconds (-webkit-animation-duration: 10s;), and five for a complete revolution.

Step 6 – Graceful Degredation with Modenizr

Once we have everything working, we should consider our users who are browsing without CSS3 capable web browsers. This is easily accomplished using a JavaScript library such as Modernizr, which adds classes to the HTML element relating to the browser capabilities.

Using the sign post example above, browsers that don’t support CSS transforms will not place the sign under the post correctly; so we can target these browsers and simply hide the sign until it is hovered over.

.no-csstransforms #signpost #sign{
	display:none;
}
.no-csstransforms #signpost:hover #sign{
	display:block;
}

It’s as simple as linking to the Modernizr script, finding the appropriate class name, and then creating a separate CSS statement for that instance.

Conclusion

That’s all for now. I hope you enjoyed it! Let me know if you have any questions/comments below!

Related posts

• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Code up a Web Design from PSD to HTML (0)
• Animated Sharing Bar With jQuery and CSS (0)
• A Colorful Clock With CSS and jQuery (0)
• How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout (0)

$("#age-form").submit(function(){ var day = $("#day").val(); var month = $("#month").val(); var year = $("#year").val(); var age = 18; var mydate = new Date(); mydate.setFullYear(year, month-1, day); var currdate = new Date(); currdate.setFullYear(currdate.getFullYear() - age); if ((currdate - mydate) < 0){ alert("Sorry, only persons over the age of " + age + " may enter this site"); return false; } return true;
});

You may wish to do something more elegant than an alert, and should also probably validate the form with server side code or else this protection only works for users with JavaScript enabled.

Related posts

• AJAX-enabled Sticky Notes With PHP and jQuery (0)
• PHP and MySQL File Download Counter (0)
• jQuery AJAX Validation Contact Form with Modal + Slide-in Transition (0)
• How to Code up a Web Design from PSD to HTML (0)
• How to Build an Unobtrusive Login System in Rails (0)