[CÓDIGOS] html/css para templates

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[CÓDIGOS] html/css para templates

Mensagem por Blackmont em 2/6/2012, 12:31

Fala, gente bunita e zegzy! Como cês tão? \o
Hoje eu acordei de bom humor e resolvi, vendo que ninguém participou da challenge de códigos, fazer um apanhadinho pra vocês :3 não sou expert em códigos, mas a gente se arranja. O tutorial é dividido em três partes: html básico, CSS e html avançado.

primeira parte: HTML básico
    - Background
    - Borda
    - Texto
    - Posicionamento


segunda parte: CSS
    - Sintaxe
    - DIVs e SPANs
    - Transition
    - Scrollbar


terceira parte: HTML avançado
    - Tabelas
    - Padding e margin
    - Opacidade
    - CSS


Divirtam-se! E qualquer dúvida é só postar aí que a gente se resolve \o
e postem seus templates aqui, seus limdos, quero ver é


Última edição por Blackmont em 2/6/2012, 14:15, editado 1 vez(es)

_________________
it's NEW YORK CITY baby!

Blackmont
Ajudeiros
Ajudeiros

Mensagens : 87
Data de inscrição : 13/04/2012
Idade : 21
Localização : Brasília, DF

Ficha do personagem
Grupo: Membros
Total de pontos:
1000/1000  (1000/1000)
Desafios participados:

Ver perfil do usuário

Voltar ao Topo Ir em baixo

HTML básico

Mensagem por Blackmont em 2/6/2012, 14:12

_______________- 1, medidas: width e height.
São as medidas básicas de um template, sendo width a medida horizontal e height, a vertical. Em geral, são medidas por pixel, mas também se pode medir usando centímetros (cm).

EXEMPLO (CLIQUE):


width: 300px;
height: 150px;
background-color: #006400;

Código:
<center><div style="width: 300px; height: 150px; background-color: #006400; color: black;">

texto

</div></center>
Um detalhe é: sempre, SEMPRE coloque o 'px' colado nos números e depois, coloque ponto e vírgula ( ; ), senão vai dar um bug tão infeliz que você nem vai saber aonde foi parar. Sério.

_______________- 2, background: color, image, repeat, attachment.
Background é o plano de fundo do template, por exemplo esse verde dyvo do exemplo acima. Ele pode ser de três tipos:
color: é só uma cor como plano de fundo.

EXEMPLO DE COLOR (CLIQUE):


width: 300px;
height: 150px;
background-color: white;

Código:
<center><div style="width: 300px; height: 150px; background-color: white; color: black;">

texto

</div></center>
image: é uma imagem como plano de fundo, por exemplo:

EXEMPLO DE IMAGE (CLIQUE):

width: 300px;
height: 150px;
background-image: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg);


Código:
<center><div style="width: 300px; height: 150px; background-image: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg); color: white;">

texto

</div></center>
color, image, repeat: é uma opção menos usada, mas é tão boa quanto. Nela, você pode colocar uma cor, que é mostrada enquanto a imagem carrega. Também é um exemplo de background-repeat, que é a repetição da imagem no fundo.

EXEMPLO DE COLOR E IMAGE (CLIQUE):


width: 300px; height: 150px; background: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg) #006400; background-repeat: no-repeat; color: white;



Código:
<center><div style="width: 300px; height: 150px; background: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg) #006400; background-repeat: no-repeat; color: white;">

texto

</div></center>

attachment: é a forma de rolagem da imagem, uma é quando ela é fixa e a outra, quando pode rolar junto com a página.
ps: me parece que o forumeiros não suporta esse tipo de attachment, mas taí:

EXEMPLO DE ATTACHMENT FIXED (CLIQUE):


width: 300px; height: 150px; background: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg) #006400; background-repeat: no-repeat; background-attachment: fixed; color: white;



Código:
<center><div style="width: 300px; height: 150px; background: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg) #006400; background-repeat: no-repeat; background-attachment: fixed; color: white;">

texto

</div></center>

EXEMPLO DE ATTACHMENT SCROLL (CLIQUE):


width: 300px; height: 150px; background: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg) #006400; background-repeat: no-repeat; background-attachment: scroll; color: white;



Código:
<center><div style="width: 300px; height: 150px; background: url(http://www.photoshopstar.com/wp-content/uploads/2007/08/warning-tape-pattern.jpg) #006400; background-repeat: no-repeat; background-attachment: scroll; color: white;">

texto

</div></center>

_______________- 3, bordas.
Bordas são... bordas. Não tem outra definição. Como são muitas e de diversos tipos, fazer exemplos de cada uma seria muito difícil e pouco objetivo, então aqui vão os codes:

BORDAS (CLIQUE):

BORDAS SIMPLES:
    solid #fff
    dashed #fff
    dotter #fff
    double #fff

BORDAS 3D (firefox)
    groove #000
    ridge #000
    inset #000
    outset #000


_______________- 4, texto.
A parte mais importante de tudo, né? São diversas configurações que você pode usar individualmente ou misturadas, mas: BOM SENSO. Sempre, acima de tudo, lembre-se: um texto é pra ser lido. Tamanhos muito pequenos, cores exageradas... tudo isso contribui para que os Pandas morram =/

TEXTO (CLIQUE):










colorcor do texto#hexadecimal
text-alignalinhamentoleft, center, right, justify
text-decorationdecoraçãounderline, overline, line-through, blink
text-indentrecuouse px ou %
text-transformcaixa do textocapitalize, uppercase, lowercase
text-shadowsombra1px 1px 1px
letter-spacingespaçamento letrasuse px positivos ou negativos
word-spacingespaçamento palavrasuse px positivos ou negativos
directiondireção do textoltr (esquerca), rlt (direita)
white-spacequebras de linhapre (mantem), nowrap (ignora)
line heightdistância entre linhasuse px positivos ou negativos

_______________- 5, posicionamento.
Algo bem importante para a estética do template. Para vias de informação, existem três tipos (absolut, fixed e relative), mas os dois primeiros dizem respeito ao posicionamento da página inteiro, ou sejam: vão deformar a skin do board. Por isso, restrijo o aprendizado.

relative: é o posicionamento do elemento (div) tendo por base o primeiro pixel da primeira linha, o canto superior esquerdo. Você pode usar duas configurações por div, senão corre o risco de deformar: top e left OU right. Existe também o bottom, mas eu nunca consegui usar, então deixa quieto -q.

EXEMPLO DE POSITION (CLIQUE):
30x80px


Código:
<center><div style="width: 300px; height: 300px; background-color: #000;"><div style="width: 100px; height: 100px; background-color: #006400; position: relative; top: 30px; right: 80px; color: white">
texto
</div></div></center>

É isso, gente. Primeira parte, HTML básico: confere <3
Dúvidas, pergunte \o

_________________
it's NEW YORK CITY baby!

Blackmont
Ajudeiros
Ajudeiros

Mensagens : 87
Data de inscrição : 13/04/2012
Idade : 21
Localização : Brasília, DF

Ficha do personagem
Grupo: Membros
Total de pontos:
1000/1000  (1000/1000)
Desafios participados:

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

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