Depois de ter explicado como configurar o fundo (background) das varias partes do blog, decidi hoje falar de medidas.
É algo bastante importante num blog e que nem todos entendem como funciona.
Existem 4 tipos principais de medidas a ter em conta num blog que são:
Width: - define a largura de qualquer objecto.
Height: - define a altura.
Margin: - define a distância exterior de um objecto ao objecto que se encontre ao seu lado.
Padding: - define a distância interior da borda aos objectos.
Width
Na largura (width) existem as possibilidades de usar dois tipos de medidas, os pixels e a percentagem. Na ausência deste estilo a medida por defeito é a largura total disponível, ou seja 100%, mas esta medida pode ser fixada no valor que nós quisermos.
Por exemplo, se definirmos a largura total do blog para 50%, o blog vai ocupar metade da área visível do monitor, qualquer que seja a definição que se use nesse mesmo monitor.
Este estilo aparece-nos nos mais variados objectos que usamos no nosso blog, quer sejam vídeos, fotos, áreas de texto, etc.
Acontece muitas vezes que ao querermos publicar um vídeo, o player fique mais largo que a área onde o publicamos, quer seja num post ou na coluna lateral. Para resolver este problema basta que, no código desse vídeo, se procure este estilo, width, e se altere a medida que se encontra logo à frente.
Um exemplo disso é a publicação de um vídeo do Youtube num post. O vídeo do Youtube tem predefinido a largura de 425px e no entanto a área de publicação dum blog original do blogspot é 410px. Como podem ver, existe uma diferença de 15px que é o suficiente para que o vídeo fique a ocupar mais espaço que o que pretendíamos. A solução para este problema é alterar a largura do vídeo para a mesma medida que a área de publicação ou ainda mais fácil, alterar para 100% que irá fazer com que o vídeo se adapte à largura disponível.
Height
A altura (height) não é tão utilizada como a largura mas no entanto existem situações em que temos que fixar uma altura limite.
Numa foto ou vídeo, por exemplo, quando ajustamos a largura (width) convém sempre ajustar proporcionalmente a altura para que a imagem não fique deformada.
Tal como disse, esta alteração deve ser proporcional. Se uma imagem tiver as medidas 400 X 300 (400px de largura e 300px de altura), nós ao reduzirmos a largura para 300px, 75% do original, na altura vamos ter que reduzir os mesmos 75% (75% x 300 = 225px). Resumindo, na largura reduzimos 100px e na altura reduzimos 75px.
No entanto, nas áreas do blog, este estilo normalmente não é definido e a ausência do mesmo funciona de maneira diferente da largura. Enquanto que o width assume a área disponível exterior, o height assume a medida necessária ao seu conteúdo. É por isso que quantas mais coisas tivermos na página inicial, mais longo irá ser o blog.
Margin
Outro estilo a ter em conta é o margin. Este estilo, tal como disse, define a distância exterior de qualquer objecto a outro objecto.
É usado principalmente quando não queremos que qualquer objecto inserido no blog fique encostado à borda. Numa imagem publicada junto a um texto, se definirmos que margin: 10px, a imagem irá ficar afastado do texto 10 pixels.
As medidas para este objecto podem ser definidas das seguintes formas:
margin-top:
margin-right:
margin-bottom:
margin-left:
Ou, em alternativa, compilarmos tudo numa linha:
margin: 10px 10px 10px 10px;
A primeira medida refere-se ao topo, a segunda à direita, a terceira ao fundo e a quarta à esquerda. O valor 10px é exemplificativo.
Podemos também usar a propriedade auto para o objecto se auto-ajustar.
Ex: margin: 10px auto;
Neste caso o objecto irá ficar 10px distanciado do topo, mas irá assumir distâncias iguais em todos os outros lados. Serve, por exemplo, para centrar algo.
Padding
Por fim, vou falar do estilo padding. Este estilo funciona, mais ou menos, como o margin mas define a distância interior da borda de qualquer área ao seu conteúdo.
Um exemplo da utilização deste estilo é na área de publicação, se usarmos o padding-left: 10px, todos os artigos que publicarmos irão ficar com 10 pixels de distância da borda esquerda dessa mesma área.
Para usar este estilo podemos fazer como no margin:
padding-top:
padding-right:
padding-bottom:
padding-left:
Ou compilado numa linha:
padding: 10px 10px 10px 10px;
(ordem: topo, direita, fundo, esquerda)
Conhecer estilos do blog - medidas
Conhecer estilos do blog - background
No último artigo falei das várias partes que compõem um blog e disse que iria falar delas individualmente mas antes de o fazer acho que devo falar dos diversos estilos que se podem aplicar num blog em cada uma dessas partes.
No início do vosso código fonte, mais propriamente na área de estilos (CSS), podem encontrar, modificar, adicionar ou eliminar qualquer configuração que desejarem e para saber melhor onde mexer vou explicar o significado de cada estilo e como podem ser modificados.
Para começar vou começar pelo preenchimento de fundo das várias partes, o BACKGROUND.
Este estilo define o fundo de cada área onde esteja inserido e podem ser usadas as seguintes propriedades:
background-color:
define a cor de fundo através de um código de cor que podem encontrar aqui.
background-image:
define a imagem a usar como fundo.
background-repeat:
define se a imagem de fundo se vai repetir e como o deve fazer.
As variáveis são:
repeat; - para se repetir em toda a area
no-repeat; – para não se repetir
repeat-x; – para se repetir na horizontal
repeat-y; – para se repetir na vertical
backgroud-attachment:
define se a imagem de fundo vai ficar fixa ou se vai deslocar com o blog.
As variáveis são:
fixed; – para fixar a imagem
scroll; – para a imagem se deslocar (por defeito)
background-position:
define onde a imagem inicial se irá localizar quer seja na vertical, quer na horizontal. Para isso são usadas duas posições seguidas sendo a primeira para definir a posição vertical e a segunda a horizontal.
As variáveis são:
top; - para iniciar no topo (condição vertical)
bottom; - para iniciar no fundo (condição vertical)
left; - para iniciar alinhado á esquerda (condição horizontal)
right; para iniciar alinhado á direita (condição horizontal)
center; - para centrar a imagem (vertical e horizontal)
Ex: background-position: top center; (a imagem irá ficar encostada ao topo e centrada na horizontal)
Todas estas propriedades podem ser compiladas numa linha só e como exemplo vou mostrar como fica o estiilo para uma imagem encostada ao topo, alinhada à esqueda e a repetir-se na vertical, como a cor de fundo vermelha e que não se desloque com o blog:
background: #CC0000 url(‘ENDEREÇO DA IMAGEM’) top left repeat-y fixed;
Como podem ver, estão todas as variaveis inseridas apenas numa linha.
