CSS3 HTML5 - No flux capacitor needed.

CSS3 and HTML5 are still making their final steps into the world, support is growing amongst browsers based on, webkit(Safari/Chrome), mozilla(Firefox) and Opera.

CSS3

Regarding css3 support for many functions is still based on the type of browser, for instance to create a shadow on an element we must do the following:

		
/* Your standard CSS class declaration*/
.shadow_class { 

	/*	mozila */
		-moz-box-shadow: -5px -5px 5px #888;

	/*	webkit */
		-webkit-box-shadow: -5px -5px 5px #888;

	/* others  + ie9 (possibly - beta not encouraging.) */
		box-shadow: -5px -5px 5px #888;

}

There is slight variation in the rendering of the above code, and we are still at a point where such a basic concept such as a shadow can fall flat on its face. However this is not to say that we shouldn't try and use as much CSS3 and HTML5 as possible. We will go into detail regarding HTML5 in a little while, first lets have a look at a few simple things what we can accomplish with CSS3.

CSS3 Fun

@font-face

All the titles in this document use the @font-face method, the font used is from google fonts some code examples below

HTML


<!-- in the header of the document -->
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet'
	type='text/css'>

CSS


h1, h2, h3 {
	font-family: 'Vollkorn', arial, serif;
	font-size: 2.6em;
	line-height: normal;
}

EXAMPLE

Look at ME! Don't look at ME!

Text Shadow

Text shadow is nice, we like text shadow, good for busy backgrounds, or just showing off to your mates.

HTML
```
<h1 class="text-shadow">Text shadow</h1>				
			
```
CSS
```
.text_shadow {
	text-shadow: 3px 3px 3px #888888;
}				
			
```
EXAMPLE

Text shadow

Shadow

Simple shadow around html elements, nice and easy to accomplish and looks good.

HTML


<div id="examplebox" class="shadow">
	<p>Example box with a shadow!</p>
</div>

CSS


.shadow {
	-moz-box-shadow: 10px 10px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 10px 10px 5px #888;
}

EXAMPLE

Example box with a shadow!

Gradients

Gradients can be applied with much more finesse and subtlety than this example provides.

HTML


<div id="examplebox" class="grad">
	<p>Example box with a gradient!</p>
</div>

CSS


.grad {
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0.33, #0030B5),
	    color-stop(0.68, #00BBFF)
	);

	background-image: -moz-linear-gradient(
	    center bottom,
	    #0030B5 33%,
	    #00BBFF 68%
	);

}

EXAMPLE

Example box with a gradient!

Basic Transform

Here is a basic rotation transformation, other properties are supported such as scale, skew and safari currently supports 3d transformations. We also have several different easing options as well. This transformation is activated on an element hover, if you are viewing this on an touch screen device you will just see a rotated square, for obvious reasons.

HTML


<div id="examplebox" class="basic_transform">
</div>

CSS


.basic_transform {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);

}

.basic_transform:hover {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
	
	/* controling the duration and the easing */	
	-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}

EXAMPLE

This is a basic transform example.

Animations

Animations are really a continuation of what we have seen previously, however from a css point of view much more is going on. To allow us to better understand the animation functions I have limited the compatibility to webkit browsers and written each "function" in extension.

HTML


<div id="animation_example">
	<p>Animation example</p>
</div>

CSS


#animation_example {
/*	how long to wait before starting the animation */	
	-webkit-animation-delay: 1s;

/*	the number of times run	*/	
	-webkit-animation-iteration-count: infinite;  		

/*	type of easing to use */   
	-webkit-animation-timing-function: linear;  

/*	honestly? the duration from -> to */   
	-webkit-animation-duration: 4s; 			

/*	Calls the animation defined below */	
	-webkit-animation-name: our_example_animation_part_a; 		

/*	Alternates the direction of the animation */	
	-webkit-animation-direction: alternate;		

/*	Makes the to state persist */	
	-webkit-animation-fill-mode: both;		
}

@-webkit-keyframes our_example_animation_part_a {
	/* Define the first frame of animation	*/
	from {
		-webkit-transition: opacity;
		opacity: 1;
	}

	/* Define what happens 25% through the animation */
	25% {
		opacity: 0.1;
	}

	/* Define what happens 75% through the animation */
	75% {
		opacity: 0.9;
	}

	/* Define the last frame of the animation */
	to {
		-webkit-transform: rotate(360deg);
		-webkit-transition: opacity;
		opacity: 0.1;	
	}
}

EXAMPLE

Animation example

Columns

We can now define columns of text with one class and a small bit of css.

HTML
```
<p class="columns">Here are columns defined simply with some lorem ipsum...</p>
			
```
CSS
```
.columns {
/* how many columns do we want? */
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;

/* define the gap between the columns */	
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
}				
			
```
EXAMPLE

Here are columns defined simply with some lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur suscipit sem nec nisl mattis et lacinia tortor malesuada. Donec bibendum, dui vel egestas mattis, purus ipsum rutrum ante, at lacinia augue metus ut arcu.

Multiple backgrounds

The future is now, we can have multiple backgrounds on a single element! This is useful in many ways, allowing us to specify parts of an image to use on different areas of an element.

HTML


<div id="examplebox" class="dual_backgrounds">
	<p>This is an example of dual backgrounds</p>
</div>

CSS


.dual_backgrounds {
	background-image: url(../images/bg_test_1.jpg), 
			  url(../images/bg_test_2.jpg);
	background-position: top left, bottom right;
	background-repeat: no-repeat, no-repeat;
}

EXAMPLE

Example images

This is an example of dual backgrounds

Border radius

We have an example of rounded corners, something that has been needed for many years, i believe it has been constructed from the tears of developers and designers. The following example has

HTML


<div id="examplebox" class="border_example">
	<p>This is an example of rounded borders.</p>
</div>

CSS


.border_example {
/* Define the radius of the borders */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
/* Define the border you wish to be different */
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomright: 0;
	border-bottom-right-radius: 0;
}

EXAMPLE

This is an example of rounded borders.

Border image

We can now use images to use as borders.

HTML


<div id="examplebox" class="pattern_example">
	<p>This is an example of a pattern border.</p>
</div>

CSS


.pattern_example {
	/*define border image, the width and the horizontal and vertical actions*/
	border-image: url(../images/border_pattern.jpg) 10 stretch round;
	-moz-border-image: url(../images/border_pattern.jpg) 10 stretch round;
	-webkit-border-image: url(../images/border_pattern.jpg) 10 stretch round;
}

EXAMPLE

Example image

This is an example of a pattern border.

Time for some fun...

Time for a bit of fun, lets use most of the above techniques at once. This should highlight how we should use these techniques subtly, and certainly not all at the same time.

HTML
```
<div id="animation_example" class="shadow grad pattern_example">
	<h2 class="text_shadow">Font Face!</h2>
	<p class="columns text_shadow">
		This is some copy we want in columns
	</p>
</div>				
			
```
CSS
```
/* All of the above! */
			
```
EXAMPLE

Font Face!

This is some copy we want in columns

HTML5

HTML5 is arguably less supported than CSS3 at the moment, however with some useful javascript libraries support is less important than it may seem. Modernizr is a nice bit of javascript which tells you what the browser can support which gives us the chance to create a backup or allow the page to gracefully degrade.

What is HTML5?

HTML5 is all over the place. Most talk is currently of HTML5 video but HTML5 will have some interesting repercussions for design and development of sites. From a development point of view we have some interesting tags which link semantically with the construction of the document.

			
<!-- instead of -->

<div id="header"> header content here </div>
<div id="footer"> footer content here </div>

<!-- we have -->

<header> header content here </header>
<footer> footer content here </footer>

The header/footer tags and their siblings are intended to provide structure to the document, this will help HTML5 be more useful for a wider range of devices(accessibility)

Take the following example, the Birthday Project website uses a input type of "date", this isn't widely supported with only Opera offering us a date selector. With a simple statement we can determine whether the browser provides a date selector and using some jQuery put our own date selector in if it doesn't.

For the most part we can use this to detect and replace any elements of the design we have made with HTML5 in mind. However, this is akin to creating a separate ie6 stylesheet for example, it will be added development time, however unlike ie6 fixes using Modernizr could enhance our sites with time not just become redundant. blah blah blah etc etc

HTML5 Fun

Here we have some examples of HTML5 in action.

Canvas - phil?
Form elements

Why use it?

Describe using it here.

Perspectives

CSS3 HTML5 - No flux capacitor needed.

CSS3

CSS3 Fun

@font-face

HTML

CSS

EXAMPLE

Look at ME! Don't look at ME!

Text Shadow

HTML

CSS

EXAMPLE

Text shadow

Shadow

HTML

CSS

EXAMPLE

Gradients

HTML

CSS

EXAMPLE

Basic Transform

HTML

CSS

EXAMPLE

Animations

HTML

CSS

EXAMPLE

Columns

HTML

CSS

EXAMPLE

Multiple backgrounds

HTML

CSS

EXAMPLE

Example images

Border radius

HTML

CSS

EXAMPLE

Border image

HTML

CSS

EXAMPLE

Example image

Time for some fun...

HTML

CSS

EXAMPLE

Font Face!

HTML5

What is HTML5?

HTML5 Fun

Why use it?