terça-feira, 17 de março de 2009

Efeito :hover em blocos de texto com CSS



 
 

Enviado para você por Penha através do Google Reader:

 
 


Efeito :hover em blocos de texto com CSS

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:


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?


Efeito :hover em blocos de texto com CSS


 
 

Coisas que você pode fazer a partir daqui:

 
 
TwitThis
Share |

0 comentários:

;

Pesquisa na WEB

assine o feed

siga no Twitter

Postagens

acompanhe

Comentários

comente também