Newsletter
Nome:
E-mail:

Artigos

| TI24x7 Cursos Online

Propriedades CSS3 que você precisa conhecer (Parte 2)

11/02/2011

Na primeira parte desta série, foram apresentadas algumas propriedades do CSS3. Nesta segunda etapa, continuaremos a nossa jornada com exemplos práticos sobre como funcionam e como implementá-los.

Vale lembrar mais uma vez que o navegador IE8 não possui suporte ao CSS3 e logo, os exemplos aqui apresentados não funcionarão no mesmo. A Microsoft promete o suporte ao CSS3 e ao HTML5 para o IE9 que estará disponível ainda neste ano.

Os exemplos aqui apresentados, foram testados nos navegadores Chrome, Opera 11+, Firefox 3+ e no Safari 5+.

4. Text-overflow

Originalmente desenvolvido pelo Internet Explorer, a propriedade text-overflow pode aceitar dois valores:

  • Clip
  • Ellipsis

Esta propriedade pode ser usada para cortar o texto que exceda o tamanho do seu container. No exemplo a seguir, utilizaremos a propriedade ellipsis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Apesar dos navegadores IE atuais não suportarem o CSS3, essa propriedade funciona desde o IE6!

Código

#textOverflow
{
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid black;
    width: 400px;
    padding: 20px;
    -webkit-transition: all .5s;
    color: rgba(0,0,0,.7);
    cursor: pointer;
}

#textOverflow:hover
{
    white-space: normal;
    color: rgba(0,0,0,1);
    background: #e3e3e3;
    border: 1px solid #666;
}

5. Resize

A propriedade de redimensionamento (resize) permite que você redimensione um textarea. Por hora, esta propriedade está disponível apenas para os navegadores Chrome, Firefox 4+ e Safari5+. Pode ser que ele esteja presente no IE9 mas só saberemos quando a versão final for lançada e quanto ao Opera, mesmo a sua última versão (nesse momento ver.11), ainda não suporta esta propriedade.

Redimensionamento vertical

Redimensionamento horizontal

Redimensionamento vertical e horizontal

Sem redimensionamento

Código

.both
{
    -moz-resize: both;
    -webkit-resize: both;
    resize: both;
}
.vert
{
    -moz-resize: vertical;
    -webkit-resize: vertical;
    resize: vertical;
}
.horiz
{
    -moz-resize: horizontal;
    -webkit-resize: horizontal;
    resize: horizontal;
}
.none
{
    -moz-resize: none;
    -webkit-resize: none;
    resize: none;
}

Valores possíveis para esta propriedade:

  • both: Redimensiona horizontal e vertical.
  • vertical: Redimensiona apenas na vertical.
  • horizontal: Redimensiona apenas na horizontal.
  • none: Desabilita o redimensionamento.

6. Transition

Talvez a novidade mais empolgante CSS3 é a capacidade de aplicar animações para elementos sem a utilização de JavaScript.

Vamos fazer um efeito comum, em que quando você passar o mouse sobre o link em uma barra lateral, o texto deslizará para a direita.

Código

ul a
{
    -webkit-transition: padding .4s;
    -moz-transition: padding .4s;
    -o-transition: padding .4s;
    transition: padding .4s;
}     

a:hover
{
    padding-left: 6px;
}

A propriedade transition pode aceitar três parâmetros:

  • A propriedade da transição. (Defina esse valor para todos, se necessário)
  • A duração
  • O tipo de flexibilização

Chegamos ao final de mais um artigo TI 24x7! As propriedades e recursos do CSS3 serão os padrões para os próximos anos e portanto, é uma condição sine qua non conhecê-los e empregá-los de maneira correta para a web que esta cada vez mais interativa e intuitiva. O CSS3 possui várias outras propriedades e aqui, foram selecionadas algumas que mostram um pouco da capacidade do CSS3.



Colunista

Fabrizio Rodrigues

Graduado em Tecnologia, Análise e Desenvolvimento de Sistemas. Possui cursos Microsoft 2278/2192A, 4994A, 2956B, 2542A, 2543B, e 2544A. Trabalha com desenvolvimento de sistemas na linguagem C# e utiliza tecnologias como JavaScript, jQuery e SilverLight. Experiência em desenvolvimento de sistemas para governos na área da construção civil. Atualmente trabalha como Desenvolvedor WEB em um empresa na área de Segurança Digital Tributária.
© Copyright 2011 - Todos os direitos reservados. Proibida a reprodução parcial ou total do conteúdo deste site.
Como Funciona Formas de Pagamento Logo Ebit Compra Segura

TI 24x7 - O Maior portal de cursos online especializado em TI do Brasil