All geek questions in one place

Create a clean CSS dock

After playing with CSS 3, I had the crazy idea of ​​making an OS X-style docking station (a DIV container with elements inside it, which, using a CSS: hover subclass, increases the size of the mouseover). However, I encounter some strange effects in its implementation. So far this is what I have tried:

the 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 in http://s.supuhstar.operaunite.com/s/content/testAnims.htm (died with Opera Unite) if you want to see what I have so far.

Lack of functionality

Unexpected effects include:

  • Inability to place the dock element at the bottom of the dockHolder element
  • dockItem element that does not expand in width with its child image Elements
  • dockItem and dock will not be located inside the dockHolder container with CSS (checked margin:auto; dockHolder box-pack:center; dockHolder box-align:center; etc.); only the HTML <center> tag works
  • In Opera and Firefox (I gave up IE) dockItem are extremely wide

Intended effects that are absent include:

  • dockItem remains within the dock element until resized, and at this time they increase in proportion to the size of the dockHolder element, but the dock element remains the same size
  • The dock element is constantly wide enough to contain all the dockItem inside it and never wider than the width of the combined width of all dockItem and their fields.

Question

Does anyone have a solution that eliminates unexpected effects and implements the missing intended effects?

Final implementation

Below is the code for my final decision:

 <!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 (may be deprecated): http://admin.s.supuhstar.operaunite.com/s/content/testDock.html (died with Opera Unite)

+6
source share
3 answers

Like 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/

+6
source
  • For me, the problem is that you do not specify a fixed width size. My idea is to cancel the dockItem class, you don't need it. Play with the img CSS class directly.
  • To center your element, use "margin: auto 0px auto 0px;".
  • Use reset first, this will help you do it right: http://html5doctor.com/html-5-reset-stylesheet/#comment-18168
  • you need to display: block; and float: left; than display: built-in unit;
  • you need <ul> and <li> to help you.
0
source

Use javascript and css to create icons before and after the overhanging icon a little more for a smoother animation;)

0
source

Source: https://habr.com/ru/post/899842/

More articles:


All Articles