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 »

Trazendo mais uma das possibilidades que o CSS3 disponibilizará para nós, apresento-lhes uma simples função que pode ser útil em algum trabalho que venham a desenvolver: a proriedade resize.

Alguns já devem conhecer ela, em vista que a maioria já deve imaginar o que ela é capaz de fazer. Para os que pensaram que essa propriedade permite você redimensionar um objeto, parabéns, vocês acertaram. 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 »

Mais uma vez estamos aqui para falar do nosso tão esperado CSS3. Já falamos e mostramos novos recursos em outros dois posts, o CSS-Trick: Escondendo uma mensagem no texto e o CSS3 – Usando o border-radius. Já no post CSS-Gallery: Criando uma galeria usando somente CSS, mostramos como criar um simples galeria usando apenas o CSS. Desta vez vamos mostrar outro modelo de CSS-Galery, mas desta vez usando novas possibilidades do CSS3.

Estrutura do HTML

Em primeiro lugar, criamos a estrutura HTML mostrada abaixo, que nada mais é do que uma lista ul dentro de uma div cujo ID é “galeria”. Dentro de cada item dessa lista, colocaremos uma imagem, sendo uma a smallatura e uma a imagem no tamanho natural, que deverá ser mostrada quando o mouse for passado por cima da imagem em questão. Leia o resto deste post »

Todos estão sabendo e já utilizando algumas das novas possibilidades que o CSS3 esta nos trazendo. Já vimos antes como usar o border-radius.

Hoje trago um truque realmente muito simples que, a primeira vista, pode não parecer útil. Porém, sua utilidade estará diretamente ligada a sua criatividade ao usá-lo. Lembrando sempre que, como na maioria esmagadora das vezes, esse truque não é útil para o Internet Explorer.

O truque é para esconder mensagens em seus textos. É uma nova possibilidade que o CSS3 nos traz, usando a pseudo-classe ::selection para mudar a cor e o background do texto, fazendo com que apareçam palavras soltas que poderam formar uma frase, dar uma dica, enfim, como eu disse antes, vai da criatividade de cada um. Leia o resto deste post »

Uma das funções mais aguardadas do CSS3 sempre foi o border-radius, que é nada mais, nada menos, a possibilidade de criar bordar arredondadas.

Este recurso beneficiará e facilitará a vida de todo mundo. Imaginem um mundo sem criar diversas imagens de background para arredondar bordas em elementos de seu site, ou, para os usuários de tabela, deixar de criar estruturas complexas para esses fins.

Pois bem, este recurso já esta disponível nos navegadores mais novos, e isto é algo realmente bom, pois podemos começar a nos acostumar com esse recurso, e, em um sonho mais distante, podemos acostumar a internet aos novos navegadores.

Infelizmente um dos navegadores mais utilizados da internet, como sempre, ainda não integrou esse (e diversos outros) recursos do CSS3. Claro que estou falando do nosso amigo o Internet Explorer. Porém há rumores de que a versão 9.0 do navegador da Microsoft trará já o CSS3 em seu renderizador. Leia o resto deste post »