Making a Pure CSS Dock
After playing with CSS 3, I had the crazy idea to make an OS X-style dock with it (a DIV container with elements inside it, which, using the CSS :hover subclass, increase in size upon mouseover). However, I'm running into some strange effects when implementing it. So far, this is what I've tried:
Code
<html>
<head>
<style>
body{
margin:0;
}
.dockHolder{
width:100%;
position:absolute;
text-align:center;
display:block;
bottom:0;
}
.dock{
margin-left:auto;
margin-right:auto;
bottom:0;
text-align:center;
}
.dockItem{
height:50%;
display:inline-block;
position:relative;
bottom:0;
vertical-align:bottom;
text-align:center;
transition-property:width, height;
-o-transition-property:width, height;
-moz-transition-property:width, height;
-webkit-transition-property:width, height;
transition-duration:.25s;
-o-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-timing-function:linear;
-o-transition-timing-function:linear;
-moz-transition-timing-function:linear;
-webkit-transition-timing-function:linear;
}
.dockItem:hover{
height:100%;
width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
<div class="dock" style="background-color:lightgray;">
<center>
<div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
<div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
</center>
</div>
</div>
</body>
</html>
My test page is at http://s.supuhstar.operaunite.com/s/content/testAnims.htm(died with Opera Unite) if you wanna see what I have so far.
Missing functionality
Unexpected effects include:
- Inability to place the
dockelement at the bottom of thedockHolderelement dockItemelement not expanding width-wise along with its child imagedockItemanddockelements will not center inside thedockHoldercontainer with CSS (triedmargin:auto;,box-pack:center;,box-align:center;, etc.); only the<center>HTML tag works- In Opera and Firefox (I've given up on IE),
dockItems are extremely wide
Intended effects that are not present include:
dockItems stay within thedockelement until resizing, at which time they increase proportionally to the size of thedockHolderelement, but thedockelement stays the same size- The
dockelement is constantly only wide enough to contain all thedockItems within it, and never wider not shorter than the combined widths of alldockItems and their margins.
Question
Does anyone have a solution that will fix the unexpected effects andor implement the absent intended effects?
Final implementation
Below is the code of my final solution:
<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
margin:0;
}
.dockHolder {
position: fixed;
text-align: center;
bottom: 0;
left: 0;
right: 0;
height: 128px;
line-height: 128px;
}
.dock {
background:#CCCCCC;
background:
-o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
background:
-moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
background:
-webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
border: 1px solid gray;
max-width:100%;
vertical-align: bottom;
line-height: 1em;
padding: 0 8px;
border-radius: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dockItem {
display: inline;
height: 50%;
vertical-align: bottom;
transition-property:width, height;
-o-transition-property:width, height;
-ms-transition-property:width, height;
-moz-transition-property:width, height;
-webkit-transition-property:width, height;
transition-duration:.25s;
-o-transition-duration:.25s;
-ms-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
height: 100%;
}
.dockItem:active {
vertical-align:top;
height:95%
}
</style>
</head>
<body>
<div class="dockHolder" style="height:128px;line-height:128px;">
<span class="dock">
<img class="dockItem" src="pony.png"/>
<img class="dockItem" src="bhs256.png"/>
<img class="dockItem" src="mcgrass.png"/>
</span>
</div>
</body>
</html>
Working example (might go out of date): http://admin.s.supuhstar.operaunite.com/s/content/testDock.html (died with Opera Unite)
Answer
How's this?
HTML:
<div class="dockbg"></div>
<div class="dock">
<img src="foo.png">
<img src="bar.png">
</div>
CSS:
.dockbg {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 35px;
background: #bbb;
}
.dock {
position: fixed;
text-align: center;
bottom: 5px;
left: 0;
right: 0;
height: 100px;
line-height: 100px;
}
.dock img {
display: inline-block;
vertical-align: bottom;
height: 50%;
padding: 0 5px;
/* + your animation properties */
}
.dock img:hover {
height: 100%;
}
Live demo: http://jsfiddle.net/simevidas/QM7M7/3/show/