Controlar o espaço entre as letras com CSS

Postado por: Pedro Rogério em
  • 29 ago
  • 6

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.

  • Categorias: CSS
  • Tags:

Floats com width

Postado por: Pedro Rogério em
  • 28 ago
  • 5

Acho que muita gente não conhece isso, mas os floats sem width dão problemas de posicionamento no Opera (versões antigas), mas o W3C diz em sua especificação, que deve ser obrigatoriamente declarado o width para os floats de todos os elementos, exceto os elementos img, input, textarea, select e object.

Guia CSS – 9ª parte: Propriedade texto em CSS

Postado por: Pedro Rogério em
  • 24 ago
  • 5

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 »

Barra de rolagem com overflow

Postado por: Pedro Rogério em
  • 16 ago
  • 18

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.

Unidades de medida em line-height

Postado por: Pedro Rogério em
  • 10 ago
  • 1

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

  • Categorias: CSS
  • Tags:

Guia CSS – 8ª parte: Padding

Postado por: Pedro Rogério em
  • 7 ago
  • 3

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;

Continuar lendo »

Texto piscando com CSS

Postado por: Pedro Rogério em
  • 3 ago
  • 8

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>

Páginas:«1...18192021222324252627»