Sombra nas Caixas - @CursoemVideo de HTML5 e CSS3

Introdução ao Capítulo 16 e Sombras

Visão geral da seção: Nesta seção, o instrutor introduz o Capítulo 16 sobre sombras no curso de HTML com CSS. Ele destaca a importância de ter uma base sólida do modelo de caixas antes de prosseguir para as sombras.

Modelo de Caixas

• O capítulo anterior abordou o modelo de caixas, que é fundamental para entender as sombras.

• É necessário ter conhecimento prévio sobre tags semânticas e criação básica de um site simples.

Curso de Criação de Aplicações para Dispositivos Móveis

• O instrutor menciona um curso especializado em criação de aplicações para dispositivos móveis utilizando o AppInventor.

• Esse curso é oferecido gratuitamente aos alunos do curso em vídeo.

• Os interessados podem acessar a página especial da Record para obter mais informações e instruções.

Adicionando Sombras ao Modelo

• O instrutor explica que as sombras são aplicadas às bordas das caixas.

• Será utilizado o box-shadow para adicionar sombras.

• É importante não exagerar nas sombras, mantendo uma aparência equilibrada e evitando distrações visuais desnecessárias.

Ajustes no Rodapé

• O instrutor identifica um problema com a margem do parágrafo dentro do rodapé.

• Ele mostra como resolver esse problema removendo a margem do parágrafo usando CSS.

Configurando a propriedade box-shadow

Visão geral da seção: Nesta seção, aprendemos como configurar a propriedade box-shadow para adicionar sombras aos elementos HTML.

Configurando o deslocamento horizontal e vertical da sombra

• Utilize a propriedade box-shadow para adicionar sombras aos elementos HTML.

• O deslocamento horizontal é controlado pelo primeiro valor numérico na propriedade box-shadow.

• Um valor positivo desloca a sombra para a direita, enquanto um valor negativo desloca-a para a esquerda.

• O deslocamento vertical é controlado pelo segundo valor numérico na propriedade box-shadow.

• Um valor positivo desloca a sombra para baixo, enquanto um valor negativo desloca-a para cima.

Ajustando o espalhamento e o embasamento da sombra

• O espalhamento da sombra pode ser ajustado utilizando o terceiro valor numérico na propriedade box-shadow.

• Quanto maior o valor, mais difusa será a sombra.

• O embasamento da sombra pode ser ajustado utilizando o quarto valor numérico na propriedade box-shadow.

• Quanto maior o valor, mais nítida será a borda da sombra.

Criando sua própria configuração de sombra

• É possível criar uma configuração personalizada de sombra utilizando os valores adequados na propriedade box-shadow.

• Ao clicar em "box-shadow" no editor de código, uma janela será aberta onde você poderá arrastar os pontos azuis para definir as configurações de sombra desejadas.

• Experimente diferentes valores para obter o efeito de sombra desejado.

Certificados do curso

Visão geral da seção: Nesta seção, foi abordada a questão dos certificados do curso de HTML e CSS.

• Os certificados emitidos ao concluir o curso são válidos em território nacional.

• O curso é dividido em cinco módulos, cada um com aproximadamente quarenta aulas.

• Será emitido um certificado para cada módulo concluído.

• Os certificados só serão emitidos quando todos os módulos estiverem completos.

Configurando a propriedade box-shadow (continuação)

Visão geral da seção: Nesta seção, aprendemos como criar nossa própria configuração de sombra utilizando a propriedade box-shadow.

Alterando o tipo de sombra

• É possível alterar o tipo de sombra entre externa e interna na configuração da propriedade box-shadow.

• A sombra externa é configurada por padrão, mas também é possível criar uma sombra interna.

Dica para configurar facilmente a sombra

• Utilize a janela "box-shadow" no editor de código para configurar facilmente as propriedades da sombra.

• Arraste os pontos azuis para definir as configurações desejadas.

• Não é necessário escrever nenhum código, apenas configure as propriedades visualmente.

Personalizando a cor da sombra

Visão geral da seção: Nesta seção, aprendemos como personalizar a cor da sombra utilizando a propriedade box-shadow.

• A cor da sombra pode ser alterada definindo um valor de cor diferente na propriedade box-shadow.

• É importante observar que as sombras geralmente são pretas, pois representam a ausência de luz.

• Não é comum utilizar sombras coloridas.

Dicas finais e conclusão

Visão geral da seção: Nesta seção final, foram fornecidas dicas adicionais sobre o uso da propriedade box-shadow e concluímos o tópico.

Configurando sombras rapidamente

• Utilize a janela "box-shadow" no editor de código para configurar rapidamente as propriedades da sombra.

• Arraste os pontos azuis para definir as configurações desejadas.

• Essa é uma forma simples e visual de criar sombras sem precisar escrever código.

Considerações finais

• As configurações de sombra podem ser ajustadas conforme necessário para obter o efeito desejado.

• Experimente diferentes valores e combinações para criar sombras personalizadas.

• Lembre-se de que as sombras são apenas um dos muitos recursos disponíveis no CSS para estilizar elementos HTML.

Configuração da Sombra

Visão geral da seção: Nesta seção, o palestrante discute a importância de configurar sombras em elementos de design e como ajustar suas configurações para obter o efeito desejado.

Configurando a Sombra

• A sombra não deve ser uma cor sólida, mas sim uma cor transparente para criar um efeito estético.

• É possível adicionar sombras em qualquer bloco, incluindo o elemento H1.

• Para adicionar uma sombra, é necessário utilizar a propriedade box-shadow.

• A configuração inicial pode resultar em uma sombra feia, mas é possível ajustar sua aparência.

• É possível criar tanto sombras internas quanto externas. Remover o valor "inset" na propriedade box-shadow faz com que a sombra seja projetada para fora do elemento.

Personalizando a Sombra

Visão geral da seção: Nesta seção, o palestrante demonstra duas maneiras de personalizar as sombras nos elementos de design.

Personalizando com Código

• É possível personalizar as sombras escrevendo diretamente o código CSS.

• Utilizando a propriedade box-shadow, é possível definir os valores de deslocamento horizontal e vertical, além da cor e do raio da sombra.

Personalizando com Auxílio Visual

• O uso do auxiliar visual facilita a criação das configurações de sombra.

• Ao clicar no ícone "Box", é exibida uma janela onde é possível configurar visualmente as opções da sombra.

• Após configurar a sombra, é possível copiar o código gerado e utilizá-lo em outros elementos.

Dicas Finais

Visão geral da seção: Nesta seção final, o palestrante dá algumas dicas adicionais sobre a criação de sombras e incentiva a compreensão do código em vez de simplesmente copiá-lo.

• É importante entender os parâmetros utilizados na configuração das sombras.

• Recomenda-se criar o código manualmente para melhor compreensão e aprendizado.

• A ferramenta auxiliar pode ser útil no desenvolvimento diário, mas é essencial entender como as sombras são criadas.

• No próximo vídeo, serão abordadas técnicas de personalização de bordas.