HTML5 e CSS3 - Recursos mais utilizados

Caio Cesar Gomes Digital Front End Engineer RECURSOS

HTML 5 • Hypertext Markup Language • 28 de Outubro de 2014 - se torna recomendação oficial do W3C • Traz uma semântica melhor • Suporte a elementos como vídeo e áudio

HTML 5 – Novos Elementos • Elementos Semânticos: <header>, <footer>, <article>, e <section> • Atributos: number, date, time, calendar, e range • Elementos Gráficos: <svg> e <canvas> • Elementos Multimedia: <audio> e <video>

HTML 5 – Novas API’s • HTML Geolocation • HTML Drag and Drop • HTML Local Storage • HTML Application Cache • HTML Web Workers • HTML SSE

CSS 3 • Cascading Style Sheets Level 3 • Ainda não é recomendação oficial da W3C • Muitos módulos já são recomendações • Versão recomendada atualmente é CSS 2.1

CSS 3 - Módulos • Seletores • Backgrounds e Bordas • Efeitos de Texto • Transfomrações 2D/3D • Animações • Layout de Múltiplas Colunas • Interface de Usuário • Entre outros…

CSS 3 - Compatibilidade • Internet Explorer 7 e 8 – Muito pouco ou quase nenhum suporte. • Internet Explorer 9 – Suporta bem. • Firefox 3 – Suporta razoavelmente bem. • Firefox 4 – Suporta muito bem. • Safari, Chrome e Opera – Suportam muito bem.

CSS 3 - Prefixos • Safari e Chrome: -webkit- • Firefox: -moz- • Internet Explorer: -ms- • Opera: -o- • Opera e o Internet Explorer 9 não precisam dos prefixos.

HTML 5 - Figure A tag <figure> indica um campo para imagem e a <figcaption> uma legenda. Exemplo: <figure> <img src="path/to/image" alt="Sobre a Imagem" /> <figcaption> <p>Isso é uma imagem de algo interessante. </p> </figcaption> </figure>

HTML 5 – E-mail Para os campos de input, agora é possível colocar o tipo de e-mail, que, inclusive permite ao próprio navegador fazer validação do campo. Exemplo: <input id="email" name="email" type="email" />

HTML 5 – Header e Footer Foram implementadas as tags <header> e <footer> para definir de forma semântica o cabeçalho e rodapé das páginas. Exemplo: <header>…</header> <footer>…</footer>

HTML 5 – Required Para os campos de input pertencentes a um formulário, agora é possível colocar o atributo required para que o campo seja validado antes do formulário ser submetido. Exemplo: <input id="email" name="email“ required type="email" />

HTML 5 – Áudio Foi implementada a tag <audio> para eliminar o uso de objetos ou flash utilizados anteriormente. Exemplo: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

HTML 5 – Vídeo Foi implementada a tag <video> com o objetivo de eliminar o uso de objetos e flash amplamente utilizados. Exemplo: <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

HTML 5 - Range Para os campos de input, agora é possível colocar o tipo de range que cria um campo de seleção entre dois números. Exemplo: <input type="range" name="range" min="0" max="10" step="1" value="">

HTML 5 – Output A tag <output> foi criada representar o resultado de cálculos matemáticos. Exemplo: <p> 10 + 5 = <output name="sum"></output> </p>

CSS 3 – Media Queries As regras de @media são utilizadas para especificar determinados estilos para a resolução estipulada. Exemplo: @media screen and (min-width: 480px) { body { background-color: lightgreen; } }

CSS 3 – Font Face A regra @font-face permite incorporar as páginas fontes que não são nativas dos sistemas operacionais. Exemplo: @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

CSS 3 – Múltiplas Colunas Utiliza as propriedades column-count, column-gap, column-rule-style, column-rule-width, column-rule-color, column-rule, column-span, column-width para criar múltiplas colunas de conteúdo através do css. Exemplo: div { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; }

CSS 3 – Múltiplas Colunas A regra @font-face permite incorporar as páginas fontes que não são nativas dos sistemas operacionais. Exemplo: @font-face { font-family: myFirstFont; src: url(sansation_light.woff); }

CSS 3 – Border Radius A propriedade border-radius é utilizada para arredondar os cantos dos elementos e talvez uma das mais utilizadas do CSS 3. Exemplo: div { border: 2px solid; border-radius: 25px; }

CSS 3 – Box Shadow A propriedade box-shadow é utilizada para criar sombreamento em elementos. Exemplo: div { box-shadow: 10px 10px 5px #888888; }

CSS 3 – Text Shadow A propriedade text-shadow é utilizada criar o efeito de sombreamento nos textos. Exemplo: h1 { text-shadow: 2px 2px #ff0000; }

CSS 3 – Cores RGBA Cores no formato RGBA permitem a definição de cores utilizando a escala RGB adicionando o campo de Alpha para fornecer transparência através do CSS. Recurso suportado nos navegadores: IE9+, Firefox 3+, Chrome, Safari, e Opera 10+ Exemplo: #p1 {background-color: rgba(255, 0, 0, 0.3);}

CSS 3 – Resize A propriedade resize é utilizada para definir se determinado elemento pode ser redimensionado. Exemplo: div { resize: both; overflow: auto; }

CSS 3 – Word Wrap A propriedade word-wrap é utilizada quando se tem frases longas e é usada para definir se elas podem ser quebradas para a próxima linha. Exemplo: p.test { word-wrap: break-word; }

CSS 3 – Transition A propriedade transition é utilizada para definir o tipo de animação, o tempo e em que propriedades elas serão aplicadas. Exemplo: div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s ease; /* Safari */ transition: width 2s ease; }

CSS 3 – Transform A propriedade transform é utilizada para definir o tipo de transformação que alguns elementos podem ter, como, por exemplo: blur, rotação, scale, outros. Exemplo: div { transform: rotate(7deg); }

Referências • http://tableless.com.br/agora-sim-o-html5-se-tornou-oficialmente-uma-recomendacao/ • https://pt.wikipedia.org/wiki/HTML5 • https://pt.wikipedia.org/wiki/CSS3 • http://www.w3schools.com/css/css3_intro.asp • http://www.w3.org/TR/#tr_CSS • http://www.w3.org/TR/#tr_HTML • http://www.html5rocks.com/pt/tutorials/workers/basics/#toc-introduction-jsthreading • http://code.tutsplus.com/pt/tutorials/28-html5-features-tips-and-techniques-you-must-know--net- 13520 • http://thiagothamiel.com/2011/11/24/o-que-o-css3-tem-de-novo/ • http://www.devmedia.com.br/css3-utilizando-recursos-de-css-e-seletores-para-formatacao-de- conteudo-net-magazine-79/18796 • http://tableless.com.br/prefixos-dos-browsers-a-web-precisa-de-voce/ • http://thiagothamiel.com/2011/11/24/o-que-o-css3-tem-de-novo/ • http://www.the-art-of-web.com/css/css-animation/

HTML5 e CSS3 - Recursos mais utilizados

HTML5 e CSS3 - Recursos mais utilizados

Mais conteúdo relacionado

Mais procurados

Semelhante a HTML5 e CSS3 - Recursos mais utilizados

Último

HTML5 e CSS3 - Recursos mais utilizados

Notas do Editor