Академический Документы
Профессиональный Документы
Культура Документы
Seletores
Fundos e Bordas
Efeitos de Texto
Transformaes 2D/3D
Animao
Recomendao CSS3
CSS3 Borders
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.
border-radius
box-shadow
border-image
Compatibilidade de navegador
Exemplo
div
{
border:2px solid;
border-radius:25px;
}
Tente voc mesmo!
Exemplo
div
{
box-shadow: 10px 10px 5px #888888;
}
Tente voc mesmo!
Exemplo
Use uma imagem para criar uma borda em torno de um elemento div:
div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 10.5-12.1 */
border-image:url(border.png) 30 30 round;
}
Tente voc mesmo!
Descrio
Border-image
Border-radius
Box-shadow
CSS3 Background
background-size
background-origin
Compatibilidade de navegador
Exemplo 1
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
Tente voc mesmo!
Exemplo 2
div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
Tente voc mesmo!
A imagem de fundo pode ser colocado dentro de content-box, paddingbox, ou a rea de border-box.
Exemplo
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
Tente voc mesmo!
Exemplo
Defina duas imagens de fundo para o elemento body:
body
{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
Tente voc mesmo!
Descrio
background-clip
background-origin
background-size
CSS3 Gradients
Gradientes CSS3 permitem exibir transies suaves entre duas ou mais
cores especificadas.
CSS3 Gradients
Antes, voc tinha que usar imagens para estes efeitos. No entanto, usando
gradientes CSS3, voc pode reduzir o tempo de download e uso de banda.
Alm disso, os elementos com gradientes parecer melhor quando
ampliada, porque o gradiente gerado pelo navegador.
Compatibilidade de navegador
Para criar um gradiente linear que voc deve definir pelo menos duas
paradas de cor. Paradas de cores so as cores que deseja para tornar
transies suaves entre. Voc tambm pode definir um ponto de partida
e uma direo (ou um ngulo), juntamente com o efeito de gradiente.
Sintaxe
Exemplo
#grad
{
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}
Tente voc mesmo!
#grad
{
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}
Tente voc mesmo!
exemplo
Um gradiente linear que comea no canto superior esquerdo (e vai para o canto inferior
direito):
#grad
{
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}
Tente voc mesmo!
text-shadow
word-wrap
Compatibilidade de navegador
Exemplo
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Tente voc mesmo!
Se uma palavra muito grande para caber dentro de uma rea, ele se
expande do lado de fora:
Exemplo
p {word-wrap:break-word;}
Tente voc mesmo!
Continuamos depois!
Referncia: www.w3schools.com