Leandro Oriente - Space DevMedia

Space de Leandro Oriente
<< Space Anterior \| Próximo Space >>	Ir para Meu DevSpace \| \| Ir para o Fórum \| Busca Autor

Últimas 20 atualizações de Leandro Oriente

Artigo - Trabalhando com a propriedade Font

Opa pessoal, nesse artigo vou comentar sobre a propriedade Font e dar algumas dicas legais para o cenário atual da Web.

A propriedade font é responsável por definir a formatação da(s) fonte(s) utilizada(s) na sua página HTML. Ela é dividida em 4 partes:

Font-style - Essa propriedade é usada para definir o estilo da fonte. Ela pode receber o valor normal, italic e oblique.

O modo normal deixa a fonte com o estilo padrão, o modo italic deixa a fonte em itálico e o modo oblique deixa a fonte obliquoa.

Css:

#elemento { font-style: italic; }

Font-variant - Com essa propriedade você pode alterar as variantes normal e small-caps. A normal como sempre é o formato default, enquanto o small-caps tem um uso meio confuso e que deve ser evitado.

Ele coloca todas as letras em maiúsculo, sendo as verdadeiramente maiúsculas um pouco maior. Poucas fontes aceitam bem essa propriedade e ela não é muito usada pelos desenvolvedores.

Css:

#elemento { font-variant: small-caps; }

Font-weight - Essa propriedade é responsável pela espessura da fonte. Ela pode receber os valores normal que a deixa com a espessura padrão, lighter que deixa a fonte mais fina (raramente funciona corretamente, deve ser evitado), bold que deixa a fonte em negrito e bolder que deixa ela mais realçada ainda (como o lighter, raramente funciona corretamente).

Você também pode definir um intervalo entre 100 e 900, sendo 400 o equivalente ao normal e 700 ao bold.

Css:

#elemento { font-weight: bold; }

Font-size - Através do font-size você pode regular o tamanho da fonte. As medidas adotados podem ser qualquer uma utilizada no css (px, em, %...).

Css:

	#elemento { font-size: 24px; }

Font-family - O font-family define qual família de fonte você vai usar. O ideal é trabalhar com fontes conhecidas como Arial, Helvetica, Tahoma e etc. Ao utilizar o font-size o navegador

...

Exibição do post interrompida. Para ler conteúdo completo, clique aqui

15/05/2012 15:52:00

Artigo - Como usar a propriedade Position - CSS

Olá pessoal, nesse artigo vou ensinar a usar a propriedade Position do CSS. Lembrando que essa é uma propriedade do CSS 2.1 e funciona perfeitamente em todos os navegadores (browsers) modernos.

Após entender a propriedade position tenha cuidado ao utilizar ela. O foco dessa propriedade é posicionar pequenos detalhes do layout, para diagramar o site utilize o bom e velho Float.

A propriedade position pode assumir 4 valores diferentes: Static, Relative, Absolute e Fixed. Segue abaixo a explicação para de cada uma:

Position Static:

Esse é o valor default de todo elemento HTML, ou seja, ele vai seguir o fluxo comum da sua página. Ex:

Listagem 1: Valor default

h1 { position: static }

Position Relative:

Utilizando o position Relative o elemento passa a aceitar as propriedades Top, Bottom, Left e Right. Com elas você pode alterar o posicionamento do elemento. Ex:

Listagem 2: Html

<body>
  <div>
	<h1>Sou um h1</h1>
	<h2>Sou um h2</h2>
  </div>
</body>

Listagem 3: Css

* { margin: 0; padding: 0;} /*Reset*/

	body { background: #000; }
div { background: #eee; margin: 200px 200px; width: 300px; height: 300px; }	
	h1 { position: relative; top: 20px; left: 20px; }
	h2 { top: 20px; left: 20px; }

Resultado:

Notem que o h1 se posicionou de acordo com o left e top enquanto o h2 manteve o posicionamento comum, ou seja, não atendeu as valores do left e top. Isso se deve porque elementos com position static (default) não podem ser posicionados.

Position Absolute:

O position Absolute é um grande quebra galho no Css. Com ele você pode posicionar qualquer elemento de acordo com o elemento pai que tenha um position diferente de static.

Listagem 4: Breve explicação de elementos pai, filho e irmãos.

<div>

  <h1>

    <span></span>

  </h1>

  <p></p>
</div>

O elemento DIV é pai dos elementos H1, P e SPAN. Os elementos H1, P e SPAN são filhos do elemento DIV. Os elementos H1 e P são irmãos por estarem no mesmo nível. E o elemento SPAN é filho do elemento H1 e também do elemento DIV.

Continuando a explicação sobre o Position Absolute:

Tenham cuidado ao utilizar o positon absolute pois ele deixa de fazer parte do fluxo comum do documento e o

...

Exibição do post interrompida. Para ler conteúdo completo, clique aqui

11/05/2012 09:21:00

Artigo - Como usar as propriedades Margin e Padding - CSS

Olá pessoal, nesse artigo vamos explorar a fundo as propriedades Margin e Padding do CSS. Apesar de parecerem bem simples, tem alguns segredos importantes que precisam ser levados em conta.

Margin

A propriedade margin simplesmente adiciona uma margem ao seu elemento. Você pode utilizar qualquer medida Css (px, pt, em, %...) como tamanho da propriedade margin, além disso você pode atribuir valores negativos, mas tenha cuidado com eles.

Ela deve ser usada da seguinte maneira:

Listagem 1: Css

#elemento { 
    margin-top: 15px; 
    margin-right: 10px;
    margin-bottom: 25px;
    margin-left: 35px;
}

Essa é a declaração completa, porém existe uma forma mais prática para declarar o margin quando você deseja adicionar margens a todos os lados do elemento.

Listagem 2: Css

#elemento { margin: 15px 10px 25px 35px; }

Utilizei os mesmo valores justamente para fazer a relação, na maneira curta (shorthand) o primeiro valor é responsável pela margem do topo, a segunda pela direita, a terceira pela da base e a quarta pela esquerda. Ex: #elemento { margin: top right bottom left };

Caso o valor da margem do topo seja igual a da base e a da direita seja igual a da esquerda você pode declarar dessa forma:

Listagem 3: Css