Mindfly Website Design Studio

I was recently assigned a project for a client who needed a very low-budget, no frills, *simple website that had little content. Not used to having a practically non-existent budget, I decided to view this project as a great opportunity to try out some new CSS3 goodness. Granted, most people viewing this site are probably not going to see the majority of the work I put into it, but I know it's there and so do Webkit-based users (Safari & Chrome), and, to some extent, so do Mozilla users. And everyone else, well, who cares. Onward and upward, I say.

We've been using some CSS3 styles here at Mindfly for awhile now, such as border radius and box/text shadows etc. But the new ones for me on this particular project were transitions and transforms, which I applied to the main navigation as seen in the image below. It took a bit of research and a bit of trial and error to get the styles in the right combinations on the right element to achieve what I was going for, but success I did have.

The Tilt

My first goal was to rotate the list items so the appeared to be randomly tilted. Safari 4 and Firefox 3.5+ both have support for the :nth-child pseudo-selector. With this you can systematically target sibling elements that are even, odd, or much more. 

/* By default, I tilted all list items by -8 degrees */
.nav li {
transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg); }

/* Rotate all even images 6 degrees */
.nav li:nth-child(even) {
transform: rotate(6deg);
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg); }

/* Rotate every third item by -2 degrees */
.nav li:nth-child(3n) {
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg); }

/* Rotate every fourth item by 10 degrees */
.nav li:nth-child(4n) {
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg); }

You can read more about :nth-child psuedo selectors here.

The Hover

For the hover effect, I wanted the tabs to slide out and away from the main content area. For that I once again used the transform property I used above to translate the elements 10px on the x-axis.

/* Pops the list item out to the right by 10px on hover */
.nav li a:hover {
transform: translateX(10px);
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px); }

And finally, to add a little sexy-smoothness to the hover style as it slides out, I added a transition. This only works in Webkit browsers for now, but is supposed to be making an appearance in Firefox 3.7 and maybe the next version major version of Opera, as well, but who really knows with them sometimes.

/* Smooths out the transition (Webkit only) */
.nav li a {
transition: all 0.25s ease-out;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out; }

As you can see, I planned ahead for the changes to Opera and Firefox 3.7, by adding browser-specific lingo in, so once those browser support this property, I don't have to remember to go back and add it in.

The Final Details

/* Rounds the right-hand corners and adds a drop shadow */
.nav li a {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }

And with this little bit of CSS3 magic, I have a sexy, sweet menu and an otherwise plain-jane site.

View the demo here. Obviously, for the full effect it should be viewed in either Safari or Chrome. However, each browser has it's own unique experience, so it's worth looking at in Firefox, Opera, and even Internet Explorer 8!

*The word 'simple' is generally not allowed here at Mindfly and will earn you from 1 - 10 pushups because nothing is ever as simple as people claim it will be.

My Tetris skills gained as a youth have proved fairly useful in my life (unlike doing advanced math without a calculator, which is a situation I've yet to find myself in), allowing me among other things to do the young adult game of "how do I fit my furniture in my tiny apartment?" and the even more exciting game of "how do I fit my furniture in my friend's van?" Also, on the day that the Earth's survival depends on filling up rows of blocks in a small rectangular space, won't the military look silly when they have to ask me for my help?

Sadly, Tetris is of almost no use in helping fit columns of content next to each other in web design with CSS. For whatever reason the early masters of making pages pretty failed to consider how often there's a good reason to have multiple columns of text, images, or squirrels horizontally stacked. So for more than a decade we've labored with using tricks like floats and clearing them to make two, three, or more column designs a reality.

I hate relying on floats. I've talked about this. They're messy, and create all sorts of potential headaches. Fortunately, now we have better solutions, such as using display:inline-block to do what previously seemed impossible: have a block of content... that displays inline.

I know. It's amazing. I'll let you wipe your tears of joy away.

This is a topic I've discussed in the past, but there's been little annoyances that have slowed down my adoption of this technique into being used in all my designs, despite my loathing for float and all it's abuses. Here are inline-block's problems:

1. IE6 and IE7 don't support it.

2. It leaves a space between the inline-block elements.

Fortunately, as I've mentioned prior, #1 is easily correctable. Go read up here to see how to make IE6/7 play nice.

Problem #2 seemed solved when I found that word-spacing impacted the space between inline-blocks. Unfortunately, I learned that Webkit is something of a jerk when it comes to this. For whatever reason, they decided not to allow word-spacing to affect inline-block spaces, resulting in a situation where most of your browsers played along, but it was Safari and Chrome that were causing browser compatibility issues. You can see what I'm talking about here (check it in any other major browser, then in Safari or Chrome.)

I know, right?

I was working on writing a stern letter to their mothers when Jeff Moyes commented in my blog on a solution here. I'd like to thank Jeff. I'd also like to get the word out. You can use inline-block safely! Go, be free!

Here's the solution, and it's very simple:

1. On the container holding your inline-block elements, give it font-size: 0.

2. Inside the inline-blocks, reset your font-size to its appropriate amount (warning, ems won't work, since 1em of 0 is still 0, so it needs to be reset in pixels.)

It actually is just that easy. I've got a new test page here that'll show correctly in all your browsers (well, this one doesn't include the IE6/7 fix, but that's compatible with this solution). It's annoying that we have to resort to this trick (Webkit guys, please fix, kthx), but at least we HAVE a solution.

So go out my young padawans, and spread the gospel of inline-block. And if you have a cleaner solution to that little gutter problem, let me know, ok?