Summary
Keywords
Full Transcript
EXTRA! Download GRÁTIS dos pacotes para as aulas: https://www.dropbox.com/sh/bpe3xjlnqw97j4f/AAB-ZiLvQprb3Ef398US8pM8a Nos ajude com LEGENDAS para nossos vídeos: https://youtu.be/Yu3ItGEsYQk Formatar imagens utilizando folhas de estilo CSS é algo muito simples e requer o conhecimento de alguns parâmetros específicos em HTML5 e CSS3. Nessa aula, você verá como criar um efeito de transparência e animação com CSS em uma legenda que vai flutuar sobre a foto, que também terá uma elegante borda simulando um retrato sobre a mesa. Estilos CSS em arquivos separados Quando as formatações com folhas de estilo CSS começam a ficar grandes demais, o ideal é trabalhar com arquivos CSS externos. Para isso, utilizamos a tag LINK com o parâmetro REL de valor STYLESHEET. Comentários em CSS Para comentar pedaços de código em CSS, utilizamos os caracteres /* e logo após a descrição do comentário, colocamos */ Referenciando CLASS e ID A diferença entre CLASS e ID dentro das CSS é na referência. Para usar o CLASS, utilizamos o caractere de ponto (.) e para o ID, utilizaremos a cerquilha (#) Tamanho de objetos em CSS Utilizando os parâmetros WIDTH (largura) e HEIGHT (altura), você pode modificar o tamanho de um objeto utilizando CSS. Posição de objetos em CSS Utilizando os parâmetros TOP (topo) e LEFT (esquerda) Utilizando o POSITION em CSS - Diferença entre RELATIVE e ABSOLUTE Existem dois tipos de posicionamento para CSS: com o POSITION RELATIVE, ele terá a localização feita em relação à sua posição atual. Para POSITION ABSOLUTE, ele terá a localização feita em relação a todo o conteúdo. CSS com BOX-SIZING com o parâmetro BORDER-BOX. Modificando opacidade com CSS utilizando o parâmetro OPACITY. Utilizando o HOVER em um objeto com CSS vai fazer com que uma formatação específica TRANSITION com CSS adiciona efeitos de transição ao modificar características visuais em um objeto. Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal CursoemVideo.com. Download de pacotes e curso com certificado GRÁTIS: http://cursoemvideo.com/course/curso-de-html5/ Curso em Vídeo Site: http://www.cursoemvideo.com YouTube: http://www.youtube.com/cursosemvideo Facebook: http://www.facebook.com/cursosemvideo Twitter: http://twitter.com/cursosemvideo Google+: http://plus.google.com/112666558837414979080 Patrocínio HOSTNET: http://www.hostnet.com.br TRAINNING: http://www.trainning.com.br TOY SHOW: http://www.toyshow.com.br
