Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit.

  • Loading branch information...
commit 3e14ca0931d6260b9d8382867ce0df42f2005f5c 0 parents
michaelhue authored
21 LICENSE
@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2011 Michael Hüneburg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
49 README.md
@@ -0,0 +1,49 @@
+# CSS Dock (V2)
+
+An experiment mimicking the Dock of OS X using only CSS. Labels, animations, reflections and indicators... it's all there.
+
+## How does it work?
+
+Glad you asked. The dock makes heavy use of the following sweet CSS techniques:
+
+* _Transforms_, _Transitions_ and _Animations_ for the magnification and bouncing effects.
+* `:before` and `:after` pseudo-classes to keep the HTML markup clean and display the status indicator.
+* `:target` pseudo class to determine which item is active.
+* `-webkit-box-reflect` for the reflection of the icons.
+
+## Details, give me details!
+
+Alright, let's walk through this together. The dock is basically an unsorted list with each list item representing one icon. Every item and the list itself gets the `display: inline-block;` property to act like an inline element while preserving their block capabilities. This allows us to use `text-align: center;` in order to keep the items centered and `vertical-align: baseline;` to keep all items at the bottom at any time. This is important so the other items won't "lift off" when one them is enlarged.
+
+On mouseover the corresponding image is enlarged while a transition applied to `width` and `height` ensures a smooth animation. On mouse-out the image transitions back to its original size which results in a nice little magnification effect.
+
+The icon reflection only works in WebKit because of it's proprietary (but kind of awesome) `-webkit-box-reflect` property. A gradient is used as a mask in order to cut off the status indicator, so it won't be part of the reflection.
+
+The bouncing effect is a simple CSS animation which uses the `transform` property to move the item a few pixels to the top. The status indicator is an element generated in CSS and inserted after the active item. But how do we know which item is active? This is where it gets a bit tricky.
+
+CSS gives us an underestimated pseudo-class named `:target`. You all know how we can use URIs to refer to an element within the page, right? An example: the link `<a href="#about">` brings us to the element with the `id` _about_. The bit after `#` is called _fragment identifier_ which is represented by the _id_ attribute on elements. As soon as you click on this link, the _about_ element becomes the current target and CSS applies the `:target` pseudo-class to it.
+
+So when you click on an item in the dock you actually click on a link that refers to it's parent `li` element, which in turn triggers the bounce animation using `:target`, repeats it three times and creates the status indicator below the icon.
+
+And that's all, folks. Be sure to check the source file, lots of comments in there to get you started. And it's actually not that much code.
+
+## But is it actually... you know, useful?
+
+Probably not, at least not without modifications. This is just a quick demonstration to show what's possible using modern web technologies. Use this experiment as a starting point and go bat-shit crazy. I highly encourage it!
+
+I'd love to see what you come up with so please shoot me a line in case you did indeed go bat-shit crazy.
+
+## How about compatibility?
+
+You love to be the party pooper, don't you? Just kidding. The dock works best in current WebKit browsers (Safari and Chrome) but the good news is: it degrades quite gracefully. So while you won't get all effects in all browsers, the experience won't be broken either (except for IE, of course). A quick overview:
+
+* Chrome 12 (Full Support)
+* Safari 5 (Full Support)
+* Firefox 5 (Advanced Support; no reflections)
+* Opera 11 (Basic Support; no reflections and animations)
+
+## Anything else?
+
+Why yes! Thanks a bunch to [Iconsutra](http://iconsutra.com) for letting me use his wonderful MobileMe icon set and also to [Wolfgang Bartelme](http://bartelme.at) who allowed me to use his gorgeous [Flow Wallpaper](http://bartelme.at/journal/archive/flow_wallpaper).
+
+And not to forget all of you guys who gave me feedback and spread the word. Thank you!
65 example/css/example.css
@@ -0,0 +1,65 @@
+body {
+ margin: 0;
+ padding: 0;
+ font: normal 14px/1.5 "PT Sans", Helvetica, Arial, sans-serif;
+ background: rgb(30, 30, 30);
+ color: rgb(220, 220, 220);
+}
+
+.wrapper {
+ position: absolute;
+ top: 48%;
+ left: 50%;
+ width: 660px;
+ height: 340px;
+ margin: -190px 0 0 -330px;
+}
+
+.example {
+ position: relative;
+ width: 660px;
+ height: 340px;
+ overflow: hidden;
+ background: rgb(15, 15, 15) url(../images/bg.jpg) no-repeat center bottom;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ -moz-box-shadow: 0 1px 10px rgb(10, 10, 10);
+ -webkit-box-shadow: 0 1px 10px rgb(10, 10, 10);
+ box-shadow: 0 1px 10px rgb(10, 10, 10);
+}
+
+h1 {
+ margin-top: 1.5em;
+ color: rgba(255, 255, 255, .9);
+ line-height: 1;
+ font-size: 70px;
+ text-align: center;
+ font-weight: bold;
+ text-shadow: 0px 1px 5px rgb(255, 160, 55), 0px 1px 15px rgb(255, 160, 55);
+ cursor: default;
+}
+
+h1 em {
+ display: inline-block;
+ font-size: .29em;
+ font-style: normal;
+ vertical-align: top;
+ margin-left: -.4em;
+ padding-top: .46em;
+}
+
+footer {
+ position: absolute;
+ bottom: -3em;
+ left: 0;
+ right: 0;
+ font-size: 12px;
+ text-align: center;
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
+ color: rgb(160, 160, 160);
+}
+
+footer a {
+ color: inherit;
+}
BIN  example/images/bg.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example/images/icon-addressbook.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example/images/icon-ical.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example/images/icon-idisk.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example/images/icon-iphoto.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  example/images/icon-mail.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 example/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>CSS Dock (V2)</title>
+
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:regular,bold&amp;v1" />
+ <link rel="stylesheet" href="css/example.css" />
+ <link rel="stylesheet" href="../source/dock.css" />
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ <!--[if lt IE 8]>
+ <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
+ <![endif]-->
+</head>
+<body>
+ <div class="wrapper">
+ <div class="example">
+ <h1>CSS Dock <em>V2</em></h1>
+
+ <!-- Begin: CSS Dock Code -->
+ <div class="dock">
+ <ul>
+ <li id="mail">
+ <a href="#mail">
+ <em><span>Mail</span></em>
+ <img src="images/icon-mail.png" alt="Mail" />
+ </a>
+ </li>
+ <li id="ical">
+ <a href="#ical">
+ <em><span>iCal</span></em>
+ <img src="images/icon-ical.png" alt="iCal" />
+ </a>
+ </li>
+ <li id="addressbook">
+ <a href="#addressbook">
+ <em><span>Address Book</span></em>
+ <img src="images/icon-addressbook.png" alt="Address Book" />
+ </a>
+ </li>
+ <li id="iphoto">
+ <a href="#iphoto">
+ <em><span>iPhoto</span></em>
+ <img src="images/icon-iphoto.png" alt="iPhoto" />
+ </a>
+ </li>
+ <li id="idisk">
+ <a href="#idisk">
+ <em><span>iDisk</span></em>
+ <img src="images/icon-idisk.png" alt="iDisk" />
+ </a>
+ </li>
+ </ul>
+ </div>
+ <!-- End: CSS Dock Code -->
+ </div>
+
+ <footer>
+ An experiment by <a href="http://michaelhue.com">michaelhue</a> – Icons by <a href="http://iconsutra.com">Iconsutra</a> – Background by <a href="http://bartelme.at">Wolfgang Bartelme</a>
+ </footer>
+ </div>
+</body>
+</html>
205 source/dock.css
@@ -0,0 +1,205 @@
+/* --------------------------------------------
+CSS Dock
+
+Version: 2.0
+Author: Michael Hüneburg
+URL: http://michaelhue.com/cssdock
+Copyright: (c)2011 by Michael Hüneburg
+License: MIT License (see LICENSE file)
+----------------------------------------------- */
+
+/* @group Animation */
+/* Defines the bounce animation. Note that only the up motion is defined as the down motion
+is created automatically using `animation-direction: alternate;`. */
+@-webkit-keyframes bounce {
+ 0% { -webkit-transform: translateY(0); }
+ 100% { -webkit-transform: translateY(-20px); }
+}
+
+@-moz-keyframes bounce {
+ 0% { -moz-transform: translateY(0); }
+ 100% { -moz-transform: translateY(-20px); }
+}
+/* @end */
+
+/* @group Dock */
+.dock {
+ position: absolute;
+ bottom: 0;
+ z-index: 10;
+ width: 100%;
+ text-align: center;
+ font: normal 14px/1 'Lucida Grande', Arial, sans-serif;
+}
+
+.dock ul {
+ position: relative;
+ display: inline-block;
+ padding: 0 5px;
+ margin: 0;
+ background: url(images/dock-m.png) repeat-x bottom;
+}
+
+/* Creates the left and right end caps of the dock. You may not need these
+when creating your own dock. */
+.dock ul:before, .dock ul:after {
+ content: " ";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 31px;
+}
+
+.dock ul:before {
+ left: -31px;
+ background: url(images/dock-l.png) no-repeat left bottom;
+}
+
+.dock ul:after {
+ right: -31px;
+ background: url(images/dock-r.png) no-repeat right bottom;
+}
+/* @end */
+
+/* @group Items */
+/* Defines a dock item. Note the `-webkit-box-reflect` property which creates a nice
+reflection below the item. The gradient is a mask in order to exlcude the status
+indicator from the reflection. */
+.dock li {
+ display: inline-block;
+ position: relative;
+ margin: 0 1px;
+ margin-bottom: 15px;
+ vertical-align: baseline;
+ -webkit-box-reflect: below -16px -webkit-gradient(
+ linear, left top, left bottom,
+ from(transparent),
+ color-stop(91%, rgba(255, 255, 255, .1)),
+ color-stop(91.01%, transparent),
+ to(transparent)
+ );
+}
+
+.dock a {
+ display: inline-block;
+ cursor: default;
+ outline: none;
+}
+/* Applies the bounce animation to the targeted dock item. */
+.dock li:target a {
+ -webkit-animation: bounce .3s 6 alternate ease-out;
+ -moz-animation: bounce .3s 6 alternate ease-out;
+}
+
+/* Generates the status indicator. Looks complex but most of this stuff is just
+repetition with different vendor prefixes. Isn't it fun to write everything
+three times? *sigh* */
+.dock li:after {
+ content: " ";
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ width: 5px;
+ height: 5px;
+ opacity: 0;
+ visibility: hidden;
+ background-color: rgba(255, 255, 255, .8);
+ margin-left: -2px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ -o-border-radius: 5px;
+ border-radius: 5px;
+ -webkit-box-shadow:
+ inset 0 1px 3px rgba(75, 255, 255, .4),
+ 0 0 4px rgba(75, 255, 255, .5),
+ 0 -1px 7px rgb(75, 255, 255);
+ -moz-box-shadow:
+ inset 0 1px 3px rgba(75, 255, 255, .4),
+ 0 0 4px rgba(75, 255, 255, .5),
+ 0 -1px 7px rgb(75, 255, 255);
+ box-shadow:
+ inset 0 1px 3px rgba(75, 255, 255, .4),
+ 0 0 4px rgba(75, 255, 255, .5),
+ 0 -1px 7px rgb(75, 255, 255);
+ -webkit-transition: opacity .5s;
+ -moz-transition: opacity .5s;
+ -o-transition: opacity .5s;
+}
+
+/* Displays the status indicator of the targeted dock item. */
+.dock li:target:after {
+ visibility: visible;
+ opacity: 1;
+}
+/* @end */
+
+/* @group Label */
+/* This is just a wrapper in order to center the actual label horizontally. You
+may need to adjust the width negative margin if you have really long labels. */
+.dock em {
+ position: absolute;
+ top: -34px;
+ left: 50%;
+ display: none;
+ width: 150px;
+ margin-left: -75px;
+ text-align: center;
+}
+
+/* Generates the little arrow at the bottom of the label. */
+.dock em:after {
+ content: " ";
+ position: absolute;
+ bottom: -6px;
+ left: 50%;
+ margin-left: -6px;
+ width: 0;
+ height: 0;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-top: 6px solid rgba(0, 0, 0, .6);
+ border-bottom: none;
+}
+
+/* This is the actual label. */
+.dock em span {
+ display: inline-block;
+ padding: 5px 12px;
+ font-size: 14px;
+ font-style: normal;
+ color: #FFF;
+ background: #000;
+ background: rgba(0, 0, 0, .6);
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ -o-border-radius: 12px;
+ border-radius: 12px;
+}
+
+.dock li:hover em {
+ display: block;
+}
+/* @end */
+
+/* @group Icon */
+/* Sets the icons to a smaller width so they can be enlarged and applies
+transitions for a smooth animation. Make sure to adjust the width so it
+matches your images. */
+.dock img {
+ width: 86px;
+ height: auto;
+ border: none;
+ -webkit-transition: width .2s, height .2s;
+ -moz-transition: width .2s, height .2s;
+ -o-transition: width .2s, height .2s;
+}
+
+.dock li:hover img {
+ width: 96px;
+}
+
+.dock li:active img {
+ opacity: .9;
+}
+/* @end */
BIN  source/images/dock-l.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  source/images/dock-m.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  source/images/dock-r.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.