Jul 18
CSS Animations no hace posible programar con CSS un menu dock al estilo MacOS. Aun que solo es posible con el navegador Safari (desde 3+) y el Google Crhome.
Codigo CSS del Menu
1 2 3 4 5 6 7 8 | *{margin:0;padding:0;border:0;outline:0;}a{ text-decoration:none;} .all{margin:20px auto;width:900px;text-align:center;font-family:"Century Gothic";position:relative;} .dock{ display:block; margin-top:50px;} .dock li {display:inline-block;} .dock img {width:86px; opacity: 0.7; -webkit-transition: all 1s ease-in; } .dock span {position:absolute;top:40px;left:0;opacity:0;-webkit-transition:all 1s ease-out;width:100px;} .dock li a:hover img, .dock li a:hover span{width:114px;opacity:1; margin-top:20px; vertical-align: bottom;} .dock li a:hover span{left:45%;} |
Todo está en la propiedad -webkit-transition. y all que durará 1 segundo con el método ease-in. Y al pasar el mouse el elemento cambiará la opacidad, que -webkit-transition aplico en la propiedad anterior y que tiene en el :hover.
Codigo HTML del Menu
1 2 3 4 5 6 7 8 9 10 | <div class="all"> <h1>Menu Dock MacOS solo con CSS Animations</h1> <ul class="dock"> <li><a href="#"><img src="z.jpg" alt="Imagen" /><span>Z - Letra zeta</span></a></li> <li><a href="#"><img src="a.jpg" alt="Imagen" /><span>A - Letra a</span></a></li> <li><a href="#"><img src="c.jpg" alt="Imagen" /><span>C - Letra ce</span></a></li> <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li> <li><a href="#"><img src="s.jpg" alt="Imagen" /><span>S - Letra ese</span></a></li> </ul> </div> |
Es una pena que solo para el Safari y Chrome funcionen, igual el CSS 2.1 es inválido.
Lo he probado en IE8, FIreFox 3, Opera 9.6 y Google Chrome.. y solo se ve hermoso en este ultimo… los demas o bien malos o abovinables…
“Es una pena que solo para el Safari y Chrome funcionen”
se advierte antes ya que es una propiedad CSS3 y aun que la ultima version de firefox ya trae algunos estandares del CSS3 este parece que aun lo esta deviendo muchas gracias por comentar