Tendencias na web e novas tecnologias

Passeando por bons blogs na web que falam sobre CSS3, eu encontrei no W3Avenue um post mostrando como montar um painel horizontal totalmente com CSS3. Para verem do que se trata, vejam uma demo do painel horizontal.

Gostei muito do post, por isso vou trazer para vocês um resumo dele, assim como um exemplo que eu fiz. Como é de costume, torno a falar que a utilidade deste recurso dependerá da necessidade e da criatividade de quem for usá-lo.

HTML

<div class="horizontalPanel">
    <ul>
        <li>
            <h3>Título 1</h3>
            <div>Conteúdo</div>
        </li>
        <li>
            <h3>Título 2</h3>
            <div>Conteúdo</div>
        </li>
        <li>
            <h3>Título 3</h3>
            <div>Conteúdo</div>
        </li>
        <li>
            <h3>Título 4</h3>
            <div>Conteúdo</div>
        </li>
    </ul>
</div>

Leia o resto deste post »

Hora de criarmos mais uma utilidade pra o CSS3. Vamos mostrar como fazer um painel retrátil com CSS3.

HTML

Como sempre, vamos primeiro criar a estrutura HTML do nosso exemplo. Nela definiremos um ID para a div principal, que chamaremos de retractable, e um para cada div secundária, sendo elas first e second. Também definiremos uma classe para as duas divs secundárias, pois elas terão a mesma formatação. Leia o resto deste post »