Como usar efeitos de texto css3

Video: efeito css3 texto

A melhoria mais significativa para texto em CSS3 é a @Fonte mecanismo que permite que você defina 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, então você deve usá-los com cuidado. Eles são mais adequados para 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. Você pode especificar a cor do traço (usando qualquer um dos valores de cor CSS padrão), bem como uma largura de traçado (usando os atributos de tamanho normal).

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

Video: Como Fazer o Efeito Texto de Fogo no Photoshop

textStroke.html

Texto Demonstração curso

Este texto tem um acidente vascular cerebral

Atualmente não há navegadores suportam 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 do CSS2, mas só recentemente foi apoiada pela maioria dos navegadores.



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.

  • compensar-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 de 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 de estar perto o mais longo dos seus deslocamentos. Isso permite que a sombra para ser reconhecível como uma sombra do texto, sem se tornar uma distração.

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

    Video: Como aplicar Brilho / Reflexo em Texto no Photoshop (75 Efeitos)

O tamanho da sombra é determinado indiretamente com uma combinação de compensações e borrões. Você pode ter que experimentar 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 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 para não sacrificar a legibilidade por causa de ética de design.

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


Publicações relacionadas