Aprendendo CSS3 – Trabalhando com Textos

Novamente falando sobre CSS3, em sua série, hoje iremos ver um pouco as propriedades de texto disponíveis no CSS3. São elas:

  • text-shadow
  • text-overflow
  • Ruptura de palavras longas (word-wrap)

Text-shadow

É o box-shadow dos textos… Isto mesmo, o conceito é o mesmo, apenas a aplicação é “fechada” aos textos. Já falei sobre o box-shadow aqui, recomendo que visualize este artigo também para compreender melhor o text-shadow.

Usar text-shadow traz um número muito grande de vantagens, tanto para a interface/design do website, quanto pela facilidade de aplicação, uma vez que dispensa o uso de imagens ou Javascripts para reproduzir o mesmo efeito. Além do mais que é uma propriedade bem completa, em relação as técnicas anteriores.

Sintax: text-shadow:  <sombra> [ , <sombra> ]* | none

<sombra>: [ <posicao-x> <posicao-y> <blur-radius>? <cor> ]

h1{
	text-shadow: 2px 3px 5px #555;
}

A primeira observação que faço, é que não há vendors(-moz-, -webkit-) para a propriedade text-shadow. Então é necessário apenas uma declaração para atingir todos os browsers – que suportam CSS3 é claro.

Para a declaração, primeiramente temos as medidas para posicionamento X e Y. A posição X é o mesmo que posição horizontal relativa ao texto e Y, a vertical.

Logo após as posições temos o blur-radius, que é o responsável por criar o efeito do sombreamento. O valor, é opcional, com o padrão sendo 0 (zero). Se você quer o efeito de ofuscamento no sombra, você deve setar o valor para esta propriedade, caso contrário ficará uma sombra “reta”.

E para o último valor, temos a cor da sombra. Vale lembrar que se houver valor para blur-radius maior que zero, então, a cor, na largura – ou valor – do blur-radius será enfraquecida para criar o efeito de ofuscamento. Veja o post sobre as cores para você entender melhor as cores em CSS3.

Observações:

  • As medidas para X e Y, podem ser em px, em, …, ou seja lá qual for o formato que você usa.
  • No posicionamento, você também pode usar valores negativos, neste caso a sombra seria rendenizada no lado oposto ao padrão.
  • Blur-radius não suporta valores negativo.
  • Diferente de box-shadow, text-shadow não aceita o inset, isto causará um erro e a propriedade será ignorada. É claro que há algumas técnicas para reproduzir o valor inset, que você pode ver aqui e aqui.

Veja o exemplo Mais detalhes

Text-overflow

Algumas vezes, você se depara com alguns problemas no texto, como por exemplo, o texto é maior que a caixa (div) disponível, saindo para fora. Não é um problema tão comum, mas acontece. Para corrigir isto, algumas pessoas usam os três pontinhos (chamados ellipsis em inglês) “…” no final, manualmente mesmo.

É um incômodo, principalmente quando esta área é atualizada com frequência. No CSS3 foi introduzido a propriedade text-overflow, que busca solucionar este problema automaticamente, independente do tamanho do texto.

Sintax: text-overflow: clip | ellipsis

clip: É o valor padrão. O texto apenas “sumirá” quando não tiver área disponível para o mesmo.
ellipsis: É adicionado os três pontinhos (‘…’) no final da área disponível para o texto, escondendo o texto restante.

div{
	color: #000;
	margin: 20px;
	width: 500px;
	height: 50px;
	border: 2px solid #FFF;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

Para usar text-overflow é necessário alguns requisitos, que estão separados na exemplo acima. O primeiro é que o valor para overflow, não pode ser visible. É vital a declaração da propriedade overflow, caso contrário, o texto irá saltar para fora. Sendo assim primeiro definimos o valor para overflow, prevenindo a “saída” do texto e de qualquer outro elemento.

Logo após, para exemplo, foi declarado a propriedade white-space, previnindo que o texto avance para uma próxima linha. Não é um propriedade obrigatório, mas foi destacada aqui pois tem basicamente o mesmo efeito do overflow, voltado para os textos.

E para concluir, temos a propriedade text-overflow, que já foi descrita na sintax.

Observações:

  • Se você definir a propriedade text-overflow como ellipsis, saiba que irá se aplicar somente ao elemento atual. Por exemplo, se você aplicar a propriedade em div e o texto estiver em div > p, não irá funcionar o modo ellipsis, funcionará apenas no texto esteja exatamente em div.
  • Esta propriedade está disponível desde o IE6, mas só foi consolidada no CSS3.
  • Para o IE6 você deve usar width: 100% no elemento, caso contrário não funcionará.
  • Apesar de estar disponível no Internet Explorer, outros navegadores, como o Mozilla, não tem suporte a esta propriedade, a menos que o navegador tenha CSS3 “rodando”.
  • Em tabelas, você deve adicionar a propriedade table-layout:fixed; para funcionar corretamente.

Veja o exemplo Mais detalhes

Word-wrap

A propriedade word-wrap, foi curiosamente inventada pela Microsoft (Internet Explorer) e implementada no CSS3. Seu uso é evidente quando uma palavra excede a área disponível, mais ou menos o que acontece em text-overflow, sendo neste caso em palavras. Um bom exemplo é um link grande, que não se encaixa na área disponível.

Sintax: word-wrap: normal | break-word

normal: Valor padrão. não há nenhuma mudança no tratamento da palavra…
break-word: Quebra a palavra de forma que se encaixe na área disponível.

div{
	background: #FFF;
	color: #000;
	margin: 20px;
	padding: 10px;
	width: 450px;
	word-wrap: break-word;
}

Observação:

  • Funcionará apenas se text-wrap estiver com o valor normal ou suppress.
  • Como esta propriedade foi criada pela Microsoft, é claro que IEs < 9 tem suporte a esta propriedade.

Veja o exemplo Mais detalhes

Concluindo

Não foram muitas as implementações para texto no CSS3, mas foram suficiente para solucionar uma série de problemas, o que já ajuda muito…
Espero que tenham entendido como funciona cada propriedade. Até a próxima.

A Séria Completa

Iniciando com CSS3
Prosseguindo com CSS3 – Bordas e Sombras
Avançando com CSS3 – Trabalhando com Backgrounds
Avançando com CSS3 – Entendendo as Cores
Aprendendo CSS3 – Trabalhando com Textos
Desenvolvendo CSS3 – Propriedades de Interface
Desenvolvendo CSS3 – Propriedades de Interface: Múltiplas Colunas em CSS3

5 Comentários

  1. Philip disse:
    26 de outubro de 2010 às 11:34

    Muito útil toda a série.

    Obrigado e parabéns!

  2. Sérgio Rodrigues disse:
    26 de outubro de 2010 às 12:25

    Muito bom seu post, mais um parabéns pelo seu amplo conhecimento. Por falar em MS, o atributo “contenteditable”, também criado pela MS esta vingando no #html5. Esse atributo tem como função, permitir ao usuário editar o conteúdo da página direto no navegador..Os valores para ele são ‘true’ e ‘false’..

  3. Carlos Eduardo disse:
    26 de outubro de 2010 às 15:58

    Parabéns pelo artigo e por divulgar eu conhecimento. Esses tempos fiz um artigo mostrando 10 efeitos com CSS3. Quando tiver um tempinho dê uma passadinha por lá.

    GRANDE abraço.

  4. Marcio Toledo disse:
    26 de outubro de 2010 às 15:59

    Opa, boa! Belo post… ainda não tinha parado pra ver essas propriedades!
    Já add seu blog pra acompanhar os feeds.. []s

  5. Eder disse:
    26 de outubro de 2010 às 16:05

    Sensacional man.. ;)

Faça um Comentário