O documento apresenta os recursos HTML5, CSS3 e suporte multiplataforma, com demonstrações de elementos semânticos como header e article em HTML5, seletores e efeitos como sombra e transição em CSS3, e compatibilidade em múltiplos browsers, sistemas e dispositivos.
HTML5 + CSS3 em múltiplos browsers, em múltiplas plataformas e em múltiplos dispositivos
1. em múltiplos browsers,
em múltiplas plataformas
e em múltiplos dispositivos
Rogério Moraes de Carvalho
VITA Informática
@rogeriom
rogeriomc.wordpress.com
3. HTML5 (alguns recursos)
Uma Web mais semântica
Elemento header
Informações introdutórias ou
de navegação numa página ou
num artigo
Elemento footer
Informações finais numa
página ou num artigo
Elemento article
Composição autônoma
4. HTML5 (alguns recursos)
Uma Web mais semântica
Elemento section
Seção genérica de um
documento ou aplicação
Elemento nav
Seção da página com links
para navegação
Elemento aside
Seção separada do conteúdo
(comum em barras laterais)
6. CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E:firstchild (CSS2)
De um elemento E, primeiro
filho do seu elemento pai
Seletor E:lastchild (CSS3)
De um elemento E, último filho
do seu elemento pai
Seletor E:nth-child(n) (CSS3)
De um elemento E, enésimo
filho do seu elemento pai
7. CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E:nth-last-child(n)
(CSS3)
De um elemento E, o enésimo
filho do seu elemento pai,
contando a partir do último
Seletor E:checked (CSS3)
Um elemento E da interface
com o usuário que está
checado
Exemplo: checkbox ou radio-button
8. CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E F (CSS1)
Um elemento F descendente
de um elemento E
Seletor E > F (CSS2)
Um elemento F filho de um
elemento E
Seletor E + F (CSS2)
Um elemento F imediatamente
precedido por um elemento E
9. CSS3 (alguns recursos)
Formatação mais poderosa
Seletor E ~ F (CSS3)
Um elemento F precedido por
um elemento E
Seletor E :: before (CSS2)
Conteúdo gerado antes do
elemento E
Seletor E :: after (CSS2)
Conteúdo gerado depois do
elemento E
10. CSS3 (alguns recursos)
Formatação mais poderosa
Propriedade border-radius
(CSS3)
Arredondamento de bordas
Função linear-gradient (CSS3)
Gradiente linear de cores
Função radial-gradient (CSS3)
Gradiente radial de cores
11. CSS3 (alguns recursos)
Formatação mais poderosa
Propriedade text-shadow
(CSS3)
Sombra num texto
Propriedade box-shadow
(CSS3)
Sombra numa caixa
Propriedade transition (CSS3)
Efeito de transição em algumas
propriedades