Play Fórum Online
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Top dos mais postadores
Gahh
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
Tenn
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
Roger
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
nathan_guerreiro
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
Jean00
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
gabriel nunes
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
aKuA
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 
VG12
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_lcap1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Voting_bar1[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Vote_rcap1 

Últimos assuntos
» Folga?
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 10:02 am por Gahh

» [Sugestão]Reduzir pontos?
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:58 am por Gahh

» Erro no sistema de pontos
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:55 am por Gahh

» [Sugestão]Recompensa por atingir certo nível
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:55 am por Gahh

» Tutoriais, quando vão vir.
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:54 am por Gahh

» Vagas para postador
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:53 am por Gahh

» Mais áreas melhor
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:52 am por Gahh

» trancar tópicos?
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:51 am por Gahh

» [Sugestão]Lista de Tutoriais
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. EmptyQua Abr 10, 2013 9:50 am por Gahh

Quem está conectado?
2 usuários online :: 0 registrados, 0 invisíveis e 2 visitantes

Nenhum

O recorde de usuários online foi de 95 em Ter Mar 09, 2021 3:59 am
Procurar
 
 

Resultados por:
 


Rechercher Pesquisa avançada


[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo.

Ir para baixo

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Empty [Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo.

Mensagem  Gahh Sáb Fev 16, 2013 8:34 pm

Antes de querermos fazer uma personalização em um código ou criar, é necessário saber os códigos de personalização. Eles servem para você regular o tamanho, cor, fonte, posição, etc... Então observe os códigos abaixo e comece a estuda-los para que saiba como usar eles.

Neste tópico vou ensinar:
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 1477458504 Como mudar um fundo a partir de imagens personalizadas feito por você.
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 1477458504 Propriedades de repetir ou não imagens.
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 1477458504 Definir tamanho (Largura e Comprimento).
[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 1477458504 Como mudar um fundo a partir de código de cores.

Então vamos lá.

Primeiro Vamos criar um CSS de texte por exemplo:
Código:

#teste {

}
Agora vamos adicionar o comando o comando para inserirmos a imagem, ele sera:
Código:
background: url(ENDEREÇO DA IMAGEM);
Mais só isto pode fazer com que a imagem se repita ao longo da página, então devemos adicionar o comando para ela repetir ou não.

Observe os comandos:

repeat-x = Faz com que a imagem se repita apenas na horizontal.
repeat-y = Faz com que a imagem de repita apenas na vertical.
repeat = Faz com que a imagem se repita verticalmente e horizontalmente.
no-repeat = Faz com que a imagem não se repita em nem uma posição, ela será unica.

Escolha qual das opções acima você quer, eu escolhi para que ela não se repita (no-repeat) e adicione depois do link da sua imagem como mostra abaixo:
Código:
background: url(LINK DA IMAGEM) [color=red]no-repeat[/color];
A área vermelha você coloca o estilo desejado.

Pode ser que a imagem não esteja do tamanho desejado, então vamos agora definir o tamanho delas. Para isso utilizaremos o comando height para medir a altura e width para medir o comprimento. Observe:

width: 600px;
height:250px;

A cor laranja você coloca a largura da sua imagem e na cor verde você coloca a altura da sua imagem. Na frente da medida observe que esta escrito 'px'. Ela é a medida utilizada para códigos da internet. Também podemos usar o cm (centimetro) e dentre muitas outras que existem. Mais como estamos apenas começando vamos utilizar a medida em 'px'.

Agora que terminamos o CSS para adicionar a imagem vamos ver como ele ficou montado?

#teste {
background: url(LINK DA IMAGEM) no-repeat;
width:600px;
height:250px;
}





Agora tem um outro geito de fazer esta personalização, que será feita sem usar imagem apenas colocando uma cor no lugar dela.

O código aprendido acima já ira adiantar este processo, iremos apenas editar o comando background. Acima ele esta está assim:

background: url(LINK DA IMAGEM) no-repeat;

A parte colorida de violeta deve ser excluida sobrando apenas isto:
Código:
background: ;
Agora escolha abaixo a cor que você deseja utilizar e copie apenas o código que se localiza em 'Hex':
<embed height="350px" name="plugin" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash" width="350px"></embed>

A cor que eu escolhi foi o preto que tem o código #000000 Cada cor escolhida é um código diferente. Então pegue seu código e cole na frente de background ficando assim:

background: #000000;
A parte azul você substitui pelo código da sua cor que você obteve.


Última edição por Gahh em Sex Mar 01, 2013 9:13 am, editado 1 vez(es)
Gahh
Gahh
Administrador
Administrador

Mensagens : 108
Pontos : 53826
Reputação : 166
Data de inscrição : 30/01/2013
Idade : 25
Localização : Chavantes - São Paulo

https://playforumonline.forumeiros.com

Ir para o topo Ir para baixo

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. Empty [Tutorial] Básico da Linguagem CSS & HTML - Parte 2 - Personalização - Posicionamento

Mensagem  Gahh Ter Fev 26, 2013 9:45 am

Vamos dar Continuidade ao Tutorial Parte 1.

Então eu irei comentar um pouco sobre os códigos de posicionamento. Esses comandos são: Margin, Padding, Align.

1º Etapa: Propriedades do Margin.

PropiedadeDescrição
margin-leftIntroduz uma margem a esquerda.
margin-rightIntroduz uma margem a direita.
margin-topIntroduz uma margem no topo.
margin-bottomIntroduz uma margem abaixo.
marginIntroduz uma margem que envolve todos os lado no código utilizado.


Legenda da cor da letra:
A cor Azul representa o tipo de margem (margin);
A cor Laranja representa o valor de espaço que terá na margem (margin);
A cor Vermelha representa o formato de medida que pode ser: px, cm, em, auto e %;



Exemplo 1 - Em formato CSS: margin-left

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-left:210px;
}

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 0111



Exemplo 2 - Em formato CSS: margin-right

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-right:210px;
}

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 0222



Exemplo 3 - Em formato CSS: margin-top

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-top:210px;
}

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 0444



Exemplo 4 - Em formato CSS: margin-bottom

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin-bottom:210px;
}

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 0555



Exemplo 5 - Em formato CSS: margin

#Defin {
width: 300px;
height: 100px;
border: #000000 2px solid;
margin:210px;
}

[Tutorial] Básico da Linguagem CSS & HTML - Parte 1 & 2 - Personalização - Cores e Fundo. 0333
Gahh
Gahh
Administrador
Administrador

Mensagens : 108
Pontos : 53826
Reputação : 166
Data de inscrição : 30/01/2013
Idade : 25
Localização : Chavantes - São Paulo

https://playforumonline.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos