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