Endigo Design » Coding http://www.endigodesign.com Modern Web Design by <em>Chris Simmons</em>. Tue, 19 Oct 2010 23:59:15 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 HTML5 Sticky Footer http://www.endigodesign.com/2010/07/html5-sticky-footer/ http://www.endigodesign.com/2010/07/html5-sticky-footer/#comments Tue, 20 Jul 2010 20:55:50 +0000 admin http://www.endigodesign.com/?p=356 Introduction

You may or may not be familiar with this technique but you have most likely seen it in action at some point or another. The sticky footer allows you to create a CSS footer that attaches itself to the bottom of your screen yet is smart enough not to overlap your page content.

Ryan Fait provides a great tutorial for using this method but has unfortunately not updated his tutorial with an HTML5 version. I was planning on updating this for my own personal use but decided to share it on here as well. So here’s the effect in action:

View The Demo

Getting Started

Let’s start off by taking a look at the code.

CSS

<style type="text/css">
	* {margin: 0;}
	html, body {height: 100%;}
	#wrap {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -100px; /* Set footer height. */
	}
	footer, .push {
		height: 100px; /* Set footer height. */
		/* clear: both; */ /* Muti-column fix.*/
	}
	footer {background: blue;}
</style>

HTML5

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>HTML 5 Sticky Footer</title>
	<meta charset="UTF-8">
</head>
<body>

    <div id="wrap">
        <!--Page content here...-->
        <div class="push"><!--Sticky Footer Push--></div>
    </div>
    <footer>
        <!--Footer content here...-->
    </footer>

</body>
</html>

How it Works

So what is happening here? We have created some basic markup that is split into two main sections, the wrap and the footer. Inside the wrap we have a div with the class of push. Simple enough so far. The magic really happens in the CSS where we set a negative bottom margin that matches  the values of our push and footer heights (note: this must include border and padding height as well!).

Final Thoughts

I will warn you to avoid setting a top margin on your footer, instead set the padding using your wrap tag instead. You may also notice that footer works fine without  height:auto !important; and height: 100%; As Ryan notes these are added simply as a min-height fix for IE6. If you are not targeting that browser you are free to remove those lines.

View The Demo

]]> http://www.endigodesign.com/2010/07/html5-sticky-footer/feed/ 1 Learn how to use CSS3 Keyframe Animation http://www.endigodesign.com/2010/06/learn-how-to-use-css3-keyframe-animation/ http://www.endigodesign.com/2010/06/learn-how-to-use-css3-keyframe-animation/#comments Fri, 25 Jun 2010 01:18:15 +0000 admin http://www.endigodesign.com/?p=240 Introduction

If your viewing my site using a Webkit based browser such as Google Chrome or Apple Safari you may have noticed the subtle animated glow effect I use on the borders image links when you hover over them. Here’s a couple screenshots showing the effect:

I have accomplished this using the awesome @-webkit-keyframes tag being introduced in the CSS3 spec. Anyone that has ever created an animated gif or used programs like Adobe Flash will immediately understand the advantage keyframes bring to animation by allowing multiple stages of changes within a set amount of time.

Getting Started

Here is what it looks like in practice, please note the comments.

.gallery li div:hover {
	/* Give your animation a custom name */
	-webkit-animation-name: border-animation;

	/* Set the duration, s = seconds */
	-webkit-animation-duration: 2s;

	/* How many times the animation to repeat */
	-webkit-animation-iteration-count: infinite;

	/* Several options available, use linear for this example */
	-webkit-animation-timing-function: linear;
}
/* This is the keyframe tag + custom animation name (assigned above) */
@-webkit-keyframes border-animation {
	/* Below are when each frame takes place, 50% of a 2 second duration would be 1 second or half way through the animation. */
	0% {border: 5px solid #e7eeed;}
	50% {
		border: 5px dashed #fff9b2;
		-webkit-box-shadow: 0px 0px 12px #fff9b2;
		-moz-box-shadow: 0px 0px 12px #fff9b2;
		box-shadow: 0px 0px 12px #fff9b2;
 	}
	100% {border: 5px solid #e7eeed;}
} /* <--- Small syntax highlighting error here */

So here’s what my custom border-animation effect does: It has the typical 5px sized light blue border, then when moused over for 1 second (50% of a 2 second duration) fades to a light yellow border with a slight CSS3 box shadow which appears as a glow effect, finally one second later returns to it’s original state. As long as you hover over the selected elements the effect will repeat forever.

Final Thoughts

One final note I might point out you will notice from my code above. Most IDE’s with syntax highlighting do not yet recognize the extra curly brackets needed for the @-webkit-keyframes tag when specifying your keyframes. In Dreamweaver for example the last curly bracket is shown in a red color rather then the normal pink. See an example below:

For now it helps to add a comment to help remind yourself that this is intentional, I am sure this would most likely return an error if you tried to validate your code but that’s part of the game when your working with bleeding edge code specs!

Additional Notes: You can view some details about CSS3 animation with the Webkit.org CSS3 Animation Guide. For the time being I am focusing on Webkit’s implementation of this effect using the proprietary -webkit- at the beginning of the tag since it is the only browser to my knowledge that can use the tag at the time of publishing this article. Opera is starting to support basic animations using -o- and Mozilla will soon start supporting animations using -moz- with their upcoming 3.7 release of Firefox. Microsoft is pushing for greater support of standards with their Internet Explorer 9 which may or may not include animation support.

]]> http://www.endigodesign.com/2010/06/learn-how-to-use-css3-keyframe-animation/feed/ 0