O Em Busca do Código é um site em formato de plataforma EAD aberta e gratuita.
Aprendendo e ensinando, essa é a minha regra para mim.
Você completou 30% no nosso mini curso de Parallax.
Publicado dia 01 de setembro de 2017, atualizado (código fonte) dia 30 de outrubro de 2017.
Compre um adesivo do Em Busca do Código.
Publicidade
Publicidade
Publicidade
Publicidade
Esse exercício é o mais simples possível, iremos inserir textos nas imagens, esse texto não recebe nenhuma configuração especial de velocidade/movimento ainda, mas achei necessário separar essa informação para ficar mais fácil de assimilar.
O código fonte inicial deste exercício é o código fonte final do exercício anterior, exercício 2.
Altere os títulos (<title> e <h1>) para me lembrar que esse é o exercício 3 e, seguindo o padrão de nomes de arquivos, informei o nome do arquivo CSS deste exercício.
Vídeo:
Neste exercício, a única informação nova são os textos nas imagens. Dentro da tag div de cada imagem de background nós inserimos uma tag p, já informando uma classe. Neste caso eu utilizo a mesma classe para os três textos, que na verdade são palavras.
Publicidade
Dica, o que está escrito em cada tag p, tem que ser diferente.
Tentando não ser clichê, é legal cada texto na imagem receber uma configuração que combine com a imagem. Mas porque eu utilizei a expressão "tentando não ser clichê", porque para isso, você tem que usar a imaginação.
Por exemplo, em uma imagem de tons mais escuros, o background do texto da imagem pode ser um cinza claro, uma imagem com natureza pode receber um texto com um fundo com um tom de verde, e por aí vai, use a sua imaginação. Lembrando que, neste exercício eu informo a mesma classe para todos os textos.
Mas para cada texto em imagem você pode configura-lo de maneira diferente e, achei importante passar essa informação.
O código fonte a seguir é como deve ficar um dos textos nas imagens. Lembrando que cada imagem tem um texto e neste exercício você deve inserir texto em todas as imagens.
Exitem algumas peculiridades, mas vale testar em seu navegador, algumas configurações devem ser inseridas no CSS para configurar o próprio texto e para deixa-los em seus devidos lugares. Assista ao vídeo ou adquirida o ebook.
Link para adquirir o ebook.Código fonte HTML final:
Código fonte CSS final:
Já citei isso neste exercício mas, um exercício extra bem legal é você combinar o texto da imagem com cada imagem, deixando cada texto diferente um do outro mas, combinando com a imagem. Até o próximo exercício.
Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.