Conectar-se

Esqueci minha senha

Top dos mais postadores
Gahh
 
Tenn
 
Roger
 
nathan_guerreiro
 
Jean00
 
gabriel nunes
 
aKuA
 
VG12
 

Últimos assuntos
» Folga?
Qua Abr 10, 2013 10:02 am por Gahh

» [Sugestão]Reduzir pontos?
Qua Abr 10, 2013 9:58 am por Gahh

» Erro no sistema de pontos
Qua Abr 10, 2013 9:55 am por Gahh

» [Sugestão]Recompensa por atingir certo nível
Qua Abr 10, 2013 9:55 am por Gahh

» Tutoriais, quando vão vir.
Qua Abr 10, 2013 9:54 am por Gahh

» Vagas para postador
Qua Abr 10, 2013 9:53 am por Gahh

» Mais áreas melhor
Qua Abr 10, 2013 9:52 am por Gahh

» trancar tópicos?
Qua Abr 10, 2013 9:51 am por Gahh

» [Sugestão]Lista de Tutoriais
Qua Abr 10, 2013 9:50 am por Gahh

Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 14 em Ter Jun 25, 2013 3:53 am
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada


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

Ir em baixo

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

Mensagem  Gahh em Sab 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:
Como mudar um fundo a partir de imagens personalizadas feito por você.
Propriedades de repetir ou não imagens.
Definir tamanho (Largura e Comprimento).
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)
avatar
Gahh
Administrador
Administrador

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

http://playforumonline.forumeiros.com

Voltar ao Topo Ir em baixo

[Tutorial] Básico da Linguagem CSS & HTML - Parte 2 - Personalização - Posicionamento

Mensagem  Gahh em 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;
}





Exemplo 2 - Em formato CSS: margin-right

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





Exemplo 3 - Em formato CSS: margin-top

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





Exemplo 4 - Em formato CSS: margin-bottom

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





Exemplo 5 - Em formato CSS: margin

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

avatar
Gahh
Administrador
Administrador

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

http://playforumonline.forumeiros.com

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum