Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

O espaço entre as letras pode ser controlado com a propriedade letter-spacing do CSS, ela aceita valores positivos e também valores negativos, ou seja, se você colocar valores positivos, o espaço entre as letras será maior, valores negativos diminuem esse espaço. Peguemos esse código como exemplo:

<style type="text/css">

h1 { letter-spacing:15px; }
h2 { letter-spacing:-3px; }

</style>

Como podem ver, o meu título h1 terá um espaço entre as letras de 15px, e no h2, um espaço de -3px, dêem uma olhada nesse exemplo em funcionamento.

Cores

Você pode ajustar as cores do seu texto da seguinte forma:

cor: valor;

Os valores aceitos são:

• Nome da cor: Exemplo: (black, red…)
• Número Hexadecimal: Exemplo: (#ffffff, #000000)
• Código da cor RGB: Exemplo: ( rgb(255, 0, 0), rgb(0, 0, 0) )

Letter Spacing

Ou espaço entre as letras, pode ser ajustado da seguinte forma, deixando o valor em 0, impede que o texto justifique. Ele também aceita valores negativos.

letter-spacing: valor;

Valores aceitos:

• normal
• comprimento

Continuar lendo »

Se você precisa fazer uma barra de rolagem em uma div, existe uma maneira muito simples de se obter esse efeito, usaremos a propriedade overflow do CSS. Reparem no código abaixo:

#scroll {
  width:300px;
  height:170px;
  background-color:#F2F2F2;
  overflow:auto;
}

Agora no HTML criaremos uma div chamada scroll onde colocare-mos o nosso conteúdo que queremos que tenha a barra de rolagem:

<div id="scroll">
  <p>Aqui vai o conteúdo da div</p>
</div>

O que o overflow:auto faz é o seguinte, reparem que foi definido uma altura pra nossa div de 170px, quando o conteúdo ultrapassar essa altura, ele cria uma barra de rolagem automaticamente, interessante não, então veja um exemplo em funcionamento.

Segundo as especificações das CSS 2.1, na propriedade line-height das CSS não é necessário especificar uma unidade de medida concreta(em, px, ou outra qualquer). A melhor opção seria não colocá-la, pois ela hedará o valor da propriedade font-size do elemento:

ul {font-size: 15px; line-height:1;}
li { font-size: 10px; } /* Tomará como line-height 10px */
small {font-size: 80%; line-height: 8px;} /* Tomará como line-height 8px */

O único problema é que o Validador de CSS do W3C não aceita valores sem unidades de medida.

Referências

Meyer Web

Padding é a distância do elemento entre a borda e o seu conteúdo. As regras para margem também se aplicam ao padding, excepcionalmente o valor “auto” e valores negativos, que não podem ser declarados:

padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;

Você também pode declarar esses valores para padding em uma única propriedade:

padding: 10px 10px 10px 10px;

Se você for declarar o padding como acima, ele segue a seguinte ordem:

• top
• right
• bottom
• left

Declarando apenas um valor, ele é ajustado para todos os lados:

padding: 10px;

Declarando apenas 2 ou 3 valores, funcionaria da seguinte forma:

padding: 10px 10px; Aqui o primeiro valor ajusta o padding para top e bottom e o segundo valor para left e right.

padding: 10px 10px 10px; Aqui o primeiro valor ajusta o padding para top, o segundo para left e right e o terceiro para bottom.

Como você pode reparar no exemplo abaixo, a div container tem um padding de 20px:

#container {
    width:760px;
    margin:0 auto;
    padding:20px;
    border:1px solid #000;
    background:#FFF;
}

Isso colocaria o conteúdo de container a 20px de sua borda.

Tradução do artigo original de: CSS Basics.

O exemplo que vou citar nos faz voltar aos primeiros anos da Internet, onde tinhamos aquelas interfaces pobres. Com o tempo foram surgindo novos recursos, e um deles foi a tag blink, visando dar mais dinamismo as páginas Web, mas com a evolução do HTML, logo ela caiu em desuso. Mas ainda existe uma forma de implementá-la através de CSS:

<style type="text/css">
.blink { text-decoration: blink; }
</style>

Nosso HTML fica da seguinte forma:

<span class="blink">Aqui você coloca o texto</span>

Veja um exemplo em funcionamento, mas muito cuidado, por que poucos browsers ainda a suportam, eu fiz alguns testes e ele funcionou perfeitamente somente no Firefox, no Opera 9 e no IE não funcionou, se alguém puder testar em outros browsers.

<update 22-11-2006>Ele também não funciona no IE 7</update>

A propriedade margem declara a margem entre um elemento do HTML e os elementos em torno dela. A propriedade margem pode ser ajustada para o alto, direita, abaixo e a esquerda:

margin-top: valor definido pelo usuário ou auto;
margin-right: valor definido pelo usuário ou auto;
margin-bottom: valor definido pelo usuário ou auto;
margin-left: valor definido pelo usuário ou auto;

Você tem a escolha de 3 valores para a propriedade margem, que são as seguintes:

• Comprimento: em pixels
• Porcentagem
• Auto

Continuar lendo »

Quando estamos desenvolvendo um site, é habitual e recomendável utilizar-mos links para pular entre seções para aqueles que utilizam leitores de tela possam navegar rapidamente entre as várias seções da página sem ter que esperar que a mesma seja lida totalmente. Por exemplo, é recomendado criar-mos links que saltem do menu ao conteúdo para que o mesmo não seja lido várias vezes dentro de um mesmo site.

Esses links ficam invisíveis para aqueles que usam navegadores normais. A técnica mais usada é a propriedade display:none.

.oculto {
    display:none
}

Logo, o HTML fica da seguinte forma:

<a class="oculto" href="conteudo">Ir ao conteúdo</a>

Só que existe um problema que alguns leitores de tela não lêem conteúdo oculto com essa propriedade, e outros lêem normalmente, quer dizer, o link está alí para proporcionar ajuda as pessoas e não é lido. Existe uma outra técnica para acabar com esse problema que visa garantir uma maior compatibilidade. Ao invés de display:none, usamos o seguinte:

.oculto {
    position: absolute;
    top: -1600px;
}

Simples, agora você tem a certeza de que o conteúdo estará disponível a todos os leitores de tela.

A unidade de medida relativa “em” tem como finalidade indicar o número de vezes que se deve aumentar o tamanho da letra em relação ao tamanho do elemento que a contém. Para uma melhor compreensão ao desenrolar deste post, verifique abaixo os valores em px para em:

1em = 10px
1.2em = 12px
1.5em = 15px

Muitas pessoas não sabem, mas o valor definido nos navegadores para o tamanho das fontes é de 16px, então qualquer elemento dentro de <body> terá o seguinte tamanho:

1em = 16px
2em = 32px
0.5em = 8px

Mas, se por um acaso, definir-mos um tamanho para um elemento, por exemplo p, que está dentro de body, o elemento filho estabelece seu tamanho em relação ao elemento pai. Por exemplo, se o tamanho das fontes no navegador está definido como 16px:

body { font-size:0.5em; }
p { font-size:2em; }

O elemento p vai ter um tamanho de 16px, não de 32px, por que ele “herda” o tamanho definido em body (a metade, 8px) e o dobra (2×8=16). Dùvidas beba direto da fonte.

Se você trabalha com unidades de medida absolutas, e gostaria de começar a trabalhar com unidades de medidas relativas (em, pixels…), e anda meio perdido, existe um site que faz a converssão de pixel para em, assim fica bem mais fácil de trabalhar né, agora você não fica mais perdido, alterando o tamanho de suas fontes toda hora até achar a que você queria.

EM CALCULATOR