Dock estilo MacOS com CSS Animations
Postado por: Pedro Rogério em 14 de maio de 2008O dock do MacOS é com certeza é um aparato invejado por todo sistema operacional, surgiram até alguns javacripts caso você quisesse colocar algum menu estilo dock em seu site, mas como o CSS se torna mais poderoso a cada dia, hoje em dia é possível desenvolver menus desse tipo com CSS Animations:
<html>
<head>
<title>MacOSX Dock CSS Animations
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#page { margin-top:10em;}
.dock li {display:inline;}
.dock img {width:96px; opacity: 0.7; -webkit-transition: all 1s ease-in;}
.dock span {position:absolute;top:3em;left:0;opacity:0;-webkit-transition:all 1s ease-out;}
.dock li:hover img, .dock li:hover span{width:128px;opacity:1;}
.dock li:hover span {left:50%;}
</style>
</head>
<body>
<div id="page">
<ul class="dock">
<li><img src="finder.png" alt="Imagen" /><span class="desc">Finder</span></li>
<li><img src="systempreferences.png" alt="Imagen" /><span class="desc">Preferences</span></li>
<li><img src="firefox.png" alt="Imagen" /><span class="desc">Firefox</span></li>
<li><img src="itunes.png" alt="Imagen" /><span class="desc">iTunes</span></li>
<li><img src="terminal.png" alt="Imagen" /><span class="desc">Terminal</span></li>
<li><img src="trash.png" alt="Imagen" /><span class="desc">Lixeira</span></li>
</ul>
</div>
</body>
</html>
O segredo fica por conta da propriedade -webkit-transition, uma propriedade que somente os usuários dos browsers Safari 3.1 e Webkit podem usufruir. Caso você utilize alguns desses browsers, veja aqui um pequeno exemplo.
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Só não é tão legal, pois não funciona no IECa 6! Infelizmente ainda estamos a mercê deste browser medíocre…
Também não funciona no IE7 e nem IE8 beta. De toda forma, como o efeito obtido ficou horrível até mesmo no FireFox, o melhor é voltar ao trabalho e tentar outra coisa, porque esse aí é não dá mesmo…
É…
Dá pra fazer com a tag também e que consequentemente funcionará no IE6. Pelo menos na teoria… Eu acredito que funcione. rsrsrs
La vem a Apple dando uma de MS, tentar fugir dos padroes W3C nao é uma boa.
Isso trata-se de um efeito visual, ou seja, não vai impedir o funcionamento se o efeito não existir.
Então usuário de IE 6 que atualizem seus browsers se quiserem ter acesso a essa firula!
Não é justo com os usuários de BROWSERS de verdade deixarmos de usar esse recurso, ou tornarmos a navegação mais lenta por usar javascript para fazer uma coisa que com CSS é possível!
Pelo menos essa é minha opinião.
Vitor, mas de que adianta usarmos em nossos projetos, se o usuário do site ficará limitado caso não possua um BROWSER DE VERDADE? de nada adianta termos todos nós (desenvolvedores, designers e afins..) browsers instalados, se a quem interessa realmente (o publico alvo) não ter, portanto, acredito eu, que qualquer aplicação desta natureza, não funcionando em todos os browsers (esses menos favorecidos), não é válido, visto que o público alvo do site ficará limitado.
@Lari, @Vitor
Eu acho o seguinte, se você quer fazer firulas em seu site, sinta-se a vontade, desde que você proporcione uma forma alternativa do usuário chegar a informação, mas é o que não acontece hoje, muitas pessoas só querem saber de encher o site de JavaScript, mas não querem perder mais alguns 5 minutinhos e proporcionar uma forma alternativa de acesso ao conteúdo, mas fazer o que né? Abraços.
Então, é disso que eu tô falando… se o usuário do site não tiver como atualizar seu browser, não adianta usar um negócio desse, principalmente se não der uma alternativa pra ele… e essas “piruetas”, “firulas” como você mesmo disse é meramente estético, pra mim é irrelevante!
Assim encerro
Foi o que eu disse:
“Isso trata-se de um efeito visual, ou seja, não vai impedir o funcionamento se o efeito não existir.”
O usuário vai conseguir usar normalmente o sistema e não será prejudicado por não ter acesso ao efeito.
Não vejo porque deixar o site mais lento usando javascript para fazer algo que o css já faz.
Claro que tudo depende do seu publico-alvo. Hoje o Firefox ocupa mais ou menos 20% dos acessos nos sites gerais. Esse número pode aumentar se for um site mais técnico.
E o IE7 já tem mais usuários que o Firefox. Ou seja, eu vejo em que em pouco tempo o IE6 será minoria.