23/08/13
Okaeri, okaeri, suponho que este post neste blog que só uso para testes meus seja grande o suficiente para excluir uma saudação. É sobre as personalizações que se deve saber aplicar em tudo - sombras, bordas, fundos... Boa sorte às principiantes para decorar, mas não desanimem, não há nada como prática para aprender isto tudo de vez xD
Todos estes códigos não servem de nada se não os souber aplicar na área certa. Pode fazê-lo neste post aqui» www « Não se esqueça que essas áreas devem estar sempre seguidas de {}, e que os códigos que ensinarei aqui devem ser colocados dentro dessas chavetas, ou não funcionarão. O mesmo para hovers, mas explico melhor nesse post.
Nota: Se faltar um único sinal de pontuação que seja, os códigos já não dão, então fiquem atentos a isso. A única coisa que não faz diferença são espaços, parágrafos e maiúsculas/minúsculas.
Se quiser cor sólida, escreva:
Background: #ffffff; ou Background-color: #ffffff;
Todos estes códigos não servem de nada se não os souber aplicar na área certa. Pode fazê-lo neste post aqui» www « Não se esqueça que essas áreas devem estar sempre seguidas de {}, e que os códigos que ensinarei aqui devem ser colocados dentro dessas chavetas, ou não funcionarão. O mesmo para hovers, mas explico melhor nesse post.
Nota: Se faltar um único sinal de pontuação que seja, os códigos já não dão, então fiquem atentos a isso. A única coisa que não faz diferença são espaços, parágrafos e maiúsculas/minúsculas.
BackgroundÉ o fundo, claro. Você pode escolher usar cor sólida ou um padrão/imagem.
Se quiser cor sólida, escreva:
Background: #ffffff; ou Background-color: #ffffff;
- A cor está branca. Você pode mudar pegando os códigos desta tabela: www
- Não se esqueça que antes do código da cor vem sempre um #
Se quiser fundo com gradação de cor, escreva:
background: -webkit-linear-gradient( center top, #ffffff 20%, #cccccc 100% );
Se quiser uma imagem, escreva:
background: -webkit-linear-gradient( center top, #ffffff 20%, #cccccc 100% );
- O center top estabelece que a primeira parte da gradação ficará no topo em cima. Pode colocar noutra zona.
- O #ffffff 20% diz que 20% da imagem estará em branco. Troque pela cor que quiser.
- O #cccccc 100% indica a parte da imagem a preto. Pode mudar a cor.
Se quiser uma imagem, escreva:
Background: url(TROQUE PELA URL DA SUA IMAGEM) repeat;
- Não tem fundo nenhum. Tem de substituir o que está entre parênteses pela url da imagem que quer
- "Repeat" significa que o fundo se repete, as vezes necessárias até preencher o tamanho da zona onde foi colocado (ensino a mudar o tamanho mais abaixo)
- Se não quer que se repita, escreva "no-repeat" em vez de "repeat"
Border
São os contornos coloridos, que podem variar em cor, tipo de traço e espessura. Para colocar, escreva:
Border: 1px solid #cccccc;
Isso aplicará uma borda igual a toda a volta, mas você pode aplicar as bordas todas diferentes, ou colocar só nalguns lados. Para isso, escreva as linhas seguintes de acordo com o que quer:
- Border-top: 1px solid #cccccc; /*borda de cima*/
- Border-right: 1px solid #cccccc; /*borda da direita*/
- Border-bottom: 1px solid #cccccc; /*borda de baixo*/
- Border-left: 1px solid #cccccc; /*borda da esquerda*/
Agora, as em cada parte deve personalizar a borda como quiser, e para isso irá mexer no número, na palavra, e na cor.
O número é a grossura:
- Mantenha sempre o "px"
- Quanto maior o número, mais grosso. E quanto menor, mais fino
claro. - 0 retira a borda, mas para isso mais vale a pena não colocar essa frase.
- Não funciona com números negativos.
A palavra "solid" refere-se ao tipo de traço. Pode ser:
- Solid = lisa. Preview
- Dashed = tracejado. Preview
- Dotted = pontilhado. Preview
- Grove / Ridge = a linha é ganha relevo num tom mais escuro. Preview1 / Preview2
A cor basta pegar de uma tabela, não esqueça de manter o #
Outline
É parecido com a borda, e as personalizações também, mas fica dentro da caixa e não a contornar. É como uma borda negativa, dentro e não fora. Escreva essas duas linhas:
Outline offset: -5px;
Outline: 1px solid #cccccc;
Na linha que diz outline (a segunda), é onde você edita a espessura, tipo de traço e cor. Use o que aprendeu na área "border", lá ensina a editar isso tudinho. Afinal, como já disse, a outline funciona como uma borda negativa. Ou seja, edite:
- O número "1"
- A palavra "solid"
- A cor
A linha "outline offset" indica a distância a que a outline fica do limite da área.
- Só funciona com valores negativos
- Quanto maior for o valor absoluto (ou seja, só o 5, sem o sinal), mais distante. O vice-versa.
- Não se esqueça de manter o "px"!
Border-radius
Isso é para colocar os cantos arredondados, e das coisas mais simples se a intenção for colocá-las a toda a volta. Para isso, escreva:
Border-radius: 10px; ou Border-radius: 10px 10px 10px 10px;
Só no segundo caso você pode colocar bordas diferentes, sendo que:
- O primeiro 10px é o canto esquerdo em cima
- O segundo é o canto direito em cima
- O terceiro é o canto direito em baixo
- O quarto é o canto esquerdo em baixo
As bordas também podem ser editadas individualmente, caso você só queria mexer numa ou não decore. Escreva todos os códigos referentes ao canto que quer:
- Border-top-left-radius: 10px; /*Canto superior esquerdo*/
- Border-top-right-radius: 10px; /*Canto superior direito*/
- Border-bottom-right-radius: 10px; /*Canto inferior direito*/
- Border-bottom-left-radius: 10px; /*Canto inferior esquerdo*/
Box-shadow
Isso é a sombra da caixa. Antes de tudo, tanto pode estar dentro como fora da caixa, ou ambos, sendo que para isso deve colocar as duas linhas. A única diferença entre ambas é a palavra "inset"
Para sombra exterior, escreva:
Box-shadow: 2px 2px 2px #cccccc;
Para sombra interior, escreva:
Box shadow: inset 2px 2px 2px #cccccc;
O que você pode editar é:
- A cor, procurando numa tabela
- Em vez de "2px 2px 2px #cccccc", você pode escrever "2px 2px 2px rgba( 50, 50, 50, 0.42 );" - dará um ar de fundo meio-transparente. Mas eu não indico.
Quanto aos números:
- o primeiro 2px é a distância para a direita
- o segundo é a distância para baixo
- o terceiro dá um ar esfumado/desfocado
- se usar valores grandes nos 3 números (tipo 20), irá ver um fumo colorido longe entre a direita e o baixo.
- só funcionam números positivos.
Margin
É a distância entre os vários lados, funciona com valores negativos para aproximar e positivos para afastar. Se precisar de mudar, escreva:
Margin: 1px; ou Margin: 1px 1px 1px 1px;
Só no segundo caso você pode colocar margens diferentes:
Só no segundo caso você pode colocar margens diferentes:
- O primeiro 1px é o afastamento do topo
- O segundo é da direita
- O terceiro é de baixo
- O quarto é da esquerda
- Margim-top: 1px; /*margem do topo*/
- Margim-right: 1px; /*margem da direita*/
- Margim-bottom: 1px; /*margem de baixo*/
- Margim-left: 1px; /*margem da esquerda*/
Padding
É o acolchoamento, tipo o espaçamento entre as letras e um lado, ou entre os lados e a borda. Para mudar, escreva:
Padding: 1px; ou Padding: 1px 1px 1px 1px;
Só no segundo caso pode colocar paddings diferentes:
Só no segundo caso pode colocar paddings diferentes:
- O primeiro 1px é a distância entre o topo
- O segundo é entre a direita
- O terceiro é entre baixo
- O quarto é entre a esquerda
- Padding-top: 1px; /*espaçamento de cima*/
- Padding-right: 1px; /*espaçamento da direita*/
- Padding-bottom: 1px; /*espaçamento de baixo*/
- Padding-left: 1px; /*espaçamento da esquerda*/
RotateÉ a inclinação, caso queira. Para isso, escreva:
-webkit-transform: rotate(7deg);
Só pode alterar o número 7, sendo que:
- Valores positivos inclinam para a direita
- Valores negativos inclinam para a esquerda
- Quanto maior o valor absoluto, maior a inclinação
- Se mudar o número para 90, a área fica na vertical, tendo rodado 45 graus.
- Se mudar o número para 180, a área fica virada ao contrário.
H2O h2 refere-se ao título. De um gadgets, post.., até mesmo a data ou outras coisas. Segue-se sempre ao nome da área e antes das chavetas. No que diz h2, você pode escrever coisas além das anteriores:
Text-shadow: 1px 1px 1px #cccccc;
- Funciona como a sombra normal, com números e cor
- É a cor da letra
- Você pode mudar na tabela
- É o tamanho da letra
- Quanto maior o número, maior a letra. E vice-versa.
- É a fonte das palavras.
- Basta trocar "Tahoma" pelo nome da sua favorita.
Letter-spacing: 2px;
- É o espaçamento entre as letras.
- Quanto maior o número, mais se afastam, e vice-versa.
- 0 anula.
Text-align: justify;
- É o alinhamento do texto, definido pela palavra "justify"
- Justify = justificado
- Center = centrado
- Right = à direita
- Left = à esquerda
Width e EightSão, respectivamente, largura e altura. É aconselhável para delimitar algumas coisas, como as vezes em que um fundo se repete ou assim.
Para a largura, escreva:
Width: 50px;
Para a altura, escreva:
Eight: 50px;
- Só funcionar com números positivos.
- 0 anula.
HoverSempre que vir um título onde diz "qualquercoisa:hover {" ou ".qualquercoisa:hover {", significa que dentro das chavetas estará os efeitos ao passar o rato - é isso que significa :hover = mudança ao passar o rato. Pode ser excluído, caso não queira mudanças, mas eu adoro hovers porque dão um ar interativo ao layout e é engraçado assistir à transformação. Coisas que indico em hovers:
- Mudanças de cor ou fundo
- Criar ou retirar opacidade
- Aumento ou redução dos cantos arredondados
- Espaçamento entre letras
- Inclinação
- Mudança de bordas/outline
- Terminar sempre com -webkit-transition-duration: .60s; A única coisa que pode ser mudada é o número.
Eu creio que está tudo, mas se vir no seu HTML algo que não sabe o que é, pode perguntar que eu acrescento aqui ^^
