Follow along as we create a simple and fun download button using some fancy CSS3. Our button will use lots of fun goodies including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.

As we go, I’ll discuss why some techniques that you might think to use should be avoided. Transitions are tricky to work with and are quite prone to refuse to work with certain properties. Read on to find out more.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Concept

Loosely based on this idea, I wanted to create a download button with a cool sliding drawer effect where originally hidden information pops out when the user begins a hover event. To put my own spin on it, I decided to double the effect and create a drawer on both the top and bottom of the button (click here for a sneak peek of the finished result).

Here’s how it will work: using a combination of HTML and CSS, we’ll create three separate pieces. These include the main button and two smaller info panels. The smaller panels will initially hide under the larger button, then when the user hovers, one will slide upward and the other downward.

As you can see, this will be a pretty easy project that is perfect for beginners that are looking to up their CSS skills. Especially worth learning is how we’ll utilize absolute positioning and stacking via z-index.

What Won’t Work

As I planned out this project, I came up with a couple of ways to make my concept work. Given that I’ve been on a pseudo element kick lately, the way that I chose to structure the project initially was through the use of :before and :after.

With these pseudo elements, we can code only the download button in our HTML and then add in the wings using pure CSS. It seems like an optimal solution and indeed it worked great… until I tried to animate the transition. No matter what I tried, I simply couldn’t get the transition to work.

After a little research I discovered that that only Firefox supports CSS transitions on pseudo elements. This is a real bummer that really limits the fun we can have with :before and :after, but on the upside I learned a valuable lesson that will save me a lot of time and trouble in the future.

In tutorials like this one you don’t often get to hear about where the author failed, but I think it’s important to communicate these failures so you can learn from them as I have. Now the next time you want to animate a pseudo element you’ll remember that it won’t work in most browsers!

Failures aside, let’s jump into a method that will work.

The Button

To begin, we’ll create and style our button. Once we have this in place, it’ll be easier to form the other elements. All we need in the HTML department is a single div containing a link. We could simply use the link for the button but we’ll need to group multiple objects together so a div is necessary.

<div class="button">
  <a href="#">Download</a>
</div>

Button Shape & Size

The HTML above should simply provide you with a plain text link. We’re going to transform this into a button with a set background shape and size. To do this, we start with some dimensions, add some color and set the display value to block.

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
}

Here’s a look at what your button should look like after this step. It doesn’t look like much yet, but it’ll be a fancy looking button before you know it.

Type Styles

The first ugly thing about the button above that we’ll need to fix is the type, it’s currently a mess. Fortunately, this is easy to address. All we need to do is set the color to white, declare a font, and center it.

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
 
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}

There are a couple of interesting things to note here. First, notice that I’m using the “font” shorthand rather than running through reach font property individually. This is a great way to save space and keep your type styles nice and succinct. The order here is as follows:

Here’s another nifty trick: I set the line-height to 50px to center it vertically in the button. Also notice that I removed the text underline and transformed the type to be uppercase. Why didn’t I just type it out in all caps in HTML? Because this is really a style choice and could change with a future redesign.

Now our button is looking much better!

CSS3 Magic

At this point our button is still looking a little plain. If you’re cool with the minimal look, you can skip ahead. Otherwise, let’s make it a little more interesting. The first thing we’ll do is round off the corners. Make sure you add all three browser prefixes:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;

Next up, we’ll toss in a box-shadow. Once again, we’ll need three versions to cover the various browsers. The shorthand value order here is horizontal offset, vertical offset, blur and color.

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

Finally, we’ll toss in a gradient. Unfortunately, this requires a whole mess of code. The way gradients work recently change so not only do we need multiple prefixes, we also need multiple syntaxes to make sure we support everything. I’m going to be honest, I rarely code this stuff by hand. Instead, I use the Ultimate Gradient Generator and paste in the generated code. Here’s the result:

background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

Now our button is completely styled and looking fine. Here’s the result:

Adding The Drawers

Now that our primary button is done, it’s time to add the little drawers that will slide out from the top and bottom (perhaps “wings” is the appropriate term). To do this, we’ll start by adding a little bit to our HTML:

<div class="button">
  <a href="#">Download</a>
  <p class="top">click to begin</p>
  <p class="bottom">1.2MB .zip</p>
</div>

As you can see, I basically tossed in two paragraphs, each with a unique class that makes them easy to target (you could use some pseudo selectors instead if you really want to get fancy).

Default Paragraph Styling

Now jump over to your CSS and we’ll style the paragraphs. To start, we want to focus on the styles that both paragraphs will share. Styling both at once where possible helps keep our code clean and less redundant. Here’s a big chunk of code to think over:

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*CSS3*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

Now, this is a lot to throw at you all at once so I’ll walk through it step by step. The first thing we do is give the paragraphs shape, color and type styles exactly like we did on the button. The main difference is that these are smaller and use some margins to push them into place.

Next are the positioning styles. These are very important so be sure you understand them clearly. In order to make the wings appear behind the button, we need to apply z-index, which affects the stacking order of the elements. Think of this as a “send to back” sort of command. To make this work, we need to apply absolute positioning.

Finally, we added the same border-radius and gradient styles that we did before. I’ve kept these separated from the previous styles to keep things simple and clear, but to make things DRYer, you would probably want to rewrite your shared CSS3 styles to something like this:

.button a, p {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);      
}

Basically, any time you find yourself repeating or pasting styles multiple times, you’re making your code unnecessarily complex and should attempt to simplify.

At the end of this step, you’ll strangely see no change in your preview from last time. This is because we’ve hidden these elements behind the button. They’re there, you just can’t see them yet!

Hover and Active Styles

What we want to do next is take the wings that we just created and move them outward when the user hovers over the button. To accomplish this, we simply need to adjust the margins on each paragraph. Here we target each of the classes that we created, then move the .top one up and the .bottom one down. The .top class also required a slight line-height adjustment to look right.

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
 
.button:hover .bottom {
  margin: -10px 0 0 10px;
}

While we’re here, we might as well throw some active styles on as well. These will take effect during a mouse down event.

/*Adjust Gradient*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
 
}
 
/*Pulls in Wings*/
.button:active .bottom {
  margin: -20px 0 0 10px;
}
 
.button:active .top {
  margin: -70px 0 0 10px;
}

As you can see, what I’ve done here is adjust the gradient so that the top color stretches a little farther, then I brought the wings back in a little bit so that there’s a contracting effect when you click.

Now our button is looking awesome. All three of our states are working. When you’re not hovering, it looks like a plain old button. When you are hovering, the wings or drawers pop out. When you click, the wings come in a little and the gradient changes ever so slightly.

Final Step: Add The Transition

At this point, everything appears to be working just fine. The only problem is that the hover effect takes place instantly and of course we’d like it to be a little more gradual. To accomplish this, go back to your paragraph block and add in a basic 0.5 second transition using all of the required prefixes.

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*CSS3*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
 
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

With this addition, the button will transition very nicely between the three different states.

See It In Action

We’re all finished! You should now have an awesome animated CSS download button that is sure to impress. Check out the live demo below or check out the code on Tinkerbin.

Demo: Click Here to Launch

Want an even better version of the button with six different versions to choose from? Check out the awesome free download at our new sister site Design Curate.

Conclusion

Thanks for reading and following along. If you made it all the way through, pat yourself on the back for a job well done.

I hope you learned a thing or two about z-index or cool CSS3 tricks. If not, at least you got an awesome button out of the deal! Leave a comment below and let us know if you enjoyed the tutorial.

New technologies are making web development more exciting than ever before. HTML5 and CSS3 provide a double dose of modern practices that are absolutely refreshing and empowering. Unfortunately, utilizing these technologies can considerably complicate your quest for cross browser compatibility.

How can you know which techniques are safe to use now and which you should either provide alternatives to or avoid altogether? Join us as we take a look at a handful of our favorite resources that quickly and easily help you make informed decisions about real world HTML5 and CSS3 implementation.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Simply Irresistible

Cross browser compatibility was difficult enough a few years ago before we started diving into fancy new technologies like HTML5 and CSS3. Now with these tools creeping to the forefront of our development methods, it can be a downright mess.

The benefits of using HTML5 and CSS3 are clear and undeniable. They’re so full of goodies and fun that nary one in ten developers can resist at least dipping a toe in to test the waters. To further the hype, authors like me are constantly dishing out awesome new tutorials that teach you the ins and outs of these technologies, thereby fueling your desire to put them into practice as soon as possible.

Are We Rushing Ahead?

While most of us are rushing headlong into utilizing the latest and greatest in web development trends, a few more rational souls are begging us to slow down. New toys are all well and good but much of this stuff is still under construction and the rest hasn’t been implemented well across all of the important browsers.

So who is right? How can you as a practical, real world developer know whether to buy into the hype and run with the new or trust the skeptics and stick with the tried and true methods from years past?

Stop the Guesswork

The single best thing that you can do to decide whether you can personally begin to implement new web technologies is to educate yourself on the support that you can expect for each new item in the various browsers that matter most to your audience.

This sounds like a lot of work doesn’t it? There are countless blogposts, books and websites dedicated to teaching you this stuff, enough to eat up an entire lifetime and more. The amount of material is so completely overwhelming that you might avoid learning simply out of intimidation.

Fortunately, there are some very easy and straightforward ways to make sure that what you’re doing will work well across various browsers. You won’t have to sort through mile long blog posts or read a stack of books every time you want to toss in a drop shadow, you’ll just need a quick look at a few select resources to get you going.

Browser Compatibility Charts: A Developer’s Best Friend

The very first thing that I recommend that you do in your quest to figure out which new technologies you can implement today is to bookmark one or two solid browser compatibility charts.

These resources are invaluable and can save you endless hours of research. They serve as a quick reference that immediately helps you identify which browsers do and don’t support the techniques that you’re trying to implement. Some of the better choices even offer help getting the older browsers to play nice.

When can I use…

Caniuse.com is certainly not the prettiest option available for browser compatibility charts, but it is one of the most helpful and thorough.

The organization here is very simple and easy to use: just click an item from any of the five categories (CSS, HTML5, SVG, JS API and Other) and you’ll be taken to a chart showing you the support for various browsers. Also, the search provides instant results as you type so answers to all your browser questions are never more than a few keystrokes away.

For instance, let’s say you read my recent article on :before and :after and would like to double check my statements about browser compatibility for the :after pseudo element (always double check your facts!), all you have to do is type “after” into the search bar and the chart below will pop up.

There’s a ton of great information here for you to utilize. The chart informs us that we’ve got great support across the board for current browsers (even IE), but run into some trouble two versions back with IE7 and before.

In addition to the compatibility chart, you’ll find two other valuable items: a browser comparison feature and a list of helpful resources.

The latter of these often includes some really great links. For instance, if you’re looking up new CSS3 functionality such as gradients, you might get a link for a generator that will do the work for you. In the case above we received a link for a detailed guide explaining the use of CSS generated content using pseudo elements.

The browser compatibility chart allows you to choose two browsers and see an overview of the support for the items in any of the five categories mentioned before.

FindMeByIP

If you’re looking to forgo all of the features of the previous site in favor of some plain old extensive browser compatibility charts that you can bookmark and reference in a flash, check out the HTML5 & CSS3 Support page at FindMeByIP.

As you can see, the charts here are quite attractive and very easy to read. These are perfect for when you just need to quickly double check something or get an overview of browser support across the board.

Should You Use It?

Browser compatibility charts are awesome for letting you know whether or not a given browser supports what you’re trying to implement, but they only empower you to make decisions, you still have to interpret the information and decide whether or not it’s safe to proceed.

If you’re a new developer, this can be intimidating. To help you out further, be sure to check out HTML5 Please. This community sourced project flat out tells you whether or not to use a given technique and makes recommendations for how to proceed. You should never follow something blindly, but when you’re on the fence this can sure help you make the call.

As with When Can I Use, the search bar here provides instant results as you type. Let’s say you want to know whether or not CSS transitions are safe to implement, simply enter “transitions” and the results will filter to the following:

Right away we get a recommendation for use, shown in the top right corner of the result:

“Use with fallback” is the advice we are given for CSS transitions. This is coupled with some brief and straightforward information that tells us that transitions are safe if they’re not necessary for a usable experience and that any interaction critical transitions should be backed up with an alternative for other browsers. The necessary browser prefixes for implementation are also provided. For many items, recommended polyfills are provided to help make your implementation as cross browser compatible as possible.

Modernizr Has Your Back

The final resource you need to become familiar with in your quest for cross browser compatible CSS3 and HTML5 is Modernizr. You’ve no doubt heard of it before, but it’s time to download it and check it out.

The reason that Modernizr is so great is that it can automatically detect whether or not a browser supports a given feature and then serve up some JavaScript magic in response. This allows you to account for an impressively wide array of circumstances and provide JavaScript fallbacks and polyfills for older browsers with very little effort.

Modernizr will test for support for over 40 next-gen features, provide on the go information to tell you what will and won’t be supported and provides the best solutions around to help you respond to any holes in support.

Conclusion

The resources above are all aimed at helping you make informed decisions about whether or not to implement a given HTML5 or CSS3 technique.

Browser compatibility charts provide a quick reference to how you can expect each browser to respond to a given technique, HTML5 Please will give you solid and honest recommendations for whether or not to proceed, and Modernizr will help you identify and fill the functionality gaps in a specific design.

These resources don’t get you off the hook for diving into deeper understanding of how to properly implement these features, but they do serve as an awesome starting guide for how and when to proceed.

Leave a comment below and tell us about your favorite resources in this area. Do you use any of the sites listed above? What other tools are invaluable to your workflow?

The holiday season is at its peak and for some lucky people in weather appropriate climates, winter is in full swing. I live in Phoenix so real winter, and consequently snow, is really just a distant dream. Thus I am forced to turn to nerdery to get my fix!

Today we’re going to go over a super simple CSS technique that you can use to make it snow on your website. It’ll only take you a few minutes at the most and it serves as a great introduction to using multiple background images and keyframe animations in CSS.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Webkit FTW

To keep things simple, I’ll start off all of this code using the -webkit vendor prefix. This will keep our code cleaner and easier to read as we learn. The reason I chose Webkit is simple: the CSS keyframe animation support rocks. Even Firefox, which recently added keyframe support, really won’t cut it nearly as well as Safari.

Afterwards, we’ll discuss how to toss in the other vendor prefixes and what type of experience you can expect on each browser. Ultimately, if you’re really looking for a solidly supported effect that works on as many browsers as possible, I recommend seeking out a jQuery snow plugin. However, if you’re up for a fun CSS learning experience, keep reading!

Getting Started: We Three PNGs

The setup for this project is three snowy background images. You can definitely add more if you like, but we’ll use three here to keep things nice and simple. Basically, all you need is three transparent background PNG files of varying size with random little white dots on them.

Here’s my process for setting these up. First, I created a 500px square image and used a tiny brush at full hardness. You can set up a scatter brush if you want but I like the control of manually placing the dots around the canvas. Then, to make sure it tiled nicely, I went to Filter>Other>Offset.

Since I started with a 500px square image, I’m going to cut that in half and offset by 250px both horizontally and vertically.

After you’ve run this command, you might have some messy spots near the center, these should be easy to clean up with a little erasing. The important part is that the edges wrap nicely so the middle of the image can be changed however you want.

Now save your PNG out and repeat this entire process for a 400px square image and a 300px square image. For these last two, I made the snowflakes a little blurrier and reduced the opacity a little.

Applying the Backgrounds

Now we’re going to apply these images to our background in CSS. I’m throwing them on using the body selector but feel free to apply them to something more specific.

Implementing multiple backgrounds is exactly like applying only one background, the only difference is that you throw in a comma after the first image URL and add in another. Here’s what our code will look like, note that the background images will all repeat by default.

body {
	background-color: #6b92b9; 
	background-image: url('snow1.png'), url('snow2.png'), url('snow3.png');
}

Multiple backgrounds have great support across the board, the only real thing you have to worry about is, you guessed it, older versions of IE. As with just about everything else in advanced CSS, multiple backgrounds are supported in IE9, but nothing older than that. Hopefully the new IE auto update program will put an end to these types of woes!

Setting Up the Keyframes

In the past, we’ve done some decently complex keyframe animations on Design Shack, but this time we can keep in really simple.

@-webkit-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Despite the fact that I’m referring to this as “simple” there’s admittedly a lot going on in this syntax so let’s break it down piece by piece. What this is doing is setting up an animation that we can then call into action elsewhere in our CSS. The base syntax is “@keyframes” but here we’re implementing the Webkit version so we used “@-webkit-keyframes”. The “snow” part is the name that I chose for the animation. You have some freedom here but try to choose something descriptive and helpful.

Next we initiate two frames. The first is what our page will look like at the beginning of our animation, the second is what it will look like at the end. At the beginning, I’ve placed all of our background images at the top left of the page using “0px 0px.” Then at the end, I’ve moved each image to a new location. Just like when we place each image, we’ll separate each set of position values with a comma.

The Position Logic

The position of each image at the end of the animation may seem arbitrary, but in reality this is very intentional. In order to make the animation work right, you have to understand a few things.

The reason we’re using keyframe animations instead of the simpler and much better supported transition property is because we can loop a keyframe animation endlessly so it will continue to snow indefinitely. With this in mind, you have to remember that once a single instance of an animation has run its course, it’s going to start over. If you don’t position your images properly, you’ll see a blip at this point.

The trick is to utilize the size of your images to make sure the end frame matches the beginning frame, thus creating a seamless transition. For instance, my second background image was 400px by 400px, so I moved the background 400px down during the course of the animation, the same for my third image at 300px. For my first image I did something a little different. I wanted it to move faster so I doubled the height and moved it 1,000 pixels. Since this is a multiple of the height, the last frame will still match the first.

Also notice that I moved the horizontal position of the images as well. This adds a bit of wind into the equation so the snow isn’t falling perfectly vertically. If you want the snow to sway back and forth as it falls, simply add in a few more frames.

Implementing the Animation

Our final step is to return to the body selector and throw in “-webkit-animation” to create an instance of the animation. First we state the name of the animation that we want to use, in this case “snow,” then we state the duration of the animation (20 seconds), next we choose a timing function (linear) and finally we loop the animation infinitely.

body {
	background-color: #6b92b9; 
	background-image: url('snow.png'), url('snow3.png'), url('snow2.png');
	-webkit-animation: snow 20s linear infinite;
}

With that, your website should be snowing like crazy in Safari! Let’s take a look at expanding this a little.

Other Browser Prefixes

Now to add more browser support. Our keyframe setup section should be expanded to the following. I’ve started with the base syntax without a browser prefix, then used the prefixes for Mozilla, Webkit and Microsoft.

/*Keyframes*/
@keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-ms-keyframes snow {
 0% {background-position: 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Then we do the same for the styles in the body. All of the various browsers use the same syntax, only the prefix changes.

body {
	background-color: #6b92b9; 
	background-image: url('snow.png'), url('snow2.png'), url('snow3.png');
 
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

Note that the IE support here is purely for the future. Only IE 10 has support for keyframe animations and its still under development.

“Not So Fast” says Firefox

At this point I wanted to be all done with the tutorial, but alas, I opened up Firefox and found a problem: no animation! After some digging it turned out that the problem is in the multiple background implementation.

The issue is a strange one. Firefox supports multiple background images and it supports keyframe animations. It even supports animations that use multiple background images! However, for some reason it doesn’t seem to support moving each background image’s position independently during a keyframe animation.

Update

Great news, commenter Patric solved our little Firefox problem! It turns out my love for shorthand got me into trouble here. Firefox works perfectly if you list out all of the values in the initial line. Here’s the updated keyframe code:

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
 
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}
 
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

See It in Action

Demo: Click here to launch

Conclusion

To sum up, making a pure CSS looped snow animation that works in modern browsers is a snap. A few minutes of Photoshop and a couple of simple lines of code and you’ve got the North Pole. IE won’t support keyframe animations until version 10, Opera currently has zero support and Firefox has support, but it’s not as extensive as what you’ll find in Webkit.

This project perfectly illustrates why it’s important to play around with this stuff before it’s ready to be implemented in the real world. I had no idea that Firefox would throw a wrench into my little animation until I actually got my hands dirty with an experiment. Now I find myself much more educated on the necessary syntax for CSS animations on a browser to browser basis.

Today we’ll be creating a styled iPhone App website template using HTML5/CSS3. This will not be targeted onto a specific app, so we don’t include a download link to the app store. Instead I’ve created a small e-mail signup form through MailChimp so you can hook early adopters into the app for pre-release. This is great for developers who need to get something up and running for their product before it’s on the market.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Try it Out

View Live Demo – Download Source

However, if you’ve noticed the app screenshot I’m using is from an actual app. It’s called Ballin ~ Dribbble for iPhone and just popped into the store a few weeks ago. This layout isn’t used to condone the Ballin app, instead I just needed a screenshot to include for demo purposes. But feel free to use another screen if you copy the template for your own website.

Getting Started

As always we start off with some very simple HTML page structure. If you checked out the demo everything we need is centered in the page and aligned properly. The code isn’t convoluted at all! I’m using the standard HTML5 doctype with 3 external files included.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>iPhone App Website with E-mail Signup</title>
	<link rel="stylesheet" type="text/css" href="global.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form-n-validate.js"></script>
</head>

The first is our global.css styles in an alternate file. Second we need the latest jQuery library hosted through Google Code databases. And finally I’ve added the form validation script from MailChimp. This script tag is normally copied over into your body area with the e-mail signup form, but to simplify the code I’ve moved it into the head.

So now let’s focus on parts of the body. I will skip over our e-mail signup just for now so we can focus on the bare-bones styles and framework. After opening the body you’ll notice an ID #iphone-preview which is used to house the Ballin’ app iPhone screenshot. We’re actually using only two images in this webpage – the iPhone screen and our blue gradient background.

Also as a quick note I’ve used an iPhone 4 PSD file for creating the graphic. You can check it out at the Macristocracy blog where Jake Moore has offered the free PSD for download. Or alternatively just download directly from his CloudApp link without visiting the page!

<body>
<div id="iphone-preview" class="wrap">
	<img src="img/ballin-app.png" alt="Ballin' App Preview" />
</div>
 
<div id="main-content" class="wrap">
	<h2>sign up below for instant e-mail updates and early <em>beta access</em> in the app store!</h2>

Now below the iPhone we have an ID #main-content which is similarly given a class of wrap. This means the content will be centered on our page regardless of resolution size. Inside the h2 tag I nested an em for emphasis on the words beta access. Using CSS I styled the em element to give a light pink coloring so these will stand out much more! Everything else is focusing on our e-mail signup, so let’s jump into global.css to clarify a few points quickly.

Designer’s CSS Code

In my source files the global.css is located directly in the root with index.html. I’ve grouped my styles into three main categories – global elements, body structure, and e-mail form styles.

Inside the core body I’ve added code for our wrapper class and to position the iPhone graphic. Each wrapper is contained within 660 pixels and centered horizontally on the page. Additionally the container div around our iPhone image is given a bottom border with the hex color #b4ada8. If you’ve noticed I chose to style this piece similarly to Milk’s Oink App for iOS.

/* @group core body */
#iphone-preview { text-align: center; border-bottom: 1px solid #b4ada8; margin-bottom: 12px; }
#iphone-preview img { margin: 0; margin-bottom: -2px; }
 
.wrap { width: 660px; margin: 0 auto; }

They use an outer glow on the iPhone and have matched colors for their app. Also, they’re using jQuery for a fade-in effect which I chose not to include. But this is a wonderful teaser layout to keep your visitors interested and begging for more info!

Setting Up MailChimp

This is the piece where things start to get a bit confusing. MailChimp includes a lot of their own custom code when you go to create a form. I actually had to edit out a lot of meaningless stuff from their generic code block – so don’t get discouraged if you can’t match up your styles exactly the same. My code will work 100% if you change both of the list subscription URLs generated automatically through MC.

So to get started head over into MailChimp and login. If you don’t have an account signup is totally free for under 12k e-mails/month (which is pretty realistic). After you log into the Dashboard look for a link at the top titled “Lists”. These are used to manage your subscribers for a specific topic – and this is how MailChimp will create your unique signup form tied into a list set. Create a new list, give it a quick name, and we should be set to go.

Once in the List Dashboard area you should notice a set of sub-navigation links. On the far right you’ll notice For Your Website and in the drop-down menu click Signup Form Embed Code. This is the code you’ll need to embed for a small signup form using MailChimp.

In the left-hand menu select Classic Form and customize the features to your liking. I’ve removed the title and just kept a standard e-mail field for signup. The code you need to copy is in the box below… so now we can go ahead and move on with our custom edits.

Customizing the Signup Form

Start out by removing the top style tag with all of their custom CSS edits. It’s nice they offer this, but we really don’t need it. Next if you look for the form element you’ll notice a very long URL in the action=”" attribute. This is one of the two custom URLs which will match up to your list. If you copy over from my code make sure to replace the form action with your own list URL – otherwise visitors will be signing up into my site!

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"> 
	<form action="http://destinyislands.us2.list-manage.com/subscribe/post?u=8329c77b379de0413725b5380&amp;id=9d70a869e7" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
 
	<div id="mce-responses"> 
		<div class="response" id="mce-error-response" style="display: none;"></div> 
		<div class="response" id="mce-success-response" style="display: none;"></div> 
	</div> 
 
	<div class="mc-field-group" id="mcform-fields-group">
	<center><input type="text" value="" name="email" class="required email" placeholder="Email address..." id="mce-EMAIL" /></center>
	<input type="submit" value="Subscribe" name="subscribe" class="btn" /> 
	</div> 
 
	</form> 
</div>

Above is an example of what my form looks like after gutting all the MailChimp nonsense. It still contains a lot of the original code, but I’ve moved the error messages above the main input field. Also using the HTML5 placeholder attribute we can add default text into the e-mail field input before a user clicks.

Now the script tag is where people tend to get lost. If you notice two scripts you should check if one of them is the jQuery form validate.js file. If so you can remove it since we’ve already included this in our header. All of the other code is really used for checking if the form has been filled out properly. It’s very convoluted if you don’t understand jQuery, but luckily you don’t need to edit much of anything in here. If you copy the JS from my demo vs downloading from MailChimp you may experience differences if they have updated the backend since this publication. To play it safe just try working off my demo for now.

  var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
  options = { url: 'http://destinyislands.us2.list-manage2.com/subscribe/post-json?u=8329c77b379de0413725b5380&id=9d70a869e7&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",

I do want to bring your attention to one final important aspect of the JavaScript code. The options variable is used to pass information to the Ajax call when checking for validation. You’ll notice another subscription URL in the jQuery, but if you have a keen eye you should notice this isn’t the same URL as before!

It’s very important that you have both of these URLs set properly. The form action calls a URI with /subscribe/post while the jQuery URL is calling /subscribe/post-json. Even if you copy/paste from my demo just updating these two URLs with your own will be enough to get the script working for you.

View Live Demo – Download Source

Conclusion

This has been a fast-paced introduction to setting up an iOS App website using MailChimp. We’ve downloaded an iPhone PSD from the Internet and setup a small application graphic. We’ve also utilized some basic jQuery and CSS3 modeling to create a fantastic e-mail signup form using Ajax. And with all of this tied into MailChimp you’re getting a great subscription service totally free.

Let us know your thoughts or questions in the comments area below. Additionally if you implement the tutorial code anywhere we would love to see it live! Include a link to your web page if you’ve set up a similar iPhone or iPad app template design.

Digg is one of the most popular social news networks to date. They garner a massive audience in the millions of members. Recently the company has carved a new direction with the launch of Digg v4. The entire system has been replaced with new statistics and followers/following networking.

One of the most notable changes is in page aesthetics. With the launch of Digg v4 boasts a brand new design with a unique look and feel. In this tutorial I’ll be going over how you can create your own Digg v4 style input form using some basic CSS3 properties.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

We’ll also be using jQuery to manipulate each of the key divisions for a nifty animation effect. We won’t be using any fancy Ajax calls here, although jQuery does support such functionality. The main form we’ll be using is based off Digg’s current submit page.

Live Demo – Download

Working with CSS3 and jQuery

As it may not be implied, there isn’t anything special required to work with CSS3. We don’t need to include any external files or libraries since most modern browsers will support a newer rendering engine. jQuery does have to be included into our file. Lucky for us Google Code hosts all versions of popular scripts online.

Using the Google APIs docs we can start working with jQuery 1.4.1. I’ve included the minified version to save bandwidth in the long run (always a good idea for production environments). Aside from this we’ll also need our core files. In order this will include a simple index.html, global.css for styles and script.js for our jQuery functionality.

Bare Structures

We can first start with our HTML code. It should be fairly straightforward but it doesn’t hurt to break things down into sections.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Digg-Style Input Forms</title>
<link rel="stylesheet" type="text/css" href="global.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<Script type="text/javascript" src="script.js"></script>

This is the main heading portion of our HTML document. It contains all meta information along with an XHTML transitional doctype. The only file inclusions we’re working with are CSS and external JavaScript code. Both of these files are stored locally while our jQuery map is included via http://ajax.googleapis.com/.

Next we have some basic code for our core body layout. This will include the Digg heading and logo portion of the page. This also includes our small form with a few input buttons and div boxes.

<body>
<div class="header-wrapper">
 
	<div class="header group"><a href="#" class="sprite digg-logo" id="header-logo">Digg</a></div>
 
</div>
 
<div class="page-wrapper group">
	<div class="column full group">
    	<h1>Submit to Digg</h1>
 
        <div id="submission-form-container">
 
        <div class="flexible-input" id="submission-url-row">
            <input type="text" name="submission" placeholder="Submit a link" class="text-input" id="url-submit-url" value="" />
        </div>
 
        <div id="submission-editor-wrapper" style="display:block;">
    	<div id="submission-editor" class="group">
 
        <div class="submission-detail-field">
            <a class="edit-input" id="edit-title">Edit</a>
            <p id="submit-title">Destiny Islands Blog</p>
            <div class="flexible-input">
                <input type="text" name="submission-title" value="Destiny Islands Blog" class="text-input" id="user-title-text" />
            </div>
        </div>
 
      <div class="submission-detail-field">
            <a class="edit-input" id="edit-description">Edit</a>
            <p id="submit-description">Enter a description</p>
            <div class="flexible-input">
                <textarea class="text-input" rows="4" id="user-desc-text" placeholder="Enter a description">Enter a description</textarea>
            </div>
        </div>
 
  <div class="submission-buttons group">
            <div class="buttons-wrapper">
                <button type="submit" name="submit" class="btn btn-special has-tooltip" id="submit-create">Digg it <span class="sprite digg-it-large"></span></button>
                <a class="float-right" id="submit-cancel">Cancel</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Next it should be simple to cover some of the common CSS queries. There are a few properties and IDs that should be understood well when editing a similar style script. Also we have used a few CSS3 properties new to modern browsers.

Next Generation CSS

Our file starts off simple with resetting margins and heading/body styles. There really isn’t much in the way of fonts, block areas, or other common elements. Since the purpose of our code is tutorial-driven I didn’t bother to create an extensive list of CSS properties.

* { margin: 0; padding: 0; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
 
.header-wrapper{background:#1b5790;}
.header{height:45px;margin:0 auto;max-width:1000px;min-width:800px;padding:5px 20px 0 20px;}
.header.size-medium{min-width:800px;max-width:800px;}
.header.size-simple{max-width:680px;min-width:680px;padding:5px 0 0 0;width:680px;}
.header .digg-logo{float:left;margin:5px 20px 0 10px;}
 
.sprite{background:url('master.png') no-repeat 0 0; display:-moz-inline-stack; display:inline-block; *display:inline; vertical-align:top; zoom:1;}
 
.digg-logo{background-position:0 -109px;display:block;height:30px;text-indent:-999999px;width:62px;}

Notice how there is a small class called “sprite”. This uses a master.png file which holds all icons and graphics for Digg’s layout. This is a spriting technique used to save bandwidth and server calls for background graphics.

Further down the page we have some newer blocks related to CSS3 queries. Many of the form’s input fields and buttons include effects generated in-browser through CSS. As one example all input text fields have -webkit-box-shadow set with an inset fall.

This produces a 3-D effect unlike many seen before. The new web standards generate beautiful tonality and with these CSS properties we can design amazing interfaces.

.text-input,.text-input-flat{background-color:#fff;border:1px solid #80a1c1;color:#80a1c1;font-size:1.16666666667em;padding:7px 9px 6px;margin-bottom:30px;}
.text-input:focus,.text-input-flat:focus{color:#666;}
.text-input{box-shadow:inset 0 1px 2px #d0d0d0;-moz-box-shadow:inset 0 1px 2px #d0d0d0;width:950px;-webkit-box-shadow:inset 0 1px 2px #d0d0d0;}
button{cursor:pointer;overflow:visible;padding:0;width:auto;}
button::-moz-focus-inner{border:0;padding:0;}
label{cursor:pointer;}
.block-label{color:#373529;display:block;font-size:1.16666666667em;font-weight:bold;margin-bottom:8px;}
.block-label .faded{font-weight:normal;}
.inline-label{color:#666;font-size:1.16666666667em;margin-right:10px;}

A bit lower we have a block of code catered to a few classes. submission-detail-field and now-editing contain some interesting properties that should be examined a bit further. Initially all content inside a now-editing class has no display. This is changed using jQuery to manipulate how we should our forms.

Submission forms are set by default to look like labels. Once you click to edit them we change the parent division class to now-editing and remove the display:none; clause. From here we can alternate between the two states with ease.

These CSS styles can work with almost anything. You will notice a few bugs in the system right away. As a short example any buttons or links inside the div won’t show a mouse pointer on hover. Instead you’ll get the text bar used to highlight blocks of text – this can be changed through CSS’ cursor property.

.submission-detail-field{background:#fff;margin-bottom:10px;padding:10px 40px 10px 10px;position:relative;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.submission-detail-field .flexible-input{display:none;}
.submission-detail-field.now-editing{background:transparent;padding:0;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;}
.now-editing p{display:none;}
.now-editing .edit-input{display:none;}
.now-editing .flexible-input{display:block;}
#submit-title{color:#356190;font-size:1.33333333333em;font-weight:bold;}
#submit-description{color:#80a1c1;font-size:1.16666666667em;line-height:1.33333333333em;}
.edit-input{color:#578cca;padding:5px;position:absolute;cursor:pointer;right:6px;top:6px;}
.edit-input:hover { text-decoration: underline; }

Building our Script

The JavaScript required is fairly straightforward to work with. Luckily jQuery helps by shaving off many lines of code required to target and manipulate DOM objects.

$(document).ready(function() {

We start with our standard ready event checking for our document to finish loading. This is a more precise way of targeting script development since all we really need is a fully loaded Document Object Model to get moving. Many smaller assets throughout the page will continue loading, but instead of waiting our script is executable instantly.

Inside our ready function parameters we pass a new function() designed to handle event listeners. These will check for a certain event to occur and when it does it’ll execute code set inside of a new function.

This will make more sense with an example, so let’s start with the first input field.

$('.edit-input').bind('click', function() {
    var dic = $(this.parentNode).attr('class');
    var curid = $(this).attr('id');
 
    if(dic == "submission-detail-field") {
        $(this.parentNode).removeClass('submission-detail-field');
        $(this.parentNode).addClass('now-editing');
    }
 
    if(curid == "edit-title") { $('#user-title-text').focus(); }
    else if(curid == "edit-description") { $('#user-desc-text').focus(); }
 
});

The first line is checking our document for any element(s) with the class “edit-input” and binding an event handler to it (or them). The event we’re looking for is a click event which means whenever the user clicks this element we call another function. In our HTML code .edit-input is a class applied to our edit links.

Once the function begins we are pulling the class name from our containing parent element. We are also grabbing the current ID of our edit link since we can determine if we’re editing the story title or description. Further down we have code to swap the two classes making our text field editable.

Afterwards there are a few lines of code needed to auto focus the text field and save any results. We could have used an Ajax call to save the data into a database with each click, however the details to do so range beyond this tutorial’s scope. We would also need support from a backend language such as PHP or Ruby.

$('#user-title-text').bind('blur', function() {
    var txt = this.value;
 
    $('#submit-title').text(txt);
    $(this.parentNode).parent().attr('class', 'submission-detail-field');
});
 
$('#user-desc-text').bind('blur', function() {
    var txt = this.value;
 
    $('#submit-description').text(txt);
    $(this.parentNode).parent().attr('class', 'submission-detail-field');
});

There is a similar bind event tied to our two form field divisions This will check for the text area containing our story description and works in a similar manner as above. Note that you are able to chain multiple event listeners in this manner to create dynamic form scripts in minutes.

Conclusion

This tutorial has given a strong overview of newer CSS3 techniques and classic jQuery functionality. Our final product looks very similar to the Digg submit form without pulling images from a URL which requires Ajax techniques.

All CSS styles and designs have been created in a very similar manner to Digg v4. Better yet, many of the code blocks have been made simple to copy and manipulate into your own page.

As stated previously I have updated both the live demo code and offered a .zip file for download. You can check out my Digg demo code here on DesignShack and also download the archive for your own works. If you have any questions/comments feel free to offer your ideas in the discussion area below.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Why We Hate Flash

Like it or not, the web has turned on Flash. The former Internet poster boy has become a red-headed step child, bringing out feelings of outright hate in many users. This march was largely led by Steve Jobs and Apple’s refusal to allow Flash on iOS, but every day web users have long had a beef with the technology.

For several reasons, Flash was amazing. It allowed web developers to bring websites to a level of dynamism that was previously impossible. Instead of a land of boring static pages the Internet became a place where truly immersive and downright futuristic experiences were possible.

This all came at a price though. With the rise of Flash the web also became a remarkably buggy and sluggish place. Flash websites of course require the Flash plugin, and if you don’t have the latest version, you’d better go get it or this thing isn’t going to work.

Then came the loading bars. Page load times on pure Flash sites increase exponentially and suddenly “Loading: 10%… Loading: 11%…” spinners became part of our daily lives.

Finally, there’s the problem of stability. Steve Jobs famously stated that most of the time, when Macs crash, Flash is to blame. This is a bit of hyperbole but the core of the statement does hint at some truth. We’ve all experienced Flash-related freezing and worse. So much so that many people download plugins that block all Flash activity unless it is manually approved.

Hollywood Wisdom

In the film Jurassic Park, chaos specialist Ian Malcom remarks upon finding an island of living dinosaurs, “your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.”

This quote is very appropriate for Flash’s rise to fame. Developers were so excited about what they could do, they forgot to ask what they should do. Will Flash improve the overall experience or worsen it? What am I gaining by using Flash and what am I sacrificing? Will the majority of my users be satisfied with the decisions that I’ve made? How large is the pool of users who will miss out and what options will I have for them?

Repeating History

Fast-forward to now. CSS3 and HTML5 have arrived to save the day. Flash is on the ropes and takes a fresh beating every day as we see stunning new examples of astounding sites built only with CSS, HTML and JavaScript.

HTML and CSS are built into modern web browsers and are the very backbone of the Worldwide Web as we know it today, so being able to use these technologies to build dynamic pages is a web designer’s dream come true.

However, as more and more developers pick up these technologies and begin stretching them to the limits, Jurassic Park Syndrome begins to set it. We all become so preoccupied with what is possible that it’s easy to lose sight of what is permissible.

More and more as I browse the web I’m starting to see signs that a Flash-like future is approaching. Page load times are increasing to the point that “loading” messages are making a comeback, web pages are becoming quite browser-dependent, long animations are causing browser freezes; sound familiar?

Don’t get me wrong, I’m the first to stand up and say that HTML5 and CSS3 are not only the future of the web but the source of the best current technologies. However, I think some conversations about caution are appropriate if we are to avoid a Flash-like scenario.

Yes, our new toys are awesome, but let’s slow down for a minute and ask ourselves a few important questions before implementation.

Important Questions

The following is a rough and incomplete list of questions that you should ask yourself before implementing certain next-gen technologies on your site.

Is The Purpose Experimental/Educational?

For those of you ready to point a finger at me and my weekly offering of CSS3 techniques, I get a free pass (isn’t that convenient?). It’s my job to discuss not only the current state of the web but upcoming trends and technologies. As a result, this blog and other should absolutely be exploring and teaching new techniques as they arise.

As an individual, you also have every right to experiment. There’s no harm in setting up a web playground or personal website with experimental features. The problem arises when you’ve been hired to create a site under the assumption that maximum user compatibility is a primary goal. Most companies won’t be crazy about hiring you to create a site that’s only impressive to other web designers and slightly annoying to everyone else.

What Is Gained? What Is Lost?

Just as I recommended with the implementation of Flash, with any new or experimental technology you should always carefully weigh your pros and cons.

Is the benefit mostly an aesthetic boost? Is it worth a slight hit in usability? How about a large one? From the average non-designer user’s perspective, will this choice add to or take away from the experience?

For instance, let’s say you’re building a fancy animated drop down menu using pure CSS3 instead of JavaScript, are you doing this because it’s more impressive or because you know that you can genuinely make it more functional for more users than if you had gone the JS route?

It all comes back to Ian Malcom’s dilemma. If it turns out that you can pull off a bunch of modern web wizardry on a site, always ask yourself if you should.

Sometimes the advances will actually help streamline your site and make it even more usable, other times you’ll find yourself with bloated code and a slow page while waving your banner of progress. Just be honest with yourself and decide where to draw the line.

Will Any Users Miss Out?

Let’s say you want to implement some Webkit Keyframe Animations (one of my favorite CSS3 goodies) on a client site, do you first take a look at your analytics to see how many non-Webkit users you’ll be leaving out?

Browser compatibility was a major problem before HTML5 and CSS3 and is only worse now. The same logic that we’ve always used still applies though. Just be sure to design with every major browser in mind. As far as I’m concerned, you shouldn’t feel bad about implementing browser-specific tricks and effects, just make sure that other users still have a solid experience.

Obviously, we’re talking about progressive enhancement. Start with a baseline of functionality and aesthetics that work across all major browsers, then add in special extras for those forward-thinking individuals using a truly modern browser.

Conclusion

To sum up, I absolutely love HTML5 and CSS3. I spend loads of time experimenting and stretching the bounds of what I previously thought was possible. However, when working on real projects, I’m always cautious about going overboard and creating a site that not only looks like it was built with Flash, but acts like it!

Leave a comment below and let us know how you approach the use of new technologies on client sites. Are you fully embracing HTML5 and CSS3 or just selectively appealing them where genuine improvements can be made?

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

HTML Attributes

Before I introduce you to the concept of CSS attribute selectors, you should know what an HTML attribute is. The good news is, you’re already familiar with several of them: class, id, style, and href for example. There are a ton more though, check out W3.org for a complete list.

CSS makes styling some attributes easy. For instance, if we want to style an id or class, we just use the following.

#someid {color: black}
.someclass {color: black}

This is all well and good, but what if we want to style some other attributes? This is where attribute selectors come into play.

Attribute Selectors

As we just learned, attribute selectors are exactly what they sound like, a way to select and target specific attributes using CSS. This is actually really easy to do and just involves a set of brackets containing the HTML that you used. Let’s see how this works by looking first at some basic HTML.

<ul>
    <li><a href="http://designshack.net/">Design Shack</a></li>
    <li><a href="http://www.smashingmagazine.com/">Smashing Magazine</a></li>
    <li><a href="http://sixrevisions.com/">Six Revisions</a></li>
</ul>

Let’s say I wanted to target and style only the Design Shack link. I could use pseudo selectors, but this assumes the list stays in that order and browser support isn’t the best. Instead, what we can do is use an attribute selector to target the specific “href” that we’re interested in.

a[href='http://designshack.net/'] {color: blue;}

Repeating Attributes

Another example that’s used a lot is a list of contacts, one or more of which should be styled a certain way. Using attributes, we can differentiate between friends and contacts.

<ul>
    <li><a href="#" rel="friend">Larry</a></li>
    <li><a href="#" rel="contact">Curly</a></li>
    <li><a href="#" rel="contact">Moe</a></li>
    <li><a href="#" rel="contact">Curly Joe</a></li>
    <li><a href="#" rel="friend">Shemp</a></li>
</ul>

We can then go in and style each of these rel attributes differently using the same syntax as above. Much like with a class, multiple items can meet the criteria in one declaration.

li a[rel='friend'] {font-weight: bold;}
li a[rel='contact'] {font-weight: 200;}

Using this code we can achieve the results below. Notice that even if we start adding in new contacts to the top of the list, these selectors will still work where :nth-child wouldn’t. Pretty cool right? Further, just about every current browser supports these, including IE back to version 7!

It’s also important to note that you don’t have to be so specific. The following will style any element with a rel attribute applied.

li a[rel] {font-weight: bold;}

Handling Multiples Values

The tricky part about using Attribute selectors is that they get a little funny when there is multiple attributes. Consider the following tweak to our previous list.

<ul>
    <li><a href="#" rel="friend nofollow">Larry</a></li>
    <li><a href="#" rel="contact">Curly</a></li>
    <li><a href="#" rel="contact">Moe</a></li>
</ul>

You would think that styling the first list item would be the same process considering it still has “friend” in it, but that’s not the case. Simply using =’friend’ won’t successfully target this anymore. Instead, we have to use the following, which looks for “friend” as one of the rel values.

li a[rel~='friend'] {font-weight: bold;}

This will result in the “Larry” list item being bolded where as the previous a[rel='friend'] syntax would’ve missed it.

CSS3 Attribute Selectors

CSS3 has given us so many cool new toys and tools to play with. It’s no surprise then that there are also some new Attribute Selectors that help us bring even more specificity into our targeting. Let’s start with my favorite.

Styling Similarly Named Attributes

This is where things get awesome. Let’s say you had the following HTML and that you wanted to target only the upperSection and lowerSection, how would you do it?

<div id="upperSection">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="somethingElse">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="lowerSection">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="footer">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

One easy answer is the new “Arbitrary Substring Attribute Value Selector”, or “the really cool little asterisk thing.” Since the two divs that we want to target both contain “Section” in their names, we can easily target them.

div[id*='Section'] {color: red;}

I was blown away by this. Here we’re using CSS to actually dig through our ID names to find specific values within a larger name and target those elements. This opens up a lot of possibilities and makes complex targeting with little markup a much easier task.

Beginning and Ending

While the Arbitrary Substring Attribute Value Selector will target a given string anywhere, the Beginning and Ending versions allow rarer cases to be handled where you only want the first or last item to be considered.

<ul>
    <li><a href="#" title="stooge one">Larry</a></li>
    <li><a href="#" title="the second stooge">Curly</a></li>
    <li><a href="#" title="stooge three">Moe</a></li>
    <li><a href="#" title="impostor">Curly-Joe</a></li>
</ul>

Let’s say we want to target all the stooges, making Larry and Moe red and Curly yellow. To do this, we can insert use [title^='stooge'] to grab all those with “stooge” as the first word and [title$='stooge'] to grab all those with “stooge” as the last word.

li a[title^='stooge'] {color: red} /*Beginning*/
li a[title$='stooge'] {color: yellow} /*Ending*/

Chaining Attribute Selectors

Let’s say you want to get super specific and add on multiple criteria. That’s as simple as chaining together multiple attribute selectors. Let’s see how this works with the HTML below.

<ul>
    <li><a href="#" title="stooge one">Larry</a></li>
    <li><a href="#" title="the second stooge">Curly</a></li>
    <li><a href="#" title="stooge three">Moe</a></li>
    <li><a href="#" title="the impostor">Curly-Joe</a></li>
</ul>

Now, let’s target any link with “stooge” in the title, but only those beginning with “the”. Notice that we don’t want to casually target “the” because this also appears in the last item. Here’s the syntax for achieving this:

li a[title*='stooge'][title^='the'] {color: red;}

Simple right? All we did was take the two rules that we needed and put them on the same line. It’s important to note that this isn’t an either/or scenario but a both/and. Only those items that meet both criteria will be changed.

Further Reading

If you’re enough of a nerd that you’re just loving attribute selectors, there are two more sources that I highly recommend that you check out.

CSS Tricks

First, Chris Coyier has a very thorough introduction over at CSS Tricks covering much of the same content that we covered here. Chris is a CSS super genius though and likely explains them much better than me!

The Book of CSS3

Next, check out Peter Gasston’s The Book of CSS3, which has been my main reference for all things CSS3 lately. I simply can’t get enough of this book and have given it quite the permanent position on my desk! Gasston adds to this conversation with a discussion of General and Adjacent Sibling Combinators, which are another interesting way to target certain elements. Take the following HTML as an example:

<div id="combinators">
    <p>Not this one.</p>    
    <h1>Gibberish</h1>
    <p>Pick me!</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Now, let’s say we wanted to target only the “Pick me!” paragraph. The Adjacent Sibling Combinator let’s us do just that. The following code targets any p tags immediately preceded by an h1 tag. There is only one of these in the example above (the first paragraph after the header).

h1 + p {color: orange;}

Similarly, the General Sibling Combinator will allow us to target all of the p tags that come after the header. So that first paragraph won’t change color, but all of the others will.

h1 ~ p {color: orange;}

This is just a taste, for more information on these, check out The Book of CSS3.

Browser Support

As I mentioned briefly above, as far as I can tell, you’re pretty covered on most of these techniques back to IE7 with all major current browsers rocking perfect support. However, it’s not exactly a full score across the board with some of the lesser-known browsers being a little spotty. You can find a nice little table of browsers and their support for all of this stuff and more at dev.l-c-n.com.

Conclusion

To be honest, I very recently knew little to nothing about CSS attribute selectors. After a little bit of research though I was stunned by how cool they are and baffled as to why they seem to be so rare (browser support is better than for a lot of the stuff we mess with). With just a little bit of code, you can achieve remarkably specific targeting with little to no additional markup required.

Leave a comment and let me know what you think of attribute selectors and whether or not you ever use them!

Today we’re going to dig deeper into this model and build a full-on web page with it. It will by no means be ready to implement on your projects but it will give you further insight into one possible way that we will be coding websites in years to come. Plus, this stuff is just flat out fun to play with!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Highly Experimental: Webkit Only

My goal for this post was to have a working page up and running on several browsers, that didn’t happen. At this point the implementation is buggy and inconsistent across browsers, even after installing Flexie.js, I was still getting vastly different results between Firefox and Safari (I think it has to do with mixing typical margin-centered containers and Flexbox).

For this reason, today’s project will primarily be targeted at Safari and Chrome because frankly, it’s still a mess in other browsers! I definitely encourage you to follow along and then play with the finished product to see if you can get it up and running in a cross-browser implementation. If you have suggestions, I’d love to hear them in the comments!

Step 1: Reusable Classes

Since I briefly explained the basic concept of Flexbox in yesterday’s post, I’ll be focusing on implementation here. But don’t worry, you should get the gist as we go along.

The first thing we want to do is create some basic classes that will help define our layout. These attributes can be applied to an ID on an as-needed basis, but I find it helpful to and tidy to do it this way.

.hasflex {
    display: box;
    display: -webkit-box;
    display: -moz-box;
}
 
.box0 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}
 
.box1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}
 
.box2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}
 
.box3 {
    -webkit-box-flex: 3;
    -moz-box-flex: 3;
    box-flex: 3;
}
 
.last {
	margin-right: 0;
}

Let’s discuss how these classes work. The first class, hasflex, will be applied to a parent container whose children we want to lay out using this new Flexbox system. One thing you’ll notice is that this entire design will be completely without floats so that gives you some good indications as to where we will be implementing Flexbox in our code.

Next, we set up a few more classes to apply various box-flex values. Flexbox will conveniently distribute our child elements across the container and these will define the proportions. I believe that the default value is “0″ but the results seemed a little buggy with this assumption so I found it helpful to always just apply a value manually.

Step 2: Initial HTML & CSS

To start off your HTML document, create a container and a header. At this point, these are basic elements that we will build just like always without the aid of Flexbox.

<div id="container">
    <div id="header">
    	<h1>Design Shack Flexbox Demo</h1>
    </div>
</div>

Once you’ve got that in place, throw in the basic styles below. Basically I set up a dark body with a light 1,000px wide container that will hold all of our content. Toss in some margins to center and some basic text styles and we’re ready to move on to the fun stuff.

Note: The headline font I’ll be using is Oswald, from Google Fonts.

/*Basic Reset*/
 
* {
	padding: 0;
	margin: 0;
}
 
/*Body/Container*/
 
body {
	font-family: helvetica, arial, sans-serif;
	font-size: 15px;
	line-height: 23px;
	background: #111;
	color: #222;
}
 
 
#container {
	width: 1000px;
	margin: 0 auto;
	background: #eee;
	min-height: 1150px;
}
 
/*Header*/
 
#header {
	margin: 0 auto;
	width: 900px;
	padding-top: 20px;
	font-family: 'Oswald', arial, serif;
}

Step 3: Navigation

Now, for the navigation area, you typically create a list of links and then float them to the left. With Flexbox, the process is a little different. Here we simply apply the hasflex class that we created earlier and then use box0 for each of the list items. Applying box0 to all three has the effect of floating the links to the left but won’t distribute them all the way across the width of the container.

<div id="nav">
	<ul class="hasflex">
		<li class="box0"><a href="#">Home</a></li>
		<li class="box0"><a href="#">About</a></li>
		<li class="box0"><a href="#">Contact</a></li>
	</ul>
</div>

After this, we simply apply the same types of styles we would on any other web page. The main goal here is to space the links out a little with some margins and to make sure our links are styled properly.

/*Navigation*/
 
#nav {
    width: 900px;
    /*background: #eee;*/
    margin: 0 auto;
}
 
#nav ul {
	list-style: none;
}
 
#nav ul li {
	margin: 20px 20px 0 0px;
}
 
#nav a {
	text-decoration: none;
	color: #111;
}
 
#nav a:hover {
	text-decoration: underline;
	color: #666;
}

Step 4: The Image

Every good web page needs an image. To further illustrate how you selectively apply Flexbox only to those elements that need it, we’ll throw in a large header image using the same exact code as you typically would.

<div id="bigimage">
	<img src="http://lorempixum.com/900/300/food/1" />
</div>

/*Image*/
 
#bigimage {
	margin: 20px auto;
	width: 900px;
}

Step 5: Three Columns: Horizontal

This is where Flexbox really shines. Normally, creating a three column layout like the one shown above would involve a good amount of mathematical planning. We would need to not only split the parent container in three but also figure out the proper proportions so that the middle column is wider than the other two.

However, with Flexbox, all we have to do is apply our flexbox class in conjunction with the numbered box classes. Here I set the middle div to box2 and the others to box3. As you can see in the image above, the effect of this is an automatic distribution of the columns with the second being wider than the first.

Interestingly enough, everything I read led me to believe that the box2 class would be the narrowest in this instance, but that simply wasn’t the case in my live tests! This setup brings about a narrow first and last paragraph and a wide second paragraph.

<div id="columns" class="hasflex">
 
    <div class="box3">
    <h2>One</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="box2"> 
    <h2>Long Two</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
 
    <div class="box3"> 
    <h2>Three</h2>
    <p class="">Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Combine this with some basic CSS and you’ve got a quick and easy three column layout! Since Flexbox automatically takes care of the distribution relative to the parent width, any changes we make to the parent will automatically be reflected in the children.

/*Text Columns: 3 Wide*/
 
#columns {
    width: 900px;
    /*background: gray;*/
    margin: 10px auto;
}
 
#columns p {
	margin: 0 15px 0 0px;
}
 
#columns h2 {
	margin: 0 30px 0 0px;
	line-height: 35px;
	font-family: 'Oswald', arial, serif;
}

One fascinating thing about Flexbox is that we could actually reorder the columns that we setup using pure CSS. Assigning -webkit-box-ordinal-group: (a number); to each element gives you control over the order of their appearance.

Step 6: Vertical Stack

It’s important to learn that you don’t have to use vertical columns when working with Flexbox. We can use the same technique as above to stack a few paragraphs on top of each other. If you really get into Flexbox, this technique can be used to mix vertical and horizontally stacked elements, but we’ll keep it basic here just to see how it works.

<div id="rows" class="hasflex">
    <h2>Long Two</h2>
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
    <p class="box1">Lorem ipsum dolor sit amet... </p> 
 
</div>

The primary difference here is that we’ve set box-orient to vertical, which gives us the vertical stack shown in the image above instead of the columns that we created in the previous step.

/*Text Rows*/
 
#rows {
    width: 900px;
    /*background: gray;*/
    margin: 30px auto 15px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
 
#rows p {
	margin: 0 0px 15px 0px;
}
 
#rows h2 {
	line-height: 35px;
	font-family: 'Oswald', arial, serif;
}

Step 7: Two Columns

Just to switch things up one last time, let’s create another section, this time with two columns instead of three. The principle is exactly the same. You don’t have to rethink the layout because you have two columns this time around, Flexbox takes care of all the heavy lifting once again.

<div id="twoColums" class="hasflex">
	<div class="box2">
	<h2>One</h2>
	<p class="">Lorem ipsum dolor sit amet...</p>
	</div>
 
	<div class="box1">
	<h2>Two</h2>
	<p class="">Lorem ipsum dolor sit amet...</p>
	</div>
</div>

/*twoColums*/
#twoColums {
    width: 900px;
    margin: 0px auto;
}
 
#twoColums p {
	margin: 0 20px 0 0;
}
 
#twoColums h2 {
	line-height: 35px;
	font-family: 'Oswald', arial, serif;
}

Finished Product

Check out a live demo if you’re in Safari or Chrome.

Going Further

I intentionally tried to keep this example as simple as possible. However, you can pretty easily take this layout and make it even more complex. For starters, using percentages for width will give you a nice, truly flexible layout. Also, as I mentioned above, you can perform complex actions such as rearranging columns and mixing vertical and horizontal stacks in the same row. I encourage you to play with the code as much as possible using this page as a guide.

Conclusion

This basic example is meant to shed further light into how we could be using Flexbox to create both simple and complex layouts sometime in the future. I’m fairly new to the module so this is far from perfect, as evidenced by the fact that it isn’t cross-browser compatible yet!

Despite its downfalls, you should have a strong grasp of how the module works and what can be done with a relatively small amount of code when leveraging Flexbox. Feel free to toss in plenty of suggestions in the comments!

Today’s article looks at some of the reasons that floats are pretty lame and takes a look at a number of alternative layout systems, some of which are still under development but may one day represent the standard for CSS-based layout.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Tale of Tables

Once upon a time, web designers used HTML tables to accomplish complex page layouts. Though it was a messy, non-semantic process, it attempted to make the best of the available technology to create better designs.

For newbies, when I say “non-semantic,” I mean that table-based layout is a bastardization of the table element. It’s meant to hold actual tables of information within a page, not to serve as the structure for the page itself.

Floats: The New Tables?

Today, we scoff at this practice. What a silly way to lay out a website! CSS has come to our rescue and provided us with several tools for creating much more semantic layouts that can easily achieve anything that was created with a table.

Today one of the primary ways that we have replaced our table-dependent ways is the use of floats for layout. By default, sequential HTML elements will appear vertically stacked. Floats serve as a way for us to line elements up horizontally. Float a list of li elements to the left and you’ve got yourself a nice little horizontal navigation menu.

Though many of us have simply grown accustomed to using them, floats are far from ideal. They’re awkward, buggy and difficult to learn. If you think back to when you first began CSS-based layout, the thing that had you scratching your head and troubleshooting for hours was probably a float gone wrong.

The Clearfix Band-Aid

The bane of float-based layouts (aside from IE6 margin nightmares) is of course the fact that they simply don’t play well with their container elements. In order to get the parent element to appear as if it contains floated elements, we typically insert a cleared element last in the container using “clear:both”.

Is creating an empty container to hack a broken layout a good practice? Probably not. Does it work? You bet.

A Better Clearfix

Forward thinkers have decided that this business of adding additional HTML markup is no good. The current favorite way to clear a float is to instead insert the new element using the CSS “:after” pseudo class.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Once again, this is acceptable because of how accustomed we are to messing with floats to bend them to our will. However, try taking a step back and really looking at what’s going on here. This is a mess! We’re using CSS to insert an invisible element into the HTML so that our layout problems magically disappear as we shiver at the thought of using table-based layouts because they aren’t semantic.

I’m not defending table-based layout, it’s dead and needs to stay that way, but I can’t help but wonder if future web designers will laugh at our use of floats the way that we now laugh at the thought of a web page built on a table.

The Future

You have to admit, if you really think about it, floats are a pretty screwed up and complicated way to handle page layout. I don’t see floats going completely away any time soon, they’ll likely still be useful even if we all do accept a new layout process.

However, there are several interesting layout tools on the horizon that could very well replace floats as a primary way that to structure web pages. Let’s take a look at some of these ideas and constructs and see if we can get a glimpse into what the future of CSS layout will be like.

Inline-Block

Before we dive into futuristic experimental layout techniques, it’s worthwhile to discuss inline-block as an interesting alternative to float-based layouts. Consider the snippet below:

ul li {
    display: inline-block;
    width: 100px;
    min-height: 100px; 
    vertical-align: top; /*helps with variable length content*/
}

This will actually cause our list items to appear inline while retaining their block attributes, which is completely amazing really! We get the best of both worlds.

Downfalls of Inline-Block

Andrew Tetlaw from Sitepoint recently published a fantastic article that highly praises using inline-block over floats. He correctly points out that this method works effectively on all modern browsers, including IE8 and above, which is about the same as you can expect from the pseudo-class-driven clearfix from above.

Unfortunately, as Robert Nyman points out in a similar article, this method isn’t without its problems.

In addition to the IE troubles (he has a clever hack to get support in IE7), Nyman shows using inline-block causes your layout to be somewhat whitespace dependent when it comes to your HTML. The example he uses is the following unordered list:

<ul id="display-inline-block-example">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

Believe it or not, the line returns automatically cause a slight margin to be added to the list items! The only way to fix it is to place them on the same line:

<ul id="display-inline-block-example">
    <li>Item one</li><li>Item two</li><li>Item three</li>
</ul>

Admittedly, it’s a fairly easy fix, but if you’re a fan of neatly organized code, this may make you cringe. On the whole, when compared to the trouble that we face using floats, Tetlaw has a point that this may be a better solution that you can actually use now with an acceptable amount of browser support.

Flexbox

One of the new ways that CSS3 is changing layout practices is through the Flexible Box Module, or Flexbox for short. Here’s a quote from the Flexbox w3 abstract.

[Flexbox] provides an additional layout system alongside the ones already in CSS. [CSS21] In this new box model, the children of a box are laid out either horizontally or vertically, and unused space can be assigned to a particular child or distributed among the children by assignment of “flex” to the children that should expand. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Flexbox represents a completely new way to layout websites. You may have heard about this recently but the syntax is changing a bit so make sure you keep an eye on the working spec to stay up to date (I believe “box” will change to “flex” or “flexbox” in most cases). The current working CSS syntax for applying flexbox is as follows:

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

To see how it works, let’s jump right into an example. Basically, once you apply display: box to the parent element, the children can be automatically redistributed based on simple relative sizing.

Imagine we have three paragraph tags (these will serve as columns) inside a parent container with display: box applied and we want the middle column to be twice the width of the other two. Here’s what we do:

#box2 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}

With that little bit of code (plus some superfluous visual styling), we can achieve the following result.

Note that the default value is “0″ for box-flex. Changing the second box to “2″ triggered the command to fill the width while making the second box wider than the other two. Let’s consider a few more examples so you can really get a feel for how it works.

As you can see, Flexbox has dramatic implications to the way we structure websites with CSS. Not only does this have the potential to solve the problems associated with floats, it makes multi-column grid-based layouts infinitely easier!

Dig Deeper

This article is merely meant as an introduction to new layout methods and is not in any way exhaustive. I’ve barely scratched the surface of what what Flexbox can do. For instance, you can accomplish the same thing we did above with vertically stacked elements and completely rearrange the boxes using only CSS.

For more on what can be done with Flexbox, I highly recommend that you play with Flexie, The Flexbox Playground. This will give you hands-on experience with the new layout system and allow you to try each setting to get a feel for the result.

The Template Layout Module

Another proposed idea for CSS layout is the Template Layout Module. Here’s a quote from the official spec.

“The properties in this specification work by associating a layout policy with an element. Rather than letting an element lay out its descendants in their normal order as inline text or as blocks of text (the policies available in CSS level 1), the policy defined in this module, called template-based positioning, gives an element an invisible grid for aligning descendant elements.”

The Template Layout Module uses a quirky but straightforward syntax that makes layout a breeze. The first thing you need to do is create a container with some child elements. For each child element, you assign an arbitrary letter (it doesn’t matter which letter, just make sure they’re unique).

#div1 {
    position: a;
}
 
#div1 {
    position: b;
}
 
#div1 {
    position: c;
}

Next, you apply a display value to the parent element using these letters to define your proportions. For example, to create three equal columns, simply type them all in a row:

#container {
    display: "abc";
}

This will give you the following result:

If you want to rearrange the boxes, simply rearrange the letters in your CSS. Instead of typing “abc”, try typing “bca”.

To create a new row, create a new set of quotes. You can repeat letters to set a sense of proportion. For instance, here we set the first row to “ab” and the second to “cc”, meaning “c” will be twice the width of “a” or “b”.

Each section (a,b,c) is referred to as a “slot”. To create an empty slot, simply use a period: “a.b.c” will create two empty slots in our row. To target a slot for additional styling, you use the slot pseudo element:

#container::slot(c) {background: gray;}

Dig Deeper

As with the previous example, there’s a lot more that can be done here such as setting heights and widths using precise dimensions or percentages. None of it is ready to use in any browser at the moment but you can install a jQuery plugin to test it out! Check out the plugin’s demo pages for some awesome coded examples of how to create any layout you want using the Template Layout Module.

Back to Tables?

The Andrew Tetlaw Sitepoint article that I mentioned before presents one more interesting option for layout.

.nav > ul {
  display: table;
  border-spacing: 0.25em;
}

Interestingly enough, setting the “display” property to “table” allows us to structure our layout as if they were tables. Right away I know this is going to freak a lot of people out. Reverting back to table-based layout!? Are you nuts? The crazy part is though that this is in fact a completely different practice than literally using a table element. Here you’re simply telling the CSS to position elements similarly to how table cells and rows are positioned.

Personally, I still like the new fancy CSS3 methods that we just covered a lot better and really have a hard time imagining this gaining widespread acceptance, but it’s worth checking out and discussing nonetheless. If you’re interested, be sure to check out Tetlaw’s explanation.

Conclusion

The point of this article was to get you thinking about how floats may not necessarily be the best way to structure websites. Though they’re one of the best solutions that we can currently use in live client projects, they represent a fairly sloppy and broken system that is far from ideal.

There are a number of ways that you can address the downfalls of floats. For now, you could check out “display: inline-block” as one option or even look into “display: table” if you’re particularly brave.

The wizards that make all this technology work recognize that the system is broken and are hard at work solving the problems with layout modules that may prove extremely useful in the future. Expect to hear a lot more on the Flexbox and Template Layout modules in the future. Who knows, one or both of these could be the standard way that future developers create web layouts!

Leave a comment and let us know your thoughts on all this. Do you think floats represent a flawed layout system? Do any of the proposed layout modules seem like a solid fix for these issues?

One of the biggest problems with all the new CSS3 properties is that most of them have multiple browser-specific implementations. This means when you want a simple shadow, you have to remember quite a bit of code to make it compatible across as many browsers as possible.

To help you out with this task, a bunch of intrepid coders have created free interactive tools that provide simple user interfaces that spit out all the code you need with a fully customizable end result. Below you’ll find over twenty of these CSS3 generators.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

CSS3 Generator

Definitely one of the most popular options. All the effects are fully customizable and you can choose from all the popular CSS3 properties.

CSS3 Please

Another really popular option, this one allows you to edit the code just like you’d see it in a code editor. The changes are reflected on a graphic in the upper right.

CSS3 Click Chart by Impressive Webs

Not very customizable (just click to see the code) but probably the most thorough on the list as far as number of effects covered.

CSS-Tricks Button Maker

An excellent little button maker from Internet wiz Chris Coyier. Just use the sliders to change the properties.

Border Radius

One of the more elegant options for setting a border radius. Just type in a single number and it does the rest.

Font Squirrel @Font-Face Kit Generator

This is by far my favorite tool on the list. Upload a font and this will spit out everything you need to embed it into a website including HTML, CSS and multiple font file formats. You’ll definitely want to bookmark this one!

Westciv

Westciv has a number of useful CSS3 generators that are both free and easy to use. Check them out below.

• CSS3 Gradients
• CSS3 Text Shadows
• CSS3 Transforms
• CSS3 Text Stroke
• CSS3 Radial Gradients
• CSS3 Box Shadows

CSS3 Gradient Generator

Use a few simple dropdowns and a slider help create complex gradients.

Widgetpad CSS3 Generator

Another one with several properties and effects to choose from.

Border Image

Border-image is a rather complicated new CSS3 feature. Figure out how it all works using this tool.

Dry Icons Button Generator

An awesome button generator with a ton of options.

CSS Corners

This one currently handles gradients and rounded corners and promises more options on the way soon.

CSS3 Maker

Super slick and easy to use, this one handles quite a few CSS tricks.

CSS3 Rounded Corner Generator

Yet another basic rounded corner generator.

CSS3 Menu Generator

This one is actually a full-fledged downloadable application for creating complex CSS3 menus with rounded corners, gradients, and more.

CSS3 Column Generator

One of the few column generators I could find (CSS3 Generator also does columns). This one isn’t in English but is still easy enough to figure out and the code it spits out is of course fully readable.

Quick 3-Color CSS3 Gradient Generator

One last CSS gradients generator, just in case the 10 or so above don’t satisfy your gradient craving.

Conclusion

I hope the tools above help you learn to be a CSS3 master. For even more CSS3 goodness check out CSS-Infos and CSS3 Pie. CSS-Infos is a huge list of CSS properties along with what browsers support them and CSS3 Pie is a resource for getting good old IE to display CSS3 properly.

Leave a comment below and let us know what your favorite CSS generators are and if we left any out.

Warning: These animations are pretty browser specific, so if you’re surfing in IE6, it’s time to stop watching Saved By The Bell, ditch the dial-up connection and download a modern browser.

Rotating Polaroids

This tutorial shows you how to create an amazing, animated pile of photographs utilizing a ton of new CSS3 commands. We’re off to a strong start, this one will be hard to beat.

Click to View Demo

The Matrix

Follow the white rabbit.. err I mean, check out this awesome Matrix animation. Not quite true to the movie (the individual characters don’t change), but impressive nonetheless. Seeing as how The Matrix is one of the best sci-fi flicks of all time (I’m talking about the first movie, not those other two disasters), this one is going to jump to the top of our list and no doubt stay there for a while until a worthy competitor can be found.

Click to View Demo

Trippy Spinning Column of Fun

This crazy animation features a spinning column made up of rotating rows of colored boxes and text. The overall effect is crazy cool and undeniably dizzying. This one is a little too cracked out to steal the thunder from The Matrix though, the champion remains.
Tip: For an increased chance of motion sickness, scroll up and down and shake your head back and forth while watching the animation (we are in no way responsible for any ruined hardware you possess after tossing your lunch all over your desk).

Click to View Demo

DJ Hero

This tutorial combines CSS3 and jQuery to create spinning records. Using the on-screen controls, you can control the speed of the records or simply grab a record with your mouse to lay down some groovy scratches.
Virtual turntables on a vintage wooden background? This could be a pretty major competitor folks, this debate is heating up. Go ahead, click it. You know you want to play.

Click to View Demo

3D Animated Cube

This one lets you use the arrow keys to control the rotation of a 3D cube. At first I thought it was pretty lame but then I realized you could hold down the arrow keys to make it freak out and go into turbo spinning death mode, which obviously redeemed it a bit. Mega style points for including Sonic The Hedgehog as well.

Click to View Demo

Rocket Ship

A rocket ship no doubt brought to you by the wonders of MS-Paint flies across the sky with breathtaking speed. Sort of… In reality it sort of floats along, transported by a strange, rectangular forcefield with dotted lines. About halfway through the animation the rocket practically disappears for no apparent reason so it’s obviously a top-secret high-tech stealth rocket with armed a cloaking device to ward off invading Vulcan destroyers.
Not exactly a serious competitor. In fact, why did I even show this to you? And even more pertinent, is there such a thing as a Vulcan destroyer or did I just make that up?

Click to View Demo

Weather

Snow

Leaves

Let’s knock all the weather stuff out in one go shall we? Where there is cheesy animation, there also is the inevitable falling snow, leaves, rain, etc. Don’t get me wrong, these are pretty cool and could lead to some really excellent seasonal website modifications. However, these particular executions, though well made, aren’t that creative with context. Let me know if you create a website that has giant hailstones destroying all the content on the page, now that would be something.

Click to View Snow Demo
Click to View Leaves Demo

Cover Flow

This animation mimics Apple’s cover flow using a hybrid CSS/jQuery technique like the DJ Hero example above. By imitating Apple this one performs well in both the cool and nerdy categories and also does a bang up job at being innovative (this is the only CSS3 Cover Flow fake I could find). We’ve got yet another contender on our hands.

Click to View Demo

Star Wars Crawl

That’s it, game over. I’d like to thank the other entrants for playing, but this one takes the prize. It’s the opening scene from freakin’ Star Wars for crying out loud… in HTML and CSS (that’s live text you’re looking at fool). I ask you, what better use of CSS animation could there possibly be? I submit that there is none. Trust me, show this to your nerdiest friend and he will magically transform into a 4 year old on Christmas morning.

Click to the Epic View Demo
(Safari + Snow Leopard Required)

Conclusion

For those of you that think this contest was rigged, you’re right. I made up the contest idea after finding the Star Wars example just to highlight how much everything else paled by comparison. The real intent of the article is to show you that there’s no end to the cool stuff you can build with the relatively simple animation features built into CSS3.
Use the comments below to let us know which was your favorite. Also, if you know of any other examples, please share them!

Since it’s first release in November 2004, Firefox has come a phenomenally long way. Market share has sky rocketed, and a huge community has built up offering extensions and add on software. The third incarnation of Firefox offers something for web developers as well as users, continuing along their previous path of adhering to web standards and supporting the latest technologies.

This article will outline how important it is that your site is suitable for Firefox users, and explain the new features which the browser makes available to designers.

The following chart shows the percentage of users visiting Design Shack from various browsers. It is plain to see the importance of the site displaying correctly in Firefox and offering a great browsing experience to users of that browser:

The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

View the live examples page

Background Size

Before CSS3, background size was determined by the actual size of the image used. It will be possible with the next CSS revision to specify in terms of percentage or pixels how large a background image should be. This will allow you to re-use images in several different contexts and also expand a background to fill an area more accurately.

The following is a simple example of resizing the Design Shack logo as a background in the top left hand area of a div:

1
2
3
4
5
6
7
8
9
10

.backgroundsize {
background: url(http://www.designshack.net/images/logo.gif);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

Multiple Backgrounds

The new ability to use multiple backgrounds is a great time saver, allowing you to achieve effects which previously required more than one div. Whether it will be possible to combine this with background-size will be interesting to see.

The example below uses one background for the top border, one repeated vertically for the left and right borders and a third at the bottom.

1
2
3
4
5
6
7
8

.multiplebackgrounds { 
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

Background Origin

CSS3 allows you to specify how the position of a background is calculated. The background-origin property can be set to start positioning from either the border, padding, or content. This allows for greater flexibility in terms of placing a background image.

In conclusion…

There are a whole new variety of background options available with CSS3. As with all the other modules covered in this introductory series, it leads to greater flexibility and makes it much easier to recreate previously complex effects. Whilst not supported by most browsers as yet, it shouldn’t be too long before you can get creating stunning user interfaces with these new additions.

We really hope that you have enjoyed this series, and we’ll be keeping you up to date on all the latest CSS3 developments as they happen over coming months. Here’s looking forward to the next generation of style sheets!

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

View the live examples page

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

• column-count
• column-width
• column-gap
• column-rule

At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:

1
2
3
4
5
6
7
8

.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Spanning columns

It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:

1
2
3

h2 {
column-span: all
}

Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:

In the meantime

It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.

In conclusion…

Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.

The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers:

View the live examples page

Resizing

The latest version of Safari has a feature which allows resizable text areas. This is a great addition and one I find myself using daily. CSS3 allows you to easily apply this to any element, eventually to become cross-browser compatible. The code is the resize:both; line:

1
2
3
4
5
6

.ui_resizable {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

Box Sizing

The ‘box model’ CSS3 module is one of the more extensive areas, and full information can be found at the official specification. The box sizing aspect allows you to define certain elements to fit an area in a certain way. For example, if you’d like two bordered boxes side by side, it can be achieved through setting box-sizing to ‘border-box’. This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

At present, additional prefixes are required to support this in all browsers – you can see the full list on the example page’s code. Here’s a basic possibility:

1
2
3
4
5

.area {
width: 300px;
border: 10px solid #ddccb5;
height: 60px;
}

1
2
3
4
5
6
7
8
9

.boxes {
box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid #897048;
padding: 2px;
float:left;
}

Outline

Setting an element outline is already available in CSS2, but in CSS3 includes the facility to offset the outline away from the element – by a value you define. It differs from a border in two ways:

• Outlines do not take up space
• Outlines may be non-rectangular

They can be created as follows:

1
2
3
4
5
6
7
8

.ui_outline {
width: 150px; 
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid #897048;
outline-offset: 15px;
}

In conclusion…

These features aren’t revolutionary, and are not likely to cause a stir in the design community. It can’t be denied that they’re useful – in particular giving the reader the ability to resize elements.

The next article in this series will be looking more in-depth at one much more revolutionary feature of CSS3 – multi column text. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

• Introduction to CSS3 – Part 1: What is it?
• Introduction to CSS3 – Part 2: Borders
• Introduction to CSS3 – Part 3: Text Effects
• Introduction to CSS3 – Part 4: User Interface
• Introduction to CSS3 – Part 5: Multiple Columns
• Introduction to CSS3 – Part 6: Backgrounds