This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

Initial commit.

  • Loading branch information...
0 parents commit 3e14ca0931d6260b9d8382867ce0df42f2005f5c michaelhue committed Sep 28, 2011
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.
@@ -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!
@@ -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;
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
Oops, something went wrong.

0 comments on commit 3e14ca0

Please sign in to comment.