Como usar efeitos de texto CSS3

A melhoria mais significativa para o texto em CSS3 é a @fonte

mecanismo que permite definir suas próprias fontes e empacotá-los com o seu site. CSS3 tem outros truques de formatação de texto disponíveis, também. o text-stroke e text-shadow regras permitem que você faça transformações interessantes no texto em suas páginas.

Ambas estas regras são usados ​​para decorar o texto, mas podem afetar a legibilidade, assim que você deve usá-los com cuidado. Eles são mais adequados para um texto maior (como manchetes) que o conteúdo principal do seu site.

acidente vascular cerebral texto

Com CSS3, você pode especificar uma cor de traço para seu texto. Isto define um esboço em torno da letra. Pode especificar a cor do traço (utilizando qualquer um dos valores de cor padrão CSS), bem como uma largura de traço (utilizando os atributos de tamanho normal).

image0.jpg

o text-stroke regra aplica-se este efeito. Você pode vê-lo usado no código:

textStroke.html

Texto Demonstração curso

Este texto tem um acidente vascular cerebral

Atualmente não há navegadores apoiar o text-stroke atribuir diretamente, mas os navegadores baseados no WebKit (Chrome e Safari) suportam o fornecedor específico -webkit- versão. Um navegador que não suporta a regra vai simplesmente ignorá-lo, de modo que este não deve ser uma parte significativa de seu projeto até que o suporte é mais completo.

Text-shadow

As sombras são outra característica comum de web designs modernos. Sombras adicionar um elemento de profundidade a uma página, mas eles também podem melhorar a legibilidade (se usado corretamente) para levantar um título da página. o text-shadow atributo era tecnicamente parte de CSS2, mas só recentemente foi apoiado por grandes navegadores.

image1.jpg
textShadow.html

Texto Demonstração Sombra

Este texto tem uma sombra

O atributo tem quatro parâmetros:

  • distância x: Determina o quão longe nos x (esquerda; direita) eixo da sombra será a partir do texto original. Um valor positivo move a sombra para a direita, e um valor negativo move para a esquerda.

  • offset y: Determina o quão longe no y (cima para baixo) o eixo da sombra será a partir do texto original. Um valor positivo move a sombra para baixo, e um valor negativo move a sombra para cima.

  • borrão: Especifica o raio borrão da sombra. Se o valor for 0px, não há nenhum borrão, ea sombra se parece com o texto original. Geralmente, você vai querer o valor borrão estar perto do mais longo dos seus deslocamentos. Isso permite que a sombra de ser reconhecível como uma sombra do texto, sem se tornar uma distração.

  • cor: Define a cor da sombra. Geralmente um cinza escuro é o preferido, mas você também pode tentar outras cores para efeitos especiais. Note que o desfoque tende a clarear a cor da sombra. Se houver uma grande quantidade de borrão aplicado, a cor da sombra pode ser da mesma cor que o texto. Se a sombra não será desfocada tanto, pode ser necessário para clarear a cor da sombra para facilitar a leitura.

O tamanho da sombra é determinada indiretamente com uma combinação de compensações e borrões. Você pode ter a experiência para obter a sombra que você está procurando. efeitos de sombra são melhores quando eles são sutis, pois eles podem afetar a legibilidade.

Um caso especial de sombreamento de texto pode ser usado para ajudar o texto destacam-se contra uma imagem de fundo. Aplique uma pequena sombra de uma cor contrastante. Esta técnica é frequentemente usado quando você precisa ter o texto em um fundo, porque cada letra produz o seu próprio fundo de alto contraste. Mais uma vez, certifique-se de não sacrificar a legibilidade por uma questão de ética de design.

Todos os navegadores mais recentes-modelo suporta o recurso text-shadow. Sem prefixos especiais são necessários.

menu