Sites com backgrounds diferentes
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
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
Curtidas 0
Melhor post
Joel Rodrigues
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.
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.
GOSTEI 1
Mais Respostas
Rachel Andrade
24/05/2017
Oi, Leonardo. Já fiz algo desse tipo e basicamente usei uma estrutura assim:
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:
Espero que ajude.
<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.
GOSTEI 0
Dayan Barros
24/05/2017
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:
Retira as margens que você aplicou e veja se fica correto.
Abs
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
GOSTEI 0
Rafael Zilli
24/05/2017
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
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
GOSTEI 0