CSS no Lanche

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.

Você por um acaso alguma vez já tentou desenvolver uma barra de progresso e não obteve sucesso como queria? Hoje acabei encontrando uma maneira muito simples e funcional de se obter resultados satisfatórios de barra de progresso com CSS no site de Ben Ogle’s.

Basicamente você deve fazer o uso de três divs: uma div que atuará como container, outra que será a cor do progresso e a última para o seu texto. Tanto a div container quanto a div com o progresso devem conter uma imagem de fundo. A imagem utilizada é uam png transparente para que seja mostrada a cor de fundo da div.

HTML

A estrutura do HTML é muito simples:

<div class="meter-wrap">
    <div class="meter-value" style="background-color: #0a0; width: 40%;">
        <div class="meter-text">
            Texto aqui!
        </div>
    </div>
</div>

Continuar lendo »

Você provavelmente já deve ter passado por esse tipo de situação, onde as margens do elemento (top e bottom) se fundem formando uma só margem. Esse fenômeno é chamado de Margin Collapsing. Se você não entendeu o fenômeno, observe a imaghem abaixo, duas divs em seu fluxo normal no documento HTML:

Continuar lendo »