Xguiden » css3

Awesome CSS+JS form styling

admin — Wed, 10 Mar 2010 10:14:37 +0000

Sexy CSS+JS Form

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!

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:

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!

Tags: AJAX, attribute, auto login, code, content, CSS, css3, design, element, function, GET, input type text, Java, JavaScript, javascript library, jquery, js, login, open source project, scenarios, script, Transparent, tutorial, webkit

Making a Mosaic Slideshow With jQuery and CSS

admin — Wed, 10 Mar 2010 10:11:30 +0000

When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you need to present them with something they have not seen before.

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

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
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 = $('').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', {
					"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('');
	}

	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?


	Tags: code, content, CSS, css styles, css3, design, element, function, HTML, image, JavaScript, jquery, mosaic effect, mosaic gallery, mosaic slideshow, script, slide image, slide style, transition effect, tutorial


	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)

Design and Code a Cool iPhone App Website in HTML5

DiscoTK — Mon, 08 Mar 2010 11:41:59 +0000

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

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




	PKE METER app for iPhone

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


	
	Track ghosts,
 on your iPhone

Now the new HTML5 elements will come into play. The

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


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

	Features:
	
		Study paranormal activity.
		Track sources of psycho-kinetic energy.
		Measure supernatural energy readings.

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.

in HTML5 is pretty similar to a

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

element in our design, so it would work well as an aside.


	Available on the iPhone app store

	© Paranormal Lab of Columbia University.
	Use of PKE METER for long periods may result in brain cell mutation.

The

element is another handy structural HTML tag that replaces the old

method with something more descriptive. Within the footer I’ve used tags to surround the copyright and disclaimer. The 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.)




	PKE METER app for iPhone
	



	
		
			
			Track ghosts,
 on your iPhone
		

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

			Features:
			
				Study paranormal activity.
				Track sources of psycho-kinetic energy.
				Measure supernatural energy readings.
			
		

		
			
		

		
			Available on the iPhone app store

			© Paranormal Lab of Columbia University.
			Use of PKE METER for long periods may result in brain cell mutation.

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

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

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

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.

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 . 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

Tags: avi, Chrome, Community, Cool, CSS, css3, design, DOCTYPE, fil, FireFox, fix, GET, Glow, Header, help, HTML, html5, image, images, internet, Internet Explorer, IP, Java, JavaScript, LP, Mod, Mount, Outline, Over, Photoshop, png, porte, script, Source, Start, tag, tags, text, textur, tutorial, URL

Design a Prettier Web Form with CSS 3

admin — Wed, 03 Mar 2010 22:04:26 +0000

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!

Our Final Product

Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is done without any images at all.

By following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.

CSS3?

CSS3 is the next generation of CSS that is currently under development, but that doesn’t stop browsers from already implementing most of the prominent features.

Full browser support:

Opera have support for CSS3 (except background gradients) in their next version (10.50 Beta).

Internet Explorer will have full CSS3 support with version 9.

The things you can do with CSS3 (shadows, gradients, round corners, animations, etc) all serve a purpose of creating beautiful effects without having to integrate images or scripts, resulting in quicker loading times.

Step 1: The HTML

Before we begin styling we need something to style, so here is the form.



	
		
		Name
	

	
		
		E-mail
	

	
		
		Website

Each field is inside a paragraph with its own class, and the three first fields have a label explaining their use.

How does it look without any styling?

Name

E-mail

Website

Functional, but dull. Let’s start pimping out this form.

Step 2: Basic Styling

Before we dive into the CSS3 techniques we need to create a basic layout for browsers that don’t yet support CSS3.

input, textarea {
	padding: 9px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF;
	}

textarea {
	width: 400px;
	max-width: 400px;
	height: 150px;
	line-height: 150%;
	}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border-color: #C9C9C9;
	}

.form label {
	margin-left: 10px;
	color: #999999;
	}

.submit input {
	width: auto;
	padding: 9px 15px;
	background: #617798;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	}

How does our effort look so far?

Not too bad. Now, let’s begin our enhancements with the more advanced CSS3.

Step 3: Box-shadow

Box-shadow does exactly what it sounds like: creates a shadow around a box.

The syntax for box-shadow is fairly simple:

box-shadow:    ;

Horizontal offset is the placement of the shadow from left to right. If you set it to “2px” the shadow will be 2 pixels to the right. Vertical offset is the same but up/down.

Blur is simply the amount of blur the shadow will have, where 0 is minimum.

This is how our box-shadow will look like:

input, textarea {
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}

Here we have three lines that look similar.

box-shadow is pure CSS3 and so far only used in Opera.
-webkit-box-shadow is for browsers using the Webkit engine, like Chrome and Safari.
-moz-box-shadow is for browsers using Mozilla’s Gecko engine, like Firefox, Camino, Flock, and SeaMonkey.

Until CSS3 becomes the standard, you have to use all three methods. Internet Explorer has their own weird way of doing things, and although it’s capable of making a shadow it will not look the way we want it. 3

You might notice that there was no normal RGB color used, this is because we’re using two CSS3 techniques on the same line: box-shadow and rgba.

RGBA (Red Green Blue Alpha) is, simply put, color with opacity.

The syntax for rgba is this:

rgba(,,,);

It’s perfectly fine to use a light grey for the shadow’s color, but if you are using any other background than white it will look strange. An opaque black on the other hand will work well no matter what background.

So our box-shadow is black with 10% (0.1) opacity, no horizontal and vertical offset, and with a blur of 8 pixels. It will look like this:

The keyword here is subtlety. If we apply too much shadow, it will look ugly; if we apply too little, it won’t have an effect. Basically, we don’t want anyone to notice the shadow, but still have it lift the fields from the page.

Step 4: Background Gradient

While the box-shadow syntax is easy to grasp, gradients are trickier. With CSS3 gradients, you can create some amazing shapes — from dart boards to rainbows — so as you can imagine it has a more complex syntax. Thankfully, we don’t need to code a rainbow today; we just need a straight linear gradient.

Syntax for Webkit:

-webkit-gradient( linear, , , from(), to() )

Syntax for Gecko:

-moz-linear-gradient( , , )

As you can see, the methods are quite different, so this will require some explaining.

Webkit gradients require a start point (X and Y), an end point (X and Y), a from-color, and a to-color. The angle is determined by where start and end are, and the gradient will be colored with the “from(color)” fading to “to(color)”.

Gecko gradients, on the other hand, require only a start point (Y), and at least two colors. If you want a gradient going from top to bottom (90deg) you don’t need to assign an angle.

So to get a simple linear gradient from top to bottom – black to white – we would do like this:

background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF);

And it would appear like this:

(I will continue to use the black color for demonstration; at the end, I’ll switch to the real color we will be using for the form.)

Now that we have the basics out of the way, we can start making the form look how we want. The first thing we want to do is limit the height of the gradient so that it looks the same for both input fields and textarea; otherwise the gradient would fill the entire height, like this:

This is how we limit the background gradient to 25px in Webkit and Firefox:

input, textarea {
	background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF));
	background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
	}

For Webkit, instead of setting the end point to “left bottom,” we set it to “left 25″, indicating it will end 25 pixels from the top.

For Gecko, we do the same thing by simply adding a “25px” value to the end color.

And the result is:

The second thing we want to do is create a thin white line at the top of the gradient, to give the subtle visual impression that the field is raised. How important can a single pixel be? Take a look at this article: Adding Depth with Pixel Perfect Line Work.

To create this, we’ll need three points in the gradient. In the previous example, our gradient had two points: top and bottom (black→white). Here, we’ll add an additional point in between them (white→black→white).

To illustrate:

How do we do this?

input, textarea {
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px);
	}

In Webkit we use the color-stop function, but unfortunately it doesn’t support values in pixels, only percentage. But thanks to paying attention to math in school we figure that 4% of 25px is 1px.

For Gecko, we simply add a third color between the first two and give it a “1px” value, indicating that it should end 1 pixel from the top.

The thin white line:

Now, let’s change the black color (#000000) to a more fitting light grey (#EEEEEE):

Just some small detail work remains.

First, we’ll create a darker shadow for the fields when the user hovers or selects it:

input:hover, textarea:hover,
input:focus, textarea:focus {
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}

It’s just an increase from 10% to 15%, but what we are after is, once again, subtlety.

The last thing we do is create some rounded corners for the button3 to further make it stand out from the other elements:

.submit input {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}

The value is the radius the corners will be rounded by. The standard border-radius is intentionally left out since Opera seems to have some problem with it.

Result:

Step 5: The Other Browsers

Now we just need to take care of the browsers that don’t support CSS3 yet (IE), or only partly does (Opera).

We want the different versions (CSS3 and the normal) to look as similar as possible, and the simplest thing is to go back to the old way: images.

Simply take a screenshot of the beautiful CSS3 form and save a small portion of the gradient as an image.

Next, use it in the input and textarea as a background. As long as the CSS3 gradients comes after the background image, browsers that support CSS3 will ignore the image.

input, textarea {
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	}

And now we are done! Enjoy your form and I hope you have learned something.

Final Preview

Chrome (4.0), Firefox (3.6), Safari (4.0):

Opera (10.50b):

Internet Explorer (8):

Full CSS

input, textarea {
	padding: 9px;
	border: solid 1px #E5E5E5;
	outline: 0;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	}

textarea {
	width: 400px;
	max-width: 400px;
	height: 150px;
	line-height: 150%;
	}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border-color: #C9C9C9;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	}

.form label {
	margin-left: 10px;
	color: #999999;
	}

.submit input {
	width: auto;
	padding: 9px 15px;
	background: #617798;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	}

Conclusion

That’s all there is to it! With minimal effort, and the power of CSS 3, we’ve turned a bland and ordinary form into something beautiful. Thanks so much for reading, and feel free to ask any questions that you might have below.

Tags: animation, avi, CD, Chrome, CSS, css3, design, fil, FireFox, GET, Gradient, guide, HTML, image, images, input, internet, Internet Explorer, IP, LP, max, Mount, Outline, Over, Photoshop, png, script, standard, Start, switch, tag, text, tutorial, URL

How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout

admin — Wed, 03 Mar 2010 21:54:01 +0000

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.







HTML5 and CSS3 Layout

One of the most notable differences is the addition of the new doctype, , 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

and

. 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.

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

and tags.

Header

Lets work on the header. We’re going to be using the

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

tag, and we’ll just be using a

for the logo. So the skeleton of the

element is going to look a bit like this:


	
		...
	
	
		...

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.

and

), we can use the tag. The definition for the 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:


	Webtint
	Web Development Blog

‘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.

Inside the

we’ll just use an unordered list.

		
			home
			tutorials
			resources
			articles
			forums
			contact

The Content

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


	
		
			
				 ...
				 ... 
			
			 ... 
			 ... 
			


		
	
	
		...

New tags that you’ve probably noticed include the

and

tags. There’s also an

tag nested inside the section, and a

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

is going to encompass the articles titles and their summaries,

seems like a suitable tag to use here.

The

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

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

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.

The Title
Posted by Johnny on February 28th

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.
Comment on this (5) • Tweet this • Stumble Upon

The Title
Posted by Johnny on February 28th

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.


	
		Copyright Webtint © 2010

The final HTML code looks a bit like this:

HTML5 and CSS3 Layout

home
tutorials
resources
articles
forums
contact

The Title
Posted by Johnny on February 28th

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.

Tags: avi, Chrome, counter, CSS, css3, design, DOCTYPE, fil, FireFox, fix, GET, Header, HTML, html5, image, images, internet, Internet Explorer, IP, Java, JavaScript, META, Mod, Over, porte, POST, reference, script, Source, switch, table, tag, tags, text, Transparent, tutorial, URL, Wanted

PHP and MySQL File Download Counter

admin — Thu, 25 Feb 2010 17:06:21 +0000

It has been a while since we’ve done a proper PHP & MySQL tutorial here, So today we are creating a simple, yet robust, file download tracker.

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



	

		
		photoShoot-1.0.zip
			0 download

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 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 ''.$val.'
		'.(int)$file_downloads[$val].' download
	';
}

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:


ForceType application/octet-stream

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.

Tags: avi, counter, CSS, css3, database, fil, GET, Gradient, Header, help, HTML, image, IP, Java, JavaScript, login, LP, MYSQL, Over, php, png, POST, script, Server, system, table, tag, text, tutorial, URL, valid

CSS Fundamentals: CSS 3 Transitions

admin — Thu, 25 Feb 2010 17:05:14 +0000

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

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:

the property to be transitioned
the duration of the transition
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.

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.

#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!

Tags: animation, CD, Chrome, CSS, css3, dvd, fil, fix, GET, HTML, image, images, input, IP, Java, JavaScript, Mod, Over, png, POST, reference, script, Start, text, tutorial

Coding a CSS3 & HTML5 One-Page Website Template

admin — Thu, 18 Feb 2010 11:20:18 +0000

Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder – this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years.

But changes do not come from nowhere. The early adopters are already using what we are going to use day-to-day a few years from now. One of these technologies is HTML5 – the new version of the fundamental language of the web.

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

Step 1 – The Design

Every design process starts with an initial idea which you later build upon. At this stage designers usually go with programs such as Photoshop to work on the details and see how it will all look.

Photoshop Design

After this, the design is hand coded with HTML and CSS going hand by hand, moving from designing the background, colors and fonts, to detail work on the content section.

Step 2 – HTML

It is a good time to note, that HTML5 is still a work in progress. It will remain so probably till around 2022 (I am absolutely serious about this). However some parts of the standard are complete, and can be used today.

In this tutorial, we are using a few of the tags introduced with this new version of HTML:

header – wraps your page header;
footer – wraps your page footer;
section – groups content into sections (e.g. main area, sidebar etc);
article – separates the individual articles from the rest of the page;
nav – contains your navigation menu;
figure – usually contains an image used as an illustration for your article.

These are used exactly as you would use normal divs. With the difference being that these tags organizes your page semantically. In other words, you can present your content in such a way, that the subject matter of your page can be more easily determined. As a result services, such as search engines, will bring you more targeted visitors and thus boost your revenue (and theirs actually).

However, there are some implications in using HTML5 today. One of the most notable is the IE family of browsers, which does not support these tags (it can be fixed with a simple JavaScript include file though). This is why you should base your decision for moving to HTML5 on your site’s audience. And just for this purpose, we are releasing a pure XHTML version of this template as well.

template.html – Head section

 




	

	Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo

You can notice the new at line one, which tells the browser that the page is created with the HTML5 standard. It is also much shorter and easier to remember than older doctypes.

After specifying the encoding of the document and the title, we move on to including a special JS file that will enable Internet Explorer (any version) to render HTML5 tags properly. Again, this means that if a visitor is using IE and has JavaScript disabled, the page is going to show up all messed up. This is why, depending on your audience, you should consider the regular XHTML version of this template, which works in any browser and is released free for all our readers here.

template.html – Body Section



	 

	 

		Your Logo

		and a fancy slogan

		 

			

				Photoshoot
				Sweet Tabs
				Navigation Menu

Here we use the new section tags, which divide your page into separate semantic sections. Outermost is the #page section which is set to a width of 960px in the style sheet (a fairly standard width with older computer displays in mind). After this comes the header tag and the navigation tag.

Notice the href attributes of the links – the part after the hash symbol # corresponds to the ID of the article we want to scroll to.

template.html – Article

	

	
  

	 

		Photoshoot Effect

		

		

			 

				
					

			

			In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.

			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis ....

The markup above is shared between all of the articles. First is the dividing line (the best solution semantically would be an

line, which in HTML5 has the added role of a logical diving element, but unfortunately it is impossible to style in a cross-browser fashion, so we will stick with a DIV). After this we have the new article tag, with a unique ID, which is used by the navigation to scroll the page.

Inside we have the title of the article, two paragraphs and the new figure tag, which marks the use of images in the article.

template.html – Footer

		 

			

			Copyright 2010 - YourSite.com
 
			Go UP
			Template by Tutorialzine

Lastly, we have the footer tag, which does exactly what you expect it to do. At the bottom of the page are the rest of the JavaScript includes, which add the jQuery library and the scrollTo plug-in, which we are going to use in the next steps.

An HTML5 & CSS3 Website Template

Step 3 – CSS

As we are using HTML5, we have to take some extra measures with the styling. The tags that this new version of HTML introduces, are not yet provided with a default styling. This is however easily fixed with a couple of lines of CSS code and the page works and looks as it is supposed to:

styles.css – Part 1

header,footer,
article,section,
hgroup,nav,
figure{
	/* Giving a display value to the HTML5 rendered elements: */
	display:block;
}

article .line{
	/* The dividing line inside of the article is darker: */
	background-color:#15242a;
	border-bottom-color:#204656;
	margin:1.3em 0;
}

footer .line{
	margin:2em 0;
}

nav{
	background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
	padding:0 5px;
	position:absolute;
	right:0;
	top:4em;

	border:1px solid #FCFCFC;

	-moz-box-shadow:0 1px 1px #333333;
	-webkit-box-shadow:0 1px 1px #333333;
	box-shadow:0 1px 1px #333333;
}

nav ul li{
	display:inline;
}

nav ul li a,
nav ul li a:visited{
	color:#565656;
	display:block;
	float:left;
	font-size:1.25em;
	font-weight:bold;
	margin:5px 2px;
	padding:7px 10px 4px;
	text-shadow:0 1px 1px white;
	text-transform:uppercase;
}

nav ul li a:hover{
	text-decoration:none;
	background-color:#f0f0f0;
}

nav, article, nav ul li a,figure{
	/* Applying CSS3 rounded corners: */
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

We basically need to set the display value of the new tags to block, as you can see from the first couple of lines. After this we can style them as we would with regular divs.

We style the horizontal lines, the articles and the navigation buttons, with the latter organized as an unordered list inside of the nav tag. At the bottom we assign the border-radius property for four different types of elements of once, which saves a lot of code.

styles.css – Part 2

/* Article styles: */

#page{
	width:960px;
	margin:0 auto;
	position:relative;
}

article{
	background-color:#213E4A;
	margin:3em 0;
	padding:20px;

	text-shadow:0 2px 0 black;
}

figure{
	border:3px solid #142830;
	float:right;
	height:300px;
	margin-left:15px;
	overflow:hidden;
	width:500px;
}

figure:hover{
	-moz-box-shadow:0 0 2px #4D7788;
	-webkit-box-shadow:0 0 2px #4D7788;
	box-shadow:0 0 2px #4D7788;
}

figure img{
	margin-left:-60px;
}

/* Footer styling: */

footer{
	margin-bottom:30px;
	text-align:center;
	font-size:0.825em;
}

footer p{
	margin-bottom:-2.5em;
	position:relative;
}

footer a,footer a:visited{
	color:#cccccc;
	background-color:#213e4a;
	display:block;
	padding:2px 4px;
	z-index:100;
	position:relative;
}

footer a:hover{
	text-decoration:none;
	background-color:#142830;
}

footer a.by{
	float:left;

}

footer a.up{
	float:right;
}

In the second part we apply more detailed styling to the elements. A width for the page section, a hover property for the figure tag and styles for the links inside of the footer. There are also a few styles that are not included here, but you can see them in styles.css.

Now lets continue with the next step.

Structure Of The Page – HTML5 Tags

Step 4 – jQuery

To enhance the template, we will create a smooth scrolling effect once a navigation link has been clicked using the scrollTo jQuery plug-in we included in the page earlier. To make it work we just need to loop through the links in the navigation bar (and the UP link in the footer) and assign an onclick event which will trigger the $.srollTo() function.

script.js

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

	$('nav a,footer a.up').click(function(e){

		// If a link has been clicked, scroll the page to the link's hash target:

		$.scrollTo( this.hash || 0, 1500);
		e.preventDefault();
	});

});

With this our template is complete!

Wrapping it up

In this tutorial we leveraged the new semantic features provided by HTML5 to design and code a one-page web template. You can use it for free both personally and commercially, providing you leave the back link intact.

Tags: AJAX, avi, CSS, css3, design, DOCTYPE, fil, fix, GET, Gradient, Header, HTML, html5, image, images, internet, Internet Explorer, IP, Java, JavaScript, META, Over, Photoshop, png, script, standard, Start, table, tag, tags, text, tutorial, URL

Future of CSS: The Flexible Box Model

admin — Thu, 18 Feb 2010 11:18:30 +0000

Support

As always with this new fangled CSS, support is pretty thin on the ground. Here’s a list of the properties and how they’re supported, in no particular order.

	Gecko Firefox	Webkit Chrome/Safari	Trident Internet Explorer	Presto Opera
box-flex	Yes*	Yes^✝	No	No
box-direction	Yes*	Yes^✝	No	No
box-align	Yes*	Yes^✝	No	No
box-flex-group	Yes*	Yes^✝	No	No
box-lines	Yes*	Yes^✝	No	No
box-ordinal-group	Yes*	Yes^✝	No	No
box-orient	Yes*	Yes^✝	No	No
box-pack	Yes*	Yes^✝	No	No

* Only Supported with the prefix -moz (i.e. -moz-box-pack ^✝ Only Supported with the prefix -webkit (i.e. -webkit-box-pack)

‘course, as you’ve probably realised it wouldn’t have mattered what order they were in anyway, since only Firefox and Chrome/Safari support the flexible box model at this point. This is a bit troublesome, since we can’t go ahead and use this in all our projects because it’s not supported by Internet Explorer (>60% of market) or Opera (about 2%). In the future though this is really gonna improve how we make websites (when it’s supported by everyone).

In fact the way that Gecko and Webkit support the box model is completely different, so I’ve tried to give you as much solid information as I can from observations on both platforms.

How it Works

Nowadays websites are often split into many columns, to accomplish a sort of newspaper-esque layout. Of course, we can accomplish this with the float property in CSS2, but CSS2 really wasn’t designed with an easy way to make columns. Traditionally web designers would design columnar layouts like this:

#left-column {
      float: left;
}

#right-column {
      float: left;
}

Initiating your Box

With the flexible box model things are a little different, but different in a good way. Words can’t describe how wonderful I think this specification is, so I’ll use code instead. Here’s a piece of code that I want to columnize, so to say.


	
		This is some content.
	
	
		Only there are four columns!
	
	
		Four columns!
	
	
		Amazing.

And here’s the CSS:

.container {
        width: 1000px;

	display: -webkit-box;
	display: -moz-box;

	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;

}

.blue {
	background: #357c96;
	font-weight: bold;
	margin: 2px;
	padding: 20px;
	color: #fff;
	font-family: Arial, sans-serif;
}

It’s as easy as that! (It’ll be even easier when we don’t have to do browser specific elements). You can totally ignore the .blue class, that’s just some styling. The container class sets the display mode to box, and sets box-orient to horizontal. This gives you something like this:

You can also set the box orient to vertical if you wish for vertically stacked divs.

Box Flex

As you probably have already figured out, the actual structure of these elements looks like this:

As you can see there’s a bit of a gap at the end of the 4th column element. This is where the box model is so useful. Whereas before you would have to juggle around with pixels until you finally got a good combination where the columns filled the space. With the flexible box model you can stretch out certain elements to fill the space.

.flexible {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
}

If we were to add this flexible class to the 3rd column element, you would end up with this:

The remaining space is divided amongst the elements by their box-flex. Since there is only one box-flex element, all the extra space is given to the element with a box-flex of 1. If you had 2 box-flex elements with a value of 1, the space would be distributed evenly between these two.

For instance, lets say you gave the first 2 column elements in our example the ‘flexible’ class. Both elements would have a box-flex value of 1, so you would end up with something like this:

If you’re more mathematically minded you can think of it as if the two columns are in a 1:1 ratio, so the space is spread out in a 1:1 ratio.

So, for example, if there was 400px of extra space, each element would get an extra 200px. Similarly if one of the box-flex properties were 3, the two elements would be in a 3:1, so one box would get 300px extra, while the other would gain 100px. This allows you to easily expand your boxes to your needs.

Orientation

Orientation i another key element to the flexible box model. Lets take a look at our earlier example. We could reverse the order (so it would be going 4, 3, 2, 1 instead of 1, 2, 3, 4) by adding this to our container element:

        -moz-box-direction: reverse;
        -webkit-box-direction: reverse;

You can use the box-ordinal-group element to alter the position of columns too. Simply put, the element with the highest box-ordinal-group will be moved to the end. If you have set box-direction to reverse, the end will be the left hand side, otherwise the right hand side will be the end. An example of a box ordinal group may be as follows:

        -moz-box-ordinal-group: 2;
        -webkit-box-ordinal-group: 2;

Alignment

Aligning boxes is pretty easy to do. There are two properties you want to watch out for. box-align and box-pack.

If you have your boxes orientation set to horizontal, then box-align will decide how that element is aligned vertically inside your box. Similarly if it’s set to vertical, it will decide how its aligned horizontally. The box-pack element is the complete opposite, applying to horizontal when your box is orientated horizontally, and vertical when your box is orientated vertically. Using both you can center your box elements in any way you want when there’s some extra space left over.

A Recap

Here are all the elements again, their default properties and the properties you can apply to them.

	Default	Possible Values
box-flex	0.0	number
box-direction	normal	normal \| reverse \| inherit
box-align	stretch	start \| end \| center \| baseline \| stretch
box-flex-group	1	integer
box-lines	single	single \| multiple
box-ordinal-group	1	integer
box-orient	inline-axis	horizontal \| vertical \| inline-axis* \| block-axis* \| inherit
box-pack	start	start \| end \| center \| justify

*inline-axis and *block-axis are equivalent to horizontal and vertical respectively.

And here’s a quick reference table so you can see what each element does.

	Function
box-flex	Allows the boxes children to “flex out” and expand into the space left over at the end. Can be put into a ratio by giving one element a box-flex of 2, and another a box-flex of 1, giving them a 2:1 ratio
box-direction	The direction the boxes children should go in. Normal or revere.
box-align	Set how the boxes children are aligned in the box. If the orientation i horizontal it will decide the alignment vertically and vice-versa
box-flex-group	Assign a group to flexible elements
box-lines	Normally the column will continue on forever in the orientation you chose. If you set box-lines to multiple, the columns will go onto a new line whenever it runs out of space in the parent box.
box-ordinal-group	Determines how the boxes children are ordered. A smaller box-ordinal-group will go to the beginning of the box, while a bigger one will go to the end. The start is the left if the direction is normal, and vice versa if it’s reverse.
box-orient	How the boxes children should be aligned. Horizontal to stack them horizontally, and vertical to stack them vertically.
box-pack	Sets the alignment of the box along the box-orient axis, so if box-orient is horizontal it will chose how the boxes children are aligned horizontally, and vice versa.

Where do I go from here?

Tags: Chrome, CSS, css3, design, fil, FireFox, fix, GET, internet, Internet Explorer, IP, Mod, Over, porte, reference, Start, table

How to Code up a Web Design from PSD to HTML

admin — Mon, 15 Feb 2010 11:03:56 +0000

A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.

To refresh your memory

Cast your mind back and you’ll remember we left off at the end of the post titled Create a Gnarly Snowboarding Themed Web Design with a finished PSD sporting a textured background, large feature area and a mix of text, images and video making up the main content area.

Cutting up the PSD concept

With our design being pretty design heavy, there’s a good selection of elements that will need exporting from the PSD. The first is the large textured background.

Disable all other layers then draw a large marquee across the design that includes all the textured elements and blue gradient. Press CMD+Shift+C to copy this selection, then paste in into a new document.

To take into consideration larger monitors, we need to make sure our design is wide enough not to be cropped off. A width of 2200px should be more than sufficient to accommodate even the larger of monitor setups. Select a portion of the gradient and press CMD-T to transform and stretch the background to fill the white space. Save this large image for the web, but take care to balance between file size and quality. With the image being super-sized, it’s important to carefully select the appropriate compression settings. My final file weighs in at 220kb, which is pretty heavy in normal circumstances, but considering that the rest of the design is quite lightweight, it’s a sacrifice that can be justified. We could have made things much easier for ourselves by not including a gradient as well as a texture, this way we could set a smaller graphic in the center that fades out to a flat colour. (Or wait until the multiple backgrounds CSS3 property is more widely supported!)

Continue selecting individual page elements with the marquee tool, pressing CMD-Shift-C to copy-merged then paste in a new document and export. Elements such as the logo, feature graphics, profile shots and every small icon needs saving as an individual graphic.

Remember to choose the most appropriate file type and compression setting for each item. An element that is made up of flat colours will be more suited to PNG format. Elements that require a transparent background can be exported using the PNG-24 option.

Once all of the images have been saved, you’re ready to move onto the HTML section of the website build.

Building the HTML structure

It’s always important to build the house before decorating the rooms, so we’ll begin by writing out the HTML structure of the website. We’ll base the HTML on the XHTML Strict Doctype and add the initial link to the stylesheet and a containing div to hold the content.





Snow Candy

The header

The structure for the header is pretty simple. We have our logo, which is set in a H1 and links back to the homepage. Our navigation is perfect for an unordered list, and each contains an anchor to the relevant page. A class of active will then allow us to target an individual page for highlighting the active page.


	Snow Candy
	
		Home
		Apparel
		Team
		Shop

The content

Next we flesh out the bulk of the page content. The whole main area can be contained within a div with an ID of content. Within this we’ll start with the large feature graphics, an unordered list will once again be a handy element to use, as it allows us to easily list them out in sequence. Inside each list element is each image graphic, complete with a descriptive alt attribute.

The design then splits into two columns, so we can add a div with a class of column ready for floating with CSS later. Within the featured video section I’ve embedded a cool snowboarding video from Vimeo, followed by the title and description, both set in natural header and paragraph tags. A paragraph tag with a class of “btn” will allow us to set up a global style for any button style objects, allowing some unique styling to be added. The actual Vimeo embedding code has been modified slightly to keep it valid within our Strict doctype.


	Featured Video
	
		
			
			
			
		
	

	Snow Candy in Sälen
	The Snow Candy team head to Sälen to experience the local snow, attractions and lifestyle.
	See more videos

In the second column, the list of events has a layout that lends itself well to being rendered as a definition list, with the date and event description being relative to each other. The date can be set as the definition title, and the definition description as the content, which will help us target these tags to style up the fancy layout we’ve got going on. With the dates being laid out vertically at different type sizes, adding a span around the month will help provide that extra hook needed for the CSS styling.


	Upcoming Events
	
		5 Feb
		
			5th Annual BigAir Jam
			Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.
		

		3 Mar
		
			Salomon Shred Round 1
			Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.
		
	
	See more events

The last portion of content is the list of team members. Again, this list of objects is tailored nicely to be written as an unordered list element. Within each list element is an anchor link that will head off to the relevant page. Each anchor also has a class to help identify each team member when styling them up.

Meet the Team


	Joe
	Charlie
	Lars
	Marco

The footer

The HTML is then closed out with the footer, containing a simple back-to-top link, and the body and HTML tags closed to finish off the document. A quick validation ensures there’s no errors, meaning it’s time to move onto some CSS styling.

	
		Back to top

Styling the CSS

The first line of CSS that’s written is to quickly reset any browser specific styling. Ensuring that we’re starting from a clean slate when it comes to margins, padding and borders. Next, the sans-serif font-family is set on the body tag, to render the Helvetica font throughout the design. A line-height of 24px will help us stick to our 24px baseline grid from the design, and will help fix any differences between browsers.

The main background of the site is then added. First the flat blue colour is specified, then the large textured background. This is positioned at the top center, and told not to repeat. Unlike inline images, background images don’t create scrollbars if they are larger than the content window, so despite our graphic being a huge 2200 pixels wide, a portion of the edges will be hidden according to how large the viewer’s monitor is.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #b9d2f8 url(images/body-bg.jpg) center top no-repeat;
}

The header

Next up for styling is the main container div, which is simply given a 980px width and set to appear centrally. This is followed by the header and its sub-elements. The header div is given some padding to create the spacing at the top and sides according to the PSD concept, and is given an overflow:hidden property to clear itself and correctly calculate its height after the floated navigation elements.

The header one tag is given specific dimensions in order to properly display the logo as a background image, and a negative text-indent shifts the standard header text out of the way off-screen. The navigation is then floated alongside it, with a little margin to help align the elements. Each anchor inside the list items is styled to give the appropriate appearance according to the PSD concept, which includes setting the font-size and gaps between each element. They are then finished off with the addition of the transparent brush stroke graphic as a background image for links that have the active class, or are being hovered by the mouse.

#container {
	width: 980px; margin: 0 auto;
}

#header {
	padding: 48px 16px 0 16px; overflow: hidden;
}
	#header h1 a {
		display: block; width: 221px; height: 107px; float: left;
		background: url(images/logo.jpg); text-indent: -9999px;
	}

	#header ul#nav {
		width: 720px; float: right; margin: 42px 0 0 0;
	}
		#header ul#nav li {
			float: left; list-style: none;
		}
			#header ul#nav li a {
				display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0;
				font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
				text-shadow: 0 3px 3px #333;
			}
				#header ul#nav li a:hover, #header ul#nav li a.active {
					background: url(images/active-nav.png);
				}

General content styling

The main central content area can then be styled to mimic the original PSD concept. First it’s given a specific width, with padding to push the content away from the edges. It’s set to overflow:hidden because it will contain some floated elements, and is given a transparent-white background PNG to create the translucent effect. Other options to create the white transparency could have been the opacity property, or the CSS3 RGBa property, but a good old PNG-24 graphic is the most cross-browser friendly, with just IE6 requiring extra work to enable the alpha transparency.

To finish off the content area, a small radius is added to the corners using the border-radius property. Because this isn’t fully supported yet, browser specific code can tell individual browsers to add the novelty effect.

#content {
	width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;
	background: url(images/white-trans.png);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Styling the feature section

The large features section in the design currently holds three slides, but the aim is to only display one at a time. When Javascript is added, these can be tweaked to transitionally fade between each one, but we also need the section to work without Javascript being enabled. To do this, the features section is given the specific dimensions of one slide. The overflow:scroll property will then add scrollbars to allow the user to manually navigation between slides. The UL is given a width of 2820px (3x the width of the slides), and they’re floated side by side. Without limiting the features container to a specific size, the slides would simply fill up the whole page, which ruins the usability of the site. This way, the user can experience the features slideshow, albeit in a much more low-tech way.

#content #features {
	width: 940px; height: 457px; margin: 0 0 48px 0;
	overflow: scroll; /* Changed to hidden if javascript enabled */
}
	#content #features ul {
		width: 2820px;
	}

	#content #features ul li {
		float: left;
	}

Styling the columns and their content

Remember those two columns we wrote out in the HTML? They need floating side by side, so a width is calculated that will fit inside the content div, and the float:left property added. Inside these columns the video and upcoming events sections are styled. The video div simply has an image background to style up the embedded video, and some padding quickly aligns everything up. The definition list for the events section requires some extra CSS to manipulate the basic definition list element into the fancy layout we have planned. The date of each event is contained within the definition title, so that can be floated to the side and set to a large font-size. The extra span we added then comes in handy to render the month text at a smaller font-size, and as a block element so that it drops down below the number.

The definition description and its header h4 tags can then be given the appropriate typographic treatment once the DD is floated alongside the DT. With all styling complete it matches the original concept perfectly.

#content .column {
	width: 409px; float: left; padding: 0 30px 0 30px; margin: 0 0 24px 0;
}
	#content .column .video {
		width: 387px; height: 222px; padding: 13px 0 0 17px; margin: 0 0 24px 0;
		background: url(images/video-bg.jpg) no-repeat;
	}

	#content .column dl dt {
		width: 55px; float: left; padding: 10px 0 0 0;  overflow: auto;
		color: #fff; font-size: 64px; line-height: 34px;
	}
		#content .column dl dt span {
			font-size: 16px; text-transform: uppercase; display: block;;
		}
		#content .column dl dd {
			float: left; width: 354px;
		}

		#content .column dl h4 {
			font-size: 32px; font-weight: normal; color: #fff; margin: 0 0 5px 0;
		}

Styling the team list

The last part of the content styling is to flesh out the list of team members. Earlier each team member photo was exported, so these can now be set to each individual anchor tag. Each list item is set to float left, and is given the appropriate margin to space them out across the page. Anchor elements are by default inline elements, so to allow a specific width and height to be set, they need to be converted to display:block. Each individual team member can then be targeted through the class names on each anchor, with each photo graphic and image dimensions being added as a background.

#content ul#team {
	list-style: none; overflow: hidden;
}
	#content ul#team li {
		float: left; margin: 0 0 0 27px;
	}
		#content ul#team li a {
			display: block; text-indent: -9999px;
		}
			#content ul#team li a.joe {
				width: 199px; height: 229px;
				background: url(images/joe.jpg);
			}
			#content ul#team li a.charlie {
				width: 199px; height: 229px;
				background: url(images/charlie.jpg);
			}
			#content ul#team li a.lars {
				width: 205px; height: 233px;
				background: url(images/lars.jpg);
			}
			#content ul#team li a.marco {
				width: 198px; height: 229px;
				background: url(images/marco.jpg);
			}

Styling the footer

The footer area can be quickly finished up by adding the subtle texture background, and the back-to-top link floated over to the right, styled up and positioned into place.

#footer {
	min-height: 159px; overflow: hidden;
	background: url(images/footer-bg.jpg) center 0 no-repeat;
}
	#footer p a.back-top {
		float: right; margin: 14px 24px 0 0;
		font-size: 12px; text-decoration: none; color: #4d74bb;
	}
		#footer p a.back-top:hover {
			color: #234c97;
		}

Adding the Javascript

Let’s not forget the extra Javascript effects we had planned for that features section. With the help of some jQuery, and the super cool Cycle plugin, we can easily transform that basic features list into a fully working slideshow.

First, the jQuery library and our own scripts file is referenced in the HTML. The cycle plugin is included in the scripts.js, then some of our own Javascript can put it all into practice. First the overflow:scroll on the features list needs changing to hidden to remove those ugly scrollbars, then the cycle plugin is initiated on the features list. By default the plugin will place a simple fading transition between each element, but there’s plenty more options that could be configured.

$(document).ready(function() {

/* Change the overflow:scroll to overflow hidden on the Features list */

	$('#features').css('overflow','hidden');

/* Initiate the cycle on the Features list */
	$('#features ul').cycle();
});

The final concept

So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original PSD concept.

View the demo

Tags: AJAX, avi, Cool, CSS, css3, design, DOCTYPE, fil, fix, Flash, GET, Gradient, Header, help, HTML, image, images, IP, Java, JavaScript, LP, META, Mod, Over, Photoshop, png, porte, POST, reference, script, Server, standard, Start, tag, tags, text, textur, Transparent, tutorial, URL, valid, Wanted