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.
