SPONSORS

How To Create Customizable Mac Dock With CSS3 Only

written by Simone D'Amico

The Dock is the bar of icons that sits at the bottom of your screen. It provides easy access to some of the Apple applications on your Mac (such as Mail, Safari, iTunes, Address Book, and QuickTime Player).

In this post I will show you how to create a customizable Mac like Dockbar using only CSS3.

jquery image gallery

TN3 Gallery is a full fledged HTML based customizable jQuery image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery.

Preview

Take a sneak peak at what we will be creating:

The mouse over animations are implemented only with CSS3 transitions without the help of Javascript. The dockbar also supports themes, so you can customize the dock with your personal theme very quick. Package includes 4 free themes, but you can create infinite number of them.

There are no limits how many icons you can put in this dock. The width extends automatically according on the number of links.

The dockbar is 100% compatible with:

  • - Safari
  • - Chrome
  • - Opera
  • - Firefox 3.7+

In Firefox 3.6 and lower and Internet Explorer it degrades well and only transitions don’t work because they aren’t supported in this browsers.

Let’s start working on our dockbar.

Create the shelf in Photoshop

First, we have to create the shelf in Photoshop. If you want to learn how to do this, you should see this video-tutorial. The final shelf for this tutorial is:

Now we have to cut out the corners, the separator and the background of the shelf from the image.

So, at the end we will have 4 images:

  • - left_shelf.png
  • - right_shelf.png
  • - shelf.png
  • - separator.png

For the shelf backgound, I have decided to cut out 1px of width because this background can be repeated with CSS rules, and the page will load faster.

When the crop is completed, it’s time to create a theme.default folder into the root of our project in which we will save these images.

HTML Code

The page where we will insert the dockbar is very simple to create. I have used HTML5 for it but you can use the DOCTYPE you prefer. Between the <head> tags, we have to load the CSS files and the style of the page. For my page the code inside the head is the following:

<style type="text/css">
* { margin:0; padding:0;}
body {
 background: url('space.jpg') no-repeat center top;
 text-align: center;
}
</style>

<link rel="stylesheet" type="text/css" href="dashboard.css" media="all" />
<link rel="stylesheet" type="text/css" href="theme.default/default.css" media="all" />

The first style is for the page; a simple reset rule and the background of the page. The other two codelines load the style and the theme of the dock. As I said earlier, we can change easily the theme of the dashboard only by changing the CSS filename in the head.

The html code for the dock is:

<div id="dashboard">
 <div id="left_shelf"></div>
 <div id="shelf">
  <ul id="menu_dashboard">
   <li><a href="#"><img src="icons/apple.png" alt="Apple" /></a></li>
   <li><a href="#"><img src="icons/home.png" alt="Home" /></a></li>
   <li><a href="#"><img src="icons/safari.png" alt="Safari" /></a></li>
   <li><a href="#"><img src="icons/tools.png" alt="Tools" /></a></li>
   <li class="separator">&nbsp;</li>
   <li><a href="#"><img src="icons/harddrive.png" alt="harddrive" /></a></li>
  </ul>
 </div>
 <div id="right_shelf"></div>
</div>

The dashboard is created with three divs:

  • - #left_shelf and #right_shelf in which we will load the corners of the dock
  • - #shelf that is the real content box

CSS code

The first CSS file we need is dashboard.css. This is the stylesheet in which we will create the structure of the dashboard.

#dashboard {
 bottom: 0;
 position: absolute;
 overflow: hidden;
}

#shelf, #left_shelf, #right_shelf {
 float:left;
 height: 150px;
}

#left_shelf, #right_shelf {
 width: 30px;
}

#menu_dashboard {
 display: inline-block;
 width: auto;
 margin: 0px;
 padding: 0px;
 list-style: none;
}

#menu_dashboard li {
 width: auto;
 height: auto;
 display: inline-block;
 bottom: 0;
 vertical-align: bottom;
}

#menu_dashboard li.separator {
 width: 50px;
 height: 150px;
}

#menu_dashboard li a {
 display: block;
 height: 100px;
 width: 100px;
 position: relative;
}

#menu_dashboard li a:hover {
 width: 150px;
 height: 150px;
}

#menu_dashboard li a img {
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 border: none;
}

Then we have to put the dashboard at the bottom of the page with position:absolute, and then we set up the size and the styles of the elements. I have decited to use 100px x 100px icons that increase in size when the mouse is over the link.

Unfortunately the dock isn’t center-aligned because the position absolute doesn’t allow the box to be centered. We will resolve the problem at the end of the post.

Before we close the file, we need to add the transitions when the mouse is over the links. The cross-over code is the following:

#menu_dashboard li a {
 ...

 -webkit-transition-property: width, height;
 -webkit-transition-duration: 0.5s;
 -o-transition-property: width, height;
 -o-transition-duration: 0.5s;
 -moz-transition-property: width, height;
 -moz-transition-duration: 0.5s;
}

CSS code for theme

Inside theme.default folder we will create a CSS file called default.css. In this file we will put the code for the shelf background.

#left_shelf { background: url('left_shelf.png') no-repeat bottom; }
#right_shelf { background: url('right_shelf.png') no-repeat bottom; }
#shelf { background: url('shelf.png') repeat-x bottom; }

li.separator { background: url('separator.png') no-repeat bottom; }

We need this file inside the theme folder so we can customize the dashboard with other ones.

Center the dashboard

As I said before, unfortunately when we using absolute positioning in CSS we cannot align centrally the box when its width is not known, so we need the help of Javascript. In this script I use jQuery but you can use whatever you want. The code is the following:

jQuery.fn.center = function () {
 this.css("left", ( $(window).width() - this.width() ) / 2 + $(window).scrollLeft() + "px");
 return this;
}

//center the box when the page is loaded
$(function(){
 $('#dashboard').center();
});

//center the box when the window is resized
$(window).resize(function() {
 $('#dashboard').center();
});

I created before a very simple plugin for jQuery called center and then I have applied this plugin on dashboard when the page is loaded or resized.

Demos

Package contains default theme and other three themes that you can use in your projects. You can test it and see how they look by clicking on the images below:




Download

You can get the entire package on the link below:

download mac dock files

We offer guaranteed success for 642-974 exams with help of latest scjp and JN0-332 practice questions and the exams of pass4sure 70-432 & sat test.

Authored by

Simone D'Amico is a web designer, web developer and blogger from Italy. Check out his portfolio or his personal blog. You can follow him on Twitter.

Enjoyed this story?

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

FOR FURTHER READING:
post_teaser
Useful CSS3 Tutorials and Techniques
post_teaser
The Fashion Runway and Web Design
post_teaser
Typography Design Inspiration – 30 Stunning Examples
post_teaser
20 Websites Using Infographics
post_teaser
15 CSS Frameworks for Responsive Web Design
post_teaser
Showcase of Web Designs with Delicious Typography
7 Comments
ADD COMMENT