SlideShare uma empresa Scribd logo
1 de 14
CSS3 e HTML5 Flávia Siqueira BluesoftLabs
 
Novas propriedades do CSS3 Bordas   ,[object Object]
Border-image: podemos adicionar imagens as bordas
[object Object]
-moz-border-radius: é o comando que fará o border-radius funcionar no Firefox ou em outro navegador da Mozilla.
[object Object]
Cor   ,[object Object],A declaração de cores com uso de HSL (hue, saturation, lightness) permite que você declare as cores com uso dos seus três componentes: hue = tom, saturation = saturação e lightness = luminosidade. Seletor {   color: hsl (120, 75%, 50%)   } O primeiro valor é para o tom (hue) da cor. ,[object Object]
60 - amarelo
120 - verde
180 - ciano
240 - azul
300 - púrpura
360 - vermelha

Mais conteúdo relacionado

Destaque

Destaque (20)

Introdução à media queries
Introdução à media queriesIntrodução à media queries
Introdução à media queries
 
Gestor de contenido web
Gestor de contenido webGestor de contenido web
Gestor de contenido web
 
Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)Minicurso Web. Front-end e HTML5 (parte 1)
Minicurso Web. Front-end e HTML5 (parte 1)
 
Web e HTML5
Web e HTML5Web e HTML5
Web e HTML5
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Manual de identidade visual
Manual de identidade visualManual de identidade visual
Manual de identidade visual
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
HTML5 Sensitivo
HTML5 SensitivoHTML5 Sensitivo
HTML5 Sensitivo
 
HTML5 e CSS3 – rápido e eficaz para o presente
HTML5 e CSS3 – rápido e eficaz para o presenteHTML5 e CSS3 – rápido e eficaz para o presente
HTML5 e CSS3 – rápido e eficaz para o presente
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Aula1 - HTML 5
Aula1 - HTML 5Aula1 - HTML 5
Aula1 - HTML 5
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Aula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.brAula de HTML5 - DevCampos - www.devcampos.com.br
Aula de HTML5 - DevCampos - www.devcampos.com.br
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
HTML E WEB - COMO FUNCIONA E TUTORIAL
HTML E WEB - COMO FUNCIONA E TUTORIALHTML E WEB - COMO FUNCIONA E TUTORIAL
HTML E WEB - COMO FUNCIONA E TUTORIAL
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
 

Último

Último (6)

ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docxATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
ATIVIDADE 1 - ESTRUTURA DE DADOS II - 52_2024.docx
 
Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 

Primeira parte sobre o CSS 3

  • 1. CSS3 e HTML5 Flávia Siqueira BluesoftLabs
  • 2.  
  • 3.
  • 5.
  • 6. -moz-border-radius: é o comando que fará o border-radius funcionar no Firefox ou em outro navegador da Mozilla.
  • 7.
  • 8.
  • 15. O segundo valor é para a saturação (saturation) da cor. O seu valor é expresso em porcentagem. Um valor igual a 100% representa saturação total da cor e 0 é um leve sombreado cinza de saturação. O terceiro valor é para a luminosidade (lightness). O seu valor é expresso em porcentagem. Um valor igual a 100% resulta em cor branca e 0 em cor preta, sendo 50% o valor normal. 1.* { color: hsl(0, 100%, 50%) }   /* vermelho */ 2.* { color: hsl(120, 100%, 50%) } /* verde */ 3.* { color: hsl(120, 100%, 25%) } /* verde escuro */ 4.* { color: hsl(120, 100%, 75%) } /* verde claro */ 5.* { color: hsl(120, 75%, 75%) }  /* verde pastel */
  • 16.
  • 17.
  • 18. Múltiplas sombras e valores negativos text-shadow: #000 1px 1px 1px, #FFF -1px -1px 1px; -webkit-text-shadow: para Safari -moz-text-shadow: para Firefox Até o momento o IE não suporta o CSS3
  • 19.
  • 20. Cuidado com os exageros...
  • 21.  
  • 22.  

Notas do Editor

  1. Desde que CSS começou passaram muitos anos e já vamos pela especificação de CSS3, que incorpora uma série de novidades que vou tratar de resumir neste artigo.