Baixe em PDF
Baixe em PDF
Este artigo vai ensiná-lo a alterar a cor do plano de fundo de uma página web editando seu código HTML.
Passos
-
Determine a cor de plano de fundo que deseja utilizar. As cores HTML são ditadas por códigos com base em tons. É possível usar o selecionador de cor HTML "W3Schools" para encontrar a cor dos códigos que você deseja utilizar.
- Para fazê-lo, acesse o endereço https://www.w3schools.com/colors/colors_picker.asp em um navegador de internet.
- Clique na base da cor desejada na seção "Pick a Color" (Escolha uma cor).
- Selecione o tom desejado no lado direito da página.
- Anote o código numérico à direita do tom desejado.
-
Abra o arquivo HTML em um editor de texto. A partir do HTML5, o atributo HTML <bgcolor> não é mais suportado. A cor do plano de fundo, junto com outros aspectos de estilo da página, deve ser tratada usando linguagem CSS. [1] X Fonte de pesquisa
- Você pode usar o "Notepad++" ou o "Bloco de notas" no Windows; no Mac, use o "TextEdit" ou o "BBEdit".
-
Adicione o cabeçalho "html" ao documento. Todas as informações de estilo da página (incluindo a cor do plano de fundo) devem ser inseridas entre as tags
<style></style>:<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
4Crie uma linha em branco entre as tags "style". É preciso ter uma linha na qual seja possível adicionar informações abaixo da tag
<style>e acima da tag</style>. -
Adicione o elemento "body". Digite o seguinte código entre as tags
<style></style>:body { }
- Todos os ajustes feitos no elemento "body" em CSS terão efeito na página inteira.
- Pule este passo caso queira criar um gradiente .
Publicidade
-
Encontre o cabeçalho "html" do documento. Ele deverá estar no topo da página.
-
Adicione a propriedade "background-color" ao elemento "body". Para fazê-lo, digite
background-color:entre os colchetes da tag "body". Em seguida, você deverá ter o seguinte elemento "body":body { background-color : }
- Nesse contexto, somente a ortografia do parâmetro "color" funcionará; não é possível usar "colour".
-
Adicione a cor de plano de fundo desejada na propriedade "background-color". Para fazê-lo, digite o código numérico da cor selecionada seguido de um ponto e vírgula ao lado do elemento "background-color:". Por exemplo, para usar a cor rosa, faça o seguinte:
body { background-color : #d24dff ; }
-
Reveja as informações da tag "style". Agora, o cabeçalho do seu documento HTML deverá estar mais ou menos assim:
<! DOCTYPE html > < html > < head > < style > body { background-color : #d24dff } </ style > </ head > </ html >
-
Use a propriedade "background-color" para aplicar cores de fundo a outros elementos. Assim como definido no elemento "body", você pode usar o "background-color" para definir cores de fundo de outros elementos, como cabeçalhos, parágrafos e assim por diante. Por exemplo, para aplicar uma cor de fundo a um cabeçalho principal (<h1>) ou um parágrafo (<p>) o código ficaria mais ou menos assim: [2] X Fonte de pesquisa
<! DOCTYPE html > < html > < head > < style > body { background-color : #93B874 ; } h1 { background-color : #00b33c ; } p { background-color : #FFFFFF ); } </ style > </ head > < body > < h1 > Cabeçalho com cor de fundo verde </ h1 > < p > Parágrafo com cor de fundo branca </ p > </ body > </ html >
Publicidade
-
Encontre o cabeçalho "html" do documento. Ele deverá estar no topo da página.
-
Entenda a sintaxe básica desse processo. Para criar um gradiente, duas coisas são precisas: o ponto/ângulo inicial e as cores de transição entre eles. É possível selecionar múltiplas cores e fazer com que o gradiente mova entre elas, e você também pode definir uma direção ou ângulo para ele. [3] X Fonte de pesquisa
background : linear-gradient ( direction / angle , color1 , color2 , color3 , etc .);
-
Crie um gradiente vertical. Se nenhuma direção for definida, o gradiente partirá de cima para baixo. Para criar um gradiente, adicione o seguinte código entre as tags
<style></style>:html { min-height : 100 % ; } body { background : -webkit- linear-gradient ( #93B874 , #C9DCB9 ); background : -o- linear-gradient ( #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( #93B874 , #C9DCB9 ); background : linear-gradient ( #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- Cada navegador de internet possui uma implementação de função de gradiente diferente, então será preciso incluir diversas versões do código.
-
Crie um gradiente direcional. Caso queira criar um gradiente que não seja exclusivamente vertical, é possível adicionar a direção dele para alterar a forma como a mudança de cores acontecerá. Para fazê-lo, digite o seguinte código entre as tags
<style></style>: [4] X Fonte de pesquisahtml { min-height : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; }
- Você pode experimentar as tags "left" e "right" para testar diferentes direções para o gradiente.
-
Use outras propriedades para ajustar o gradiente; existe diversas outras opções disponíveis.
- Por exemplo, não apenas você pode adicionar mais do que duas cores, como também pode definir uma porcentagem após cada uma delas. Dessa forma, é possível escolher o espaçamento de cada segmento de cor existente. Veja um exemplo de gradiente usando esse princípio:
background : linear-gradient ( # 93B874 10 %, # C9DCB9 70 %, # 000000 90 %);
- Adicione transparência às cores. Ao fazê-lo, a cor desaparecerá ao mudar para a próxima. Use a mesma cor para alterar dela para a transparência. Neste caso, será preciso usar a função rgba()
para definir a cor. O valor final é o que determina a transparência: 0
para sólido e 1
para transparente.
background : linear-gradient ( to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
- Por exemplo, não apenas você pode adicionar mais do que duas cores, como também pode definir uma porcentagem após cada uma delas. Dessa forma, é possível escolher o espaçamento de cada segmento de cor existente. Veja um exemplo de gradiente usando esse princípio:
-
Reveja o código final. O código para criar gradientes como o plano de fundo do website ficará mais ou menos assim:
<! DOCTYPE html > < html > < head > < style > html { min-height : 100 % ; } body { background : -webkit- linear-gradient ( left , #93B874 , #C9DCB9 ); background : -o- linear-gradient ( right , #93B874 , #C9DCB9 ); background : -moz- linear-gradient ( right , #93B874 , #C9DCB9 ); background : linear-gradient ( to right , #93B874 , #C9DCB9 ); background-color : #93B874 ; } </ style > </ head > < body > </ body > </ html >
Publicidade
-
Encontre o cabeçalho "html" do documento. Ele deverá estar no topo da página.
-
Adicione a propriedade "animation" ao elemento "body". Digite o seguinte código abaixo da chave "body {" e acima da chave final: [5] X Fonte de pesquisa
-webkit-animation : colorchange 60s infinite ; animation : colorchange 60s infinite ;
- A linha superior do texto é para o navegador Chrome, enquanto a linha inferior refere-se aos demais navegadores de internet.
-
Adicione as cores à animação. Agora, use a regra @keyframes para definir as cores de plano de fundo que farão parte do ciclo, bem como a duração de tempo de exibição de cada uma delas. Lembre-se de separar as entradas para diferentes conjuntos de navegadores de internet. Insira as seguintes linhas de código abaixo da chave final "body": [6] X Fonte de pesquisa
@ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} }
- Observe que as duas regras ( @-webkit-keyframes e @keyframes possuem as mesmas cores do plano de fundo e porcentagens. Elas precisam permanecer uniformes para que a experiência seja a mesma em todos os navegadores de internet.
- As porcentagens ( 0% , 25% , etc) são do total da duração da animação ( 60s ). Quando a página é carregada, o fundo terá a cor definida em 0% ( #33FFF3 ). Ao atingir os 25% dos 60 segundos, o fundo mudará para #7821F , e assim por diante.
- É possível modificar o tempo e as cores de acordo com os resultados desejados.
-
Reveja o código. Agora, o código todo de alteração de cor do plano de fundo deverá estar mais ou menos da seguinte forma:
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s infinite ; } @ -webkit-keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } @ keyframes colorchange { 0 % { background : #33FFF3 ;} 25 % { background : #78281F ;} 50 % { background : #117A65 ;} 75 % { background : #DC7633 ;} 100 % { background : #9B59B6 ;} } </ style > </ head > < body > </ body > </ html >
Publicidade
Dicas
- Se quiser usar cores básicas no código HTML, digite o nome da cor sem o sinal # em vez de usar o código HTML da cor. Por exemplo, para criar um plano de fundo cor de laranja, digite
background-color: orange;. - Você também pode definir uma imagem como plano de fundo usando HTML.
Publicidade
Avisos
- Teste qualquer alteração feita no website antes de publicá-lo online.
Publicidade
Referências
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
- ↑ http://www.w3schools.com/css/css_background.asp
- ↑ https://css-tricks.com/css3-gradients/
- ↑ http://www.w3schools.com/css/css3_gradients.asp
- ↑ https://codepen.io/metagrapher/pen/tgcLl
- ↑ http://www.w3schools.com/css/css3_animations.asp
Publicidade
Inscreva-se na Newsletter Gratuita do wikiHow!
Receba tutoriais úteis em seu email semanalmente!
Inscreva-me!
