Enviado para você por Penha através do Google Reader:
As listas HTML são de fácil utilização devido a sua flexibilidade. São muito utilizadas para o desenvolvimento de menus, mas nesse tutorial, baseado no original do site Smiley Cat vamos aprender a desenvolver um bloco de texto com efeito :hover com a utilização de listas e CSS. O HTML é muito simples, e se resume no seguinte:
<div id="links"> <ul> <li> <a href="#" title="Título do post"> Título do post <em>Descrição do post.</em> <span>Data</span> </a> </li> <li> <a href="#" title="Título do post"> Título do post <em>Descrição do post.</em> <span>Data</span> </a> </li> </ul> </div>
Agora vamos ao CSS. Para que nosso exemplo funcione corretamente no IE6, devemos especificar que a largura do nosso link seja igual a larura da lista. Caso contrário o efeito :hover só acontecerá sobre os itens da lista, e não no bloco todo:
#links ul { list-style-type:none; margin:0; padding:0; width:400px; } #links li { border:1px dotted #999; border-width:1px 0; margin:5px 0; } #links li a { color:#990000; display:block; font:bold 14px Arial, Helvetica, sans-serif; padding:5px; text-decoration:none; } * html #links li a {width:400px;} /*Necessario para que funcione no IE6*/ #links li a:hover { background-color:#ffffcc; } #links a em { color:#333; display:block; font:normal 11px Verdana, Arial, Helvetica, sans-serif; line-height:125%; } #links a span { color:#125F15; font:normal 9px Verdana, Arial, Helvetica, sans-serif; line-height:150%; }
Vocês podem ver aqui nesse exemplo o código em ação.
Isso pode lhe interessar:
- :first-child bug no IE7
- Compactando o (X)HTML/CSS de suas páginas
- CSS não serve para desenvolver layouts
- 24 ways: Versão 2008
- Inspired CSS - Aprenda CSS com Andy Clarke
Já conhece o meu outro blog? O endereço é o: CSS no Lanche
Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?
Coisas que você pode fazer a partir daqui:
- Inscrever-se no Pinceladas da Web - XHTML, CSS, JavaScript e WebStandards usando o Google Reader
- Comece a usar o Google Reader para manter-se facilmente atualizado com todos os seus sites favoritos
0 comentários:
Postar um comentário