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.

I am a huge fan of keyboard shortcuts. Huge. Anything to make my workflow more efficient. Actually, it's not even that, if I'm totally honest. It's more like I'm too lazy to pick up my hand to grab the mouse and try to recall under which menu > submenu the command I am looking for lies, which just happens to make for a more efficient workflow. Nice how laziness pans out for once.

So here some I find myself using often (I should note that these are PC shortcuts, since that's what we use here at Mindfly. For Mac users Ctrl = Cmd and Alt = Opt):

1. Duplicating Layers There are several ways to duplicat layers. I generally use all of them depending on what I'm doing.

1. Hold down and drag the layer up (or down) in the layers palette
2. Drag the layer to the the New Layer button on the bottom of the layers palette
3. Press the +
4. With the layer selected in the layers palette, press +
5. Right-click on a layer and select Duplicate Layer from the menu

2. Free Transform + . Once you're in the Free Transform mode you can Right-click and access some other options such as skew, warp, perspective, flip etc.

3. Inversing a selection + + . I find this particularly helpful when I'm cutting out objects from their background.

4. Changing brush sizes With the brush too selected you can use + to decrease by 10px or + to increase by 10px. Adding to that combination will increase or decrease the brush softness.

5. + will allow you to flip through all your open Photoshop documents with ease.