Endigo Design

HTML5 Sticky Footer

admin — Tue, 20 Jul 2010 20:55:50 +0000

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

HTML5




	HTML 5 Sticky Footer

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

Three Great New Projects

admin — Fri, 16 Jul 2010 02:19:52 +0000

Three new projects have been added to my portfolio. Two currently in-production projects and one of which that will be launched early next week.

Flower’s By Ramon
This is an E-Commerce website that is being built using the Shopify E-Commerce system. It is shaping up to be a really great online store.

El Kouri Fishing
This will be an online portfolio website for Joe Dan El Kouri, a professional fisherman out of Lawton, Oklahoma.

Vic & James Paint Center
This site is just about ready to launch. This is a local paint store business but the site has came together really well and I was able to use some new (for me) CSS3 styles. Specifically nth-child.

Since these sites are all pre-launch there may still be some on going changes made between now and launch. I will update all three projects to a final status and update all thumbnails as soon as they are finalized. For now enjoy an early sneak peak!

Also a quick status update, I currently have a few big updates planned for this blog in the upcoming weeks. Be sure and check back soon. Until then.

Learn how to use CSS3 Keyframe Animation

admin — Fri, 25 Jun 2010 01:18:15 +0000

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.

Starkers 3.0 Released

admin — Wed, 23 Jun 2010 01:51:09 +0000

What is Starkers? Starkers is a special WordPress theme commonly referred to as a “naked” theme and created by the brilliant Elliot Jay Stocks. When building themes for WordPress it can be a hassle to start completely from scratch unless you’ve memorized all the unique functions that are not always common in standard PHP. You may also find that trying to take a completed theme and trying to strip it down to fit your needs often results in a poorly coded and designed sites.

This is where Starkers comes in, it provides you a theme completely stripped down to the bare essentials. Some basic html markup remains for layout as well as some extra goodies Elliot throws in such example font stack lists, basic theme structure in place, correctly sized theme thumbnail, as well as a CSS file ready to have all the template information added.

I have used Starkers for nearly all sites I build with a WordPress backend and hope to sometime in the near future provide my first tutorial for the site describing my work flow for creating a complete theme. For now though please check out this awesome resource and read the full details and download the theme from Elliot’s site from the links below.

View A Demo Starkers 3.0 Announcement Download Starkers

WordPress 3.0 Now Available

admin — Fri, 18 Jun 2010 05:08:52 +0000

WordPress is one of the most powerful blogging platforms on the market today. Recently they have taken a turn to expand their CMS (content management system) functions to enable really powerful backends for not only bloggers but really any type of website. I personally love the application and their philosophy behind their product and use it to power this very site as well as most of my client’s website I have built in the last year.

Today WordPress announced their latest version named “Theloniious” and includes such great features as a new default theme called Twenty-Ten, the now merged WordPress-MU system, a ton of bug fixes and other features that are sure to keep people like you and me busy learning for weeks to come.

I strongly recommend you give it a try on a local testing environment to test all the new features but having used it since the first release canidate I can safely say it is very stable and recommended to start using today! A great update to a great product.

Download WordPress 3.0

Endigo Design Launched!

admin — Tue, 01 Jun 2010 05:30:54 +0000

Welcome to the new site. While the site is still a bit rough around the edges it is up and running using all the latest tools and magic at my disposal. On Endigo you will find not only information about the owner (me!) Chris Simmons but also examples of my work.

I also hope to use my blog to help publish and give back to the community some great tips and tricks I have learned to pass along knowledge and help the next guy. I have some big ideas but it will take time as anything does. I hope you will bookmark me and check back from time to time to see what’s new. Other then that please enjoy!