CSS3

Origem: Wikipédia, a enciclopédia livre.
Ir para: navegação, pesquisa
Question book.svg
Esta página ou secção não cita fontes confiáveis e independentes, o que compromete sua credibilidade (desde abril de 2012). Por favor, adicione referências e insira-as corretamente no texto ou no rodapé. Conteúdo sem fontes poderá ser removido.
Encontre fontes: Google (notícias, livros e acadêmico)
CSS3 - Cascading Style Sheets
Css3.jpg
Extensão do arquivo .css
Desenvolvido por W3C
Tipo de formato Folha de estilo
Variante de XML
Página oficial http://www.w3.org/TR/css3-roadmap/

CSS3 é a mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.

A principal função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.

Isso se deve aos novos browsers que estão chegando, com suporte à essa linguagem, como o Google Chrome, Opera, Internet Explorer 9, Safari e Mozilla Firefox. Assim, o CSS3 facilitará o trabalho dos que trabalham com web e também dos usuários, pela variedade de transformações na apresentação de um website.

Diferenciações[editar | editar código-fonte]

elemento
{
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   -o-border-radius:10px;
   -khtml-border-radius:10px;
}

Como pode-se ver, foram necessárias quatro linhas de código para produzir bordas arredondadas num elemento HTML. Cada prefixo da propriedade border-radius serve para uma plataforma de browsers. A -webkit, para browsers como Chrome e Safari, -moz para o Firefox, -o para Opera e -khtml para Konqueror. Obs.: há browsers que não aceitam todas as propriedades CSS3. Para testar, utilize Teste de Seletores do CSS3 .Info.

Seletores[editar | editar código-fonte]

Veja uma lista dos principais seletores (propriedades) CSS3 e seus exemplos:

   border-radius:[tamanho];  /* bordas arredondadas */
      border-radius:5px;
   box-shadow:[topo] [esquerda] [borrão] [cor];  /* sombra */
      box-shadow:2px 2px 2px #000;
   text-shadow:[topo] [esquerda] [borrão] [cor];  /* sombra em letras */
      text-shadow:2px 2px 2px #000;
   opacity:[valor];  /* transparência */
      opacity:0.5;
   word-wrap:[definição]; /* quebra de palavra (quando ela ultrapassa o tamanho do elemento) */
      word-wrap:break-word;
   background-size:[largura] [altura];  /* especifica o tamanho do plano de fundo */
      background-size:100px 80px;

Novidades do CSS3[editar | editar código-fonte]

O CSS3 é extremamente capaz de construir animações que impressionam o mais avançado desenvolvedor web, tanto em 2 como em 3 dimensões. Os mais comuns são os efeitos de rotação, movimento e transição.

Existem, na web, empresas fazendo propaganda utilizando a criatividade e o poder dessa nova era de estilos.

Ver também[editar | editar código-fonte]

Ligações externas[editar | editar código-fonte]

Outros projetos Wikimedia também contêm material sobre este tema:
Wikilivros Livros e manuais no Wikilivros