Sites com backgrounds diferentes

24/05/2017

0

sou iniciante em front-end e ao olhar alguns sites relacionados a editores e frameworks percebi que quando desço a pagina as cores vão mudando e achei esse um efeito muito legal. tentei criar div em uma pagina e setar um background-color diferente pra cada div, porém inicialmente não deu muito certo ja que cada uma tem um espaçamento de margin. acabei reduzindo o margin de cada uma e o efeito funcionou, mas percebi que quando dou um zoom - na página eu perco esse efeito.
Gostaria de saber como posso fazer isso de maneira mais profissional
Os sites que tem estes exemplos são os seguintes:
https://atom.io/ Do editor Atom
https://electron.atom.io/ do framework electron

descendo a pagina de cada um deles vocês podem perceber que há uma divisão para cada sessão
Leonardo Furtado

Leonardo Furtado

Responder

Post mais votado

14/06/2017

Fala, Leonardo. Beleza?

Nesse caso são apenas divs (ou sections) com cores diferentes no plano de fundo. Em geral essas divs não têm margin nem border, assim uma fica colada na outra. Em teoria aplicar zoom na página não deveria alterar a cor do plano de fundo. Você poderia postar seu código para analisarmos?

Abraço.

Joel Rodrigues

Joel Rodrigues
Responder

Mais Posts

16/06/2017

Rachel Andrade

Oi, Leonardo. Já fiz algo desse tipo e basicamente usei uma estrutura assim:

<section id="secao1"></section>
<section id="secao1"></section>
<section id="secao1"></section>


E no CSS eu alterei a altura de todas as sections para 100vh (100% da altuar da tela) e dei a cada uma um background diferente:
section { height:100vh; }
#secao1 { background-color: red; }
#secao2 { background-color: green; }
#secao# { background-color: blue; }


Espero que ajude.
Responder

19/06/2017

Dayan Barros

Fala Leonardo,

Então, veja se essa margin é a que o browser já seta.

Para você retirar isso, no começo do CSS coloca assim:
* {margin: 0; padding:0;}


Retira as margens que você aplicou e veja se fica correto.

Abs
Responder

19/06/2017

Rafael Zilli

Salve, Leonardo.

Além da dica que os parceiros ali já deram (zerar o margin), coloca o width da div (ou da section) em 100% e defina o height no tamanho que você deseja e coloca o background-color.

Na dúvida, posta seu código ai.

Abraço
Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar