CSS3

CSS3

CSS3 é a terceira mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para seu projeto web.Com efeitos de transição, imagem,imagem de fundo/Background e outros, que dão um estilo novo e elegante a seus projetos web,veja no como o Layout Iluria,os Temas loja Integrada e o Template Xtech utilizam muito bem os recursos do CSS3 em todos os aspectos de design do layout da página.

A principal função do CSS3 é abolir as imagens de plano/Background 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/Navegadores,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.

  1. Diferenciações
  2. Seletores
  3. Novidades do CSS3

Diferenciações

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 HTML5. 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

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

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.

Relacionado

  1. tema tray
  2. loja integrada é confiável
  3. Loja de Temas