CSS3 para principiantes:

Neste post vou apresentar algumas das inovações de CSS3 que funcionam em todos os
browsers modernos. Como as inovações são tantas decidi escolher duas das mais importantes.

Background-size:UL06

background-size

Antes do CSS3, o tamanho de fundo era determinada pelo tamanho real da imagem utilizada.
A propriedadebackground-size permite que você altere o tamanho da imagem de fundo para
melhor atender sua página. Será possível especificar em termos de porcentagem ou pixels
quão grande uma imagem de fundo deve ser. Isto irá permitir a reutilização de imagens em
vários contextos diferentes e também expandir um fundo para preencher uma área com mais
precisão.

Há os seguintes valores possíveis:

 background-size: 100px 100px; redimensiona a imagem para o tamanho especificado. O
primeiro valor especifica a largura enquanto o segundo valor especifica a altura da imagem.
 background-size: 50% 100%; redimensiona a imagem para o tamanho especificado. As
porcentagens são em relação ao tamanho do elemento que contém, sendo o primeiro valor
a largura enquanto o segundo valor a altura da imagem.
 background-size: contain; diminui a escala da imagem para caber no elemento (manter
proporção de pixel).
 background-size: cover; aumenta a escala da imagem para caber no elemento (manter
proporção de pixel).

Trabalhar com pixels

Exemplo background-size:
.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-ohana.jpg) no-repeat;
background-size: 200px 254px;
width:200px;
height:254px;
}
Trabalhar com percentagem

Outra forma de utilizar a propriedade é usar percentagem ao invés de pixels.

Exemplo background-size com percentagem:
.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-ohana.jpg) no-repeat;
background-size:100%;
width:150px;
height:191px;
}

Trabalhar com background-size: contain

Exemplo background-size: contain:
.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-attachment: fixed;
background-size: contain;
}

Trabalhar com background-size: cover

Exemplo background-size: cover:
.backgroundsize {
background: url(http://www.css3.x4ids.com.br/imagens/css3-logotipo-x4ids.png) no-repeat;
background-attachment: fixed;
background-size: cover;
}

Efeitos de texto:
Text-shadow: declaração
É com a propriedade text-shadow que podemos adicionar sombra a um texto utilizando CSS3. A
sua declaração é bastante simples. No exemplo, vamos adicionar uma sombra preta a um
elemento <h1> cinza claro:

text-shadow: #000 2px 3px 2px;

No exemplo, #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em
relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento
e o terceiro valor (2px) é oraio da sombra (efeito blur).
Obviamente, como qualquer outra declaração em CSS, podemos utilizar qualquer unidade de
medida para definir a distância e o raio da sombra, não apenas pixels:
text-shadow: #000 0.2em 0.3em 0.2em;
Sendo um efeito de sombra, ele tem resultados mais naturais quando usamos tons de cinza.
Sombras com distâncias e raio pequenos têm um efeito de relevo bem interessante, que promete
ser a tendência para essa propriedade:

text-shadow: #FFF 1px 1px 1px;

text-shadow: #999 1px 2px 2px;

Sombras coloridas e raios com valores muito alto são irreais e dão um aspecto completamente
amador ao layout. Por isso, esse efeito deve ser utilizado com muita cautela:

text-shadow: #600 1px 2px 5px;

Como esse recurso é utilizado para sombrear textos, quando aplicado a outros elementos terá efeito
apenas sobre o seu conteúdo:

div {text-shadow: #600 1px 2px 5px; border: #000 1px solid;}

Múltiplas sombras e valores negativos

É possível aplicar mais de uma sombra a um mesmo texto. As sombras se sobrepõem de acordo
com a ordem da declaração, mas nunca vão se sobrepor ao texto original. Repare que na segunda
declaração os valores dos deslocamentos horizontal e vertical são negativos, o que faz a sombra ser
projetada na direção contrária (à esquerda e acima do elemento):

text-shadow: #000 1px 1px 1px, #FFF -1px -1px 1px;

Box-shadow: declaração
Agora vamos ver como aplicar sombras em bordas. A declaração da propriedade box-shadow é
semelhante à da propriedade text-shadow:

box-shadow: #000 2px 2px 1px;

Onde #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação
ao elemento, o segundo valor (2px) é a distância vertical da sombra em relação ao elemento e o
terceiro valor (1px) é o raio da sombra (efeito blur).
Porém, assim como na propriedade border-radius, existem duas declarações diferentes: -webkit-
box-shadow para Chrome e Safari, e -moz-box-shadow para o Firefox. No momento em que este
artigo era, o navegador Internet Explorer, até a versão, não oferecia suporte ao recurso. Porém,
como as sombras têm um efeito apenas estético, a falta de suporte não deve atrapalhar a
navegação de usuários com browsers nessa condição.
Veja mais exemplos do uso dessa propriedade. Note que o fundo azul serve apenas para realçar o
objeto branco e mostrar claramente como as sombras funcionam:

box-shadow: 5px 5px 10px #0076a3;

-webkit-box-shadow: 5px 5px 10px #0076a3;
-moz-box-shadow: 5px 5px 10px #0076a3;

box-shadow: -1px -1px 2px #325d6f;

-webkit-box-shadow: -1px -1px 2px #325d6f;
-moz-box-shadow: -1px -1px 2px #325d6f;
Tal como acontece com text-shadow, podemos utilizar qualquer unidade de medida para definir a
distância e o raio da sombra com box-shadow, não apenas pixels:

box-shadow: 0px 0px 1em #666;

-webkit-box-shadow: 0px 0px 1em #666;
-moz-box-shadow: 0px 0px 1em #666;
Múltiplas sombras em bordas
Também é possível adicionar múltiplas sombras a um elemento usando box-shadow, bastando, para
isso, separar as declarações com vírgula. As sombras sobrepõem-se na ordem em que foram
declaradas, mas nunca se sobrepõem ao elemento original.
No seguinte exemplo, utilizando uma sombra mais escura que o fundo e outra mais clara, ambas
com os valores baixos do raio e das distâncias, criamos um interessante efeito de profundidade:

box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2;

-webkit-box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2;
-moz-box-shadow: -1px -1px 1px #325d6f, 1px 1px 1px #bfe3f2;
É importante ressaltar que, assim como num editor de imagens, o uso da sombra deve ser bem
utilizado. Sombras coloridas ou com raio muito grande são irreais e dão um aspecto amador ao
layout:

box-shadow: -5px -10px 30px #900, 6px 9px 15px #090;

-webkit-box-shadow: -5px -10px 30px #900, 6px 9px 15px #090;
-moz-box-shadow: -5px -10px 30px #900, 6px 9px 15px #090;

Referencias Bibliográficas:
http://www.infowester.com/css3sombras.php

http://www.css3.x4ids.com.br/introducao-ao-css3/backgrounds-parte-3-background-size/