CSS no Lanche

Vocês provavelmente já devem conhecer esse efeito, o de o usuário ao passar o mouse sobre alguma imagem na página, é mostrada a descrição da mesma, com um efeito de “swap”, esse efeito é bem interessante para ser utilizado em sites do tipo e-commerce, e para conseguir esse tipo de efeito não é muito difícil, só vamos ter algum trabalho para adequar o efeito ao Internet Explorer 6, que não interpreta corretamente o efeito :hover.

Para chegar a esse efeito, cada bloco de imagem deverá conter a seguinte marcação HTML:

<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
<div class="hide">
    <a href="#">Livro Ajax com jQuery</a>
    <p>Requisições Ajax com a simplicidade da jQuery</p>
</div>

Continuar lendo »

Russ Weakley acaba de lançar um ótimo tutorial sobre herança em CSS. No total são 95 slides que de forma simples você irá entender definitivamente como funciona herança em CSS.

View more presentations from Russ Weakley.

Aconselho você também ver outros 2 slides que ele desenvolveu:

• Efeito cascata do CSS
• CSS line-height

Entender o efeito cascata do CSS é tão importante e primordial quanto entender a diferença entre elementos de bloco e inline no html e como eles são renderizados no browser. Se você domina herança no CSS é sinal que já entende muito bem o efeito cascata.

Como podem ver nos slides abaixo, Russ Weakley explica de forma muito simples o efeito cascata do CSS, você que deseja aprender CSS, é um ótimo começo:

View more presentations from Russ Weakley.

E caso não tenha visto, veja també os slides sobre Line-height em CSS.

Se você tinha alguma dúvida sobre a propriedade line-height chegou a hora de esclarecer todas elas, pois nesses slides de Russ Weakley ele deixa bem claro a funcionalidade dessa propriedade CSS:

View more presentations from Russ Weakley.