CSS3 (online)


• Carga Horária:40h

curso online de CSS3 destina-se a todos que pretendem especializar-se na criação de layout para os mais diversos dispositivos, desde a estrutura do CSS e seus seletores até o uso de fontes externas e gradiente, passando por posicionamento e alinhamento de conteúdo com o novo módulo Flexible Box Layout.

No decorrer das aulas, o aluno verá a criação de um layout responsivo para tablet, smartphone e desktop, bem como a utilização de wireframes, transformação em CSS3, transição e animação em CSS3.

O curso é ministrado por Roque Fernando Marcos Sousa, consultor em TI, especialista em arquitetura da informação e instrutor de cursos de tecnologia da informação na Impacta Tecnologia desde 1999. Também é palestrante e autor de publicações sobre Web e HTML5.

Para que os alunos possam obter um bom aproveitamento do curso online de CSS3, é imprescindível que eles tenham participado do nosso curso HTML5 Fundamentos ou possuam conhecimentos equivalentes.

    •     Introdução ao CSS3
      • História.
      • Versões: CSS1; CSS2; CSS3.
      • Como funciona a linguagem CSS.
      • Estilos Inline.
      • CSS incorporado no arquivo HTML.
      • Incluindo um arquivo CSS externo.
      • Importando um arquivo CSS.
      • HTML5 X CSS3.
      • Estágios de padronização da W3C.
      • Prefixos proprietários.
      • Modularização.
    • TópicoPosicionamento e alinhamento
      • Box Model na CSS3.
      • Configurando largura e altura.
      • Configurando margem ? Margin: Removendo a margem padrão das páginas.
      • Configurando espaçamento ? Padding.
      • Configurando posicionamento ? Position: Posicionamento inherit; Posicionamento estático; Posicionamento fixo; Posicionamento relativo; Posicionamento absoluto.
      • Elementos flutuantes para layout: Clear; Trabalhando camadas com z-index.
      • Flexible box layout: Controlando o fluxo dentro de um contêiner.
    • TópicoBordas e sombras
      • Bordas: border-width; border-style; border-color; border-radius; border-image; border-image-source; border-image-slice; border-image-width; border-image-outset; border-image-repeat).
      • Box shadow.
      • Text shadow.
    • TópicoProduzindo um layout responsivo
      • Etapas da criação de um layout: Briefing; Wireframe; Dimensões; Viewport (A regra @viewport).
      • Web design responsivo: Media queries (Projetando para desktop, para TV e dispositivos de alta definição, para tablet e para smartphone).
    • TópicoDesenhando com CSS3
      • Desenho com CSS3.
    • TópicoAnimações
      • Trabalhando com animações em CSS3.
    • TópicoSeletores e herança
      • Seletores.
      • Entendendo o DOM: Selecionando pela classe; Selecionando pelo ID; Selecionando pelo elemento HTML.
      • Listagem de seletores da CSS3.
      • Herança em CSS3.
      • Especificidade e a propriedade !important.
      • Boas práticas: Evite qualificar demais; Utilize declarações CSS compactas; Evite duplicar regras; Condensando regras; Evite !important.
    • TópicoTrabalhando com cores, backgrounds e gradientes
      • Trabalhando com cores: Declaração hexadecimal; Declaração RGB; Declaração RGBA; Declaração HSL; Declaração HSLA; Declaração predefinida.
      • Trabalhando com backgrounds: Propriedade background-clip (border-box, content-box e padding-box); Propriedade background-origin (border-box, content-box e padding-box); Propriedade background-size (Definindo tamanho com valor fixo, tamanho com porcentagem, tamanho com o valor cover e tamanho com o valor contain); Múltiplos backgrounds.
      • Trabalhando com gradientes: Gradiente linear; Gradiente radial (Gradiente radial circular e Gradiente radial elíptico).
    • TópicoTrabalhando com fontes
      • Fontes.
      • Propriedades para fontes.
      • Tamanho e formatações.
      • A regra @font-face: Tipos de fontes; Usando fontes locais; Usando fontes remotas; Usando fontes públicas (Usando um serviço de hospedagem de fontes); Restrições com fontes pagas.
      • Efeito em fontes.
    • TópicoTransições em CSS3
      • transition-property.
      • transition-duration.
      • transition-timing-function.
      • transition-delay.
      • transition.
    • TópicoParallax
      • Criando uma página com navegação long scrolling.

    • Carga Horária:40h

    COMPRE JÁ
    Carga Horária: 40 horas
    Nível: Intermediário
    Quantidade de Vídeos: 24