CSS3 e suas propriedades mais usuais atualmente

O CSS3 traz uma série de efeitos e propriedades bacanas. Contudo muitas dessas propriedades ainda não são reconhecidas em todos os navegadores, e há ainda os casos que devemos multiplicar linhas de código para atingir um número maior de browsers.

A seguir listarei as principais propriedades em uso hoje e os navegadores que as suportam. Não se esqueça de levar em conta a data em que esse post foi escrito – Junho/2011. Espero realmente que as coisas mudem para que possamos usufruir de todos os recursos CSS3 sem dor de cabeça 😀


  • border-radius

Responsável por arredondar a borda de um elemento.

[sourcecode language=”html”] .borda_arredondada{
border-radius: 10px;
}
[/sourcecode]
  • text-shadow

Aplica uma sombra ao texto. Suas customizações são, em ordem, tamanho da sombra lateral – com valores negativos para esquerda, tamanho da sombra inferior/superior, com valores negativos para superior, blur, ou opacidade da sombra e finalmente, cor da sombra.
Para efeito de testes, adicionei fundo vermelho e cor de texto preta para que possamos visualizar o resultado.

[sourcecode language=”html”] .texto_sombra{
text-shadow: 3px 3px 2px #999;
color: #000;
background-color: red;
}
[/sourcecode]
  • box-shadow

Trabalha da mesma forma que o text-shadow, porém é aplicado à elementos como divs. Assim, de forma análoga suas customizações são, em ordem, tamanho da sombra lateral – com valores negativos para esquerda, tamanho da sombra inferior/superior, com valores negativos para superior, blur, ou opacidade da sombra e finalmente, cor da sombra.

[sourcecode language=”html”] .box_sombra{
box-shadow: -3px 3px 2px #999;
}

[/sourcecode]
  • opacity

Determina quao opaco um elemento é, aonde 1 corresponde a 100% de opacidade.

[sourcecode language=”html”] .opaco{
opacity: 0.25;
}

[/sourcecode]
  • backgrounds múltiplos

Dá ao desenvolvedor a oportunidade de setar mais de uma imagem como plano de fundo de suas páginas.

[sourcecode language=”html”] body{
background: url(image1.png) no-repeat top left,
url(image2.png) repeat-x bottom left,
url(image3.png) repeat-y top right;
}
[/sourcecode]

Caso você queira testar as propriedades acima, pode baixar os arquivos nesse link, ou fazer você mesmo. O resultado será algo com a imagem abaixo:

 

// Comente!

comentários

Olá, eu sou a Gabi e eu criei o "Eu Faço Programas" em 2011, quando ainda trabalhava em desenvolvimento web. Atualmente meu trabalho é focado em estratégia digital e redes sociais. Quer saber mais? www.imgabi.com

4 Comentários

  • […] o margin e para criar um efeito de sombra sutil, utilize o box-shabow – saiba mais aqui e aqui […]

  • Responder setembro 1, 2011

    Animações em CSS3

    […] Para dar mais realidade ao efeito, adicionaremos uma sombra na imagem para que ela tenha o efeito de “sair da tela” quando o usuário passar o mous sobre ela. Utilizaremos o box-shadow [LATERAL ACIMA/ABAIXO BLUR COR] – lembra-se dele? […]

  • Responder setembro 8, 2011

    Formulário com CSS3

    […] CSS3 utilizados acima foram tratados em tutoriais anteriores e você pode conferir também os atributos CSS3 mais utilizados atualmente. Lembre-se sempre de, ao usar o modelo de cores RGBA, definir também o modelo de cores RGB ou […]

  • Responder dezembro 18, 2011

    Homepage

    … [Trackback]…

    […] Read More: eufacoprogramas.com/desenvolvimento/css3-e-suas-propriedades-mais-usuais-atualmente/ […]…

// Siga as boas práticas: Comente!