Css3 e html5

Disponível somente no TrabalhosFeitos
  • Páginas : 7 (1531 palavras )
  • Download(s) : 0
  • Publicado : 23 de abril de 2013
Ler documento completo
Amostra do texto
Curso: Bacharelado em Sistemas de Informação – BSI11
Disciplina: Desenvolvimento Web I
-------------------------------------------------
Professor: Reginaldo

CSS3 / HTML5

Denis Lacerda Paes
Jesse de Castro Libanio

1. CSS3
O CSS nada mais é do que uma linguagem de customização de elementos seja ele HTML, javascript, XML, etc. Com o seu uso é possível estilizar praticamentequalquer coisa em um website.
O CSS3 é a ultima versão Cascading Style Sheets (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 em todos os aspectos de design do layout.
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.
Com asatualizações do CSS3 e com os browsers atualizando o suporte do CSS2.1, nós entramos em patamar onde sem dúvida o CSS é a arma mais poderosa para o designer web. Segue uma pequena lista dos principais pontos que podemos controlar nesse novo patamar:
a) Selecionar primeiro e último elemento ou pares ou ímpares;
b) Selecionarmos elementos específicos de um determinado grupo de elementos;c) Bordas arredondadas;
d) Sombras em texto e elementos;
e) Manipulação de opacidade;
f) Controle de rotação, perspectiva;
g) Animação;

2.1 Novos Recursos
A seguir, exemplos de algumas dos novos recursos e propriedades que a nova versão da linguagem irá nos fornecer:

a) Bordas
border-radius : Com essa propriedade podemos adicionar um raio de arredondamento paratodos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.

border-colors : Podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.
border-image : É possível definir uma imagem como borda
Exemplo.
|div{    border-color: #00000;    border-image: url(border.png) 27 27 27 27 stretch stretch;    border-radius: 10px 5px 2px 15px;    box-shadow: 10px 10px 5px #55555;   } |

b) Sombras
text-shadow: Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.box-shadow: Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.

c) Interface
box-sizing: Indica que o tamanho do Box levará em consideração possíveis bordas que você venha incluir.
resize: Especifica se um element é ou não redimensionável pelo usuário.
outline: Define uma segunda borda por fora na div.
nav-top,nav-right, nav-bottom, nav-left: Essa propriedade especifica para onde vai ocorrer a navegação ao usar uma seta para esquerda ou direita por exemplo. Atualmente está sendo suportada apenas pelo navegador Opera.

d) Backgrounds
Multiple backgrounds: Podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11pxno-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.
background-origin: Quando colocamos uma imagem de fundo em um elemento de HTML .
background-clip: Onde o background começa a ser desenhado.
background-size: Tamanho do background.
Exemplo.
| div {    background-image: url(background.png);    background-repeat: no-repeat;    background-size: 100%100%;    background-origin: content-box ;} |
e) Outros
Columns: Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.

Opacity: Podemos adicionar opacidade aos elementos: opacity: 0.2.

@font-face: Podemos...
tracking img