CSS3 - Parte 1

 
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

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

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;

Transformações

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.
Agora você já pode ter noção do que o CSS3 é capaz.


Módulos CSS3

CSS3 foi dividido em "módulos". Ele contém a "especificação CSS velho" (que foi dividido em pedaços menores). Além disso, os novos módulos são adicionados.

Alguns dos módulos CSS3 mais importantes são os seguintes:

     Seletores
     box Model
     Fundos e Fronteiras
     Os valores de imagem e conteúdo Substituído
     Efeitos de Texto
     2D/3D Transformações
     Animações
     Várias layout da coluna
     interface com o Usuário

CSS3 Recomendação

A especificação CSS3 ainda está em desenvolvimento pelo W3C.

No entanto, muitas das novas propriedades CSS3 foram implementadas em navegadores modernos.

CSS3 Border

---

Com CSS3, você pode criar bordas arredondadas, adicionar sombra para caixas e usar uma imagem como uma borda - sem usar um programa de desenho, como o Photoshop.

Neste capítulo, você vai aprender sobre as seguintes propriedades de fronteira:

 border-radius
 box-shadow
 border-imagem

---

Suporte de Navegadores (Browser's)

---

CSS3 cantos arredondados

Adicionando cantos arredondados em CSS2 foi complicado. Tivemos que usar imagens diferentes para cada canto.

Em CSS3, criando cantos arredondados é fácil.

Em CSS3, a propriedade border-radius é usado para criar cantos arredondados:
Esta caixa tem cantos arredondados!

Exemplo

Adicionar cantos arredondados a um elemento div:

div
{
border:2px solid;
border-radius:25px;
}

---

CSS3 Box com Sombra

Em CSS3, a propriedade box-shadow é usado para adicionar sombra de caixas:

Exemplo

Adicione uma caixa-sombra a um elemento div:

div
{
box-shadow: 10px 10px 5px #888888;
}

---

CSS3 imagens com borda

Com o CSS3 propriedade border-imagem que você pode usar uma imagem para criar uma borda:
A propriedade border-imagem permite que você especifique uma imagem como uma borda!
A imagem original é usado para criar a borda acima:

Exemplo

Use uma imagem para criar uma borda em torno de um elemento div::

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

Propriedades Border CSS3

Property	Description	CSS
border-image	Um atalho para definir todas as propriedades-image-* de borda	3
border-radius	Um atalho para definir todas as quatro propriedades border-*-radios	3
box-shadow	Anexa um ou mais drop-shadows a caixa	3