Embed Size (px)
DESCRIPTION
Nessa apresentação iremos falar um pouco da história do Html e do CSS e um pouco sobre o que há de novo no Html5 e no CSS3!
Citation preview
Vamos falar de
Html5 + SexyCSS3 + Potente
Um pouco da evolução
1991 – Html1994 – Html21996 – Css1 e JavaScript1.21997 – Html41998 - CSS2
Surge a W3C2000 – XHtml12002 – Web Stantard2005 – AJAX2009 – Html 5 e CSS3
html5test.com
Quarto Lugar...
Terceiro Lugar...
Segundo Lugar...
Primeiro Lugar...
Não testado...
Xhtml 1
<?xml version=”1.0” encoding=”utf-8” ?><!DOCTYPE htlm PUBLIC *-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html lang=”pt – BR” xml:lang=”pt – BR” xmlns=”http://www.w3.org/1999/xhtml”>
<head><title>CSS3 e Html 5</title><meta content=”text/html; charset=UTF-8” http-equiv=”content-type” />
</head>
<body>
<div id=”principal”>
<div id=”topo”>Imagem do topo
</div><div id=”conteudo”>
Conteúdo da página</div><div id=”rodape”>
Links e informações do rodapé</div>
</div>
</body>
Html5 e CSS3
<!DOCTYPE htlm><html>
<head><title>CSS3 e Html 5</title><meta charset=”utf-8”>
</head>
<body><principal>
<topo>Imagem do topo
</topo>
<conteudo>Conteúdo da página
<conteudo>
<rodape>Links e informações do rodapé
</rodape>
</principal></body>
Tags do Html5
Unidade de medida...
“px” por “em” para defnirtamanho das fontes...
html { font-size: 100%; }body { font-size: .68em; }
#conteudo h1 { font-size: 1.45em; }#conteudo p { font-size: 1.1em; }#conteudo p strong { font-size: 1.16em; }
Cálculo feito: 11/16 = 0.68
A idéia é que 11px é igual a 0.68em de 16px.
(valor de referência) / (valor a ser convertido) =
(valor que desejamos)
- bordas redondas- sombras- múltiplos backgrounds- novos seletores- transformação 2D e 3D em animações
box 1 / -webkit-transform: translate(3em,0);box 2 / -webkit-transform: rotate(30deg);box 3 / -webkit-transform: translate(-3em,1em);box 4 / -webkit-transform: scale(2);
Chrome e Safari = -webkit;Firefox = -moz;Opera = -o;
