Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Efeitos de Texto – Parte 1: text-shadow - Kolaborativa

Efeitos de Texto – Parte 1: text-shadow

text-shadow (Sombra de Texto)


O objetivo principal da propriedade é dar aos designers e programadores uma ferramenta para criar efeitos de texto que só poderiam ser feitos anteriormente com imagem. Um texto apresentado como uma imagem não é pesquisável e, portanto, muito ruim para motores de busca.

Outro efeito colateral é o fato de que as imagens podem ser muito maiores em termos de tamanho do arquivo do que uma pequena linha de código.

Como você pode saber, no CSS arquivos que contêm todo o layout de um site, são menores do que uma imagem na maioria dos sites. Então é realmente inteligente usar um css no lugar de imagens para reduzir o tráfego desnecessário.

Quando definido em uma folha de estilo CSS, a sintaxe da propriedade deverá ser parecido com esta:

Os dois primeiros valores especificam o comprimento da sombra. O primeiro valor especifica a distância horizontal e a segundo especifica a distância vertical da sombra. O terceiro valor especifica o raio do Blur (borrão) e último valor descreve a cor da sombra:

1. valor = A Coordenada X
2. valor = A Coordenada Y
3. valor = O raio do Blur (borrão)
4. valor = A cor da sombra

Utilizando números positivos os dois primeiros valores posicionam a sombra para a direita do texto, a coordenada X horizontalmente e a coordenada Y colocando a sombra abaixo do texto verticalmente.

O terceiro valor, o desfoque raio, é um valor opcional que pode ser especificado, mas não precisa. É a quantidade de pixels do texto é esticada que provoca um efeito de borrão. Se você não utilizar o terceiro valor é  como se você especificasse um Blur de raio zero.

Para navegadores baseados no WebKit, você pode usar valores RGBA, em vez de cores código hexadecimal como o quarto valor. O último número representa a transparência e pode ser ajustado entre 0.0 e 1.0 para que você possa fazer o texto de sombra mais sutil.

Exemplo:

Atualmente o suporte a essa propriedade está mais amplo.

Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

É claro que os efeitos causados por esta propriedade, muitas vezes dependem as cores do seu texto e seu fundo, então vamos dar uma olhada no que podemos fazer com todos aqueles combinações.

Sombra simples

Vamos começar com um texto preto em fundo branco:

Este é um texto com uma sombra suave.

Usando alguns valores negativos podemos obter também efeitos interessantes:

Este é um texto com uma sombra suave.

Ou você pode fazer ignorando o raio de Blur e definindo uma cor mais clara da sombra:

Este é um texto sem sombra suave.

Claro que você pode torná-lo mais colorido e horrível para ler:

Este é um texto muito colorido.

Texto gravado em metal

Texto sobre o efeito-metal é frequentemente utilizado pela Apple. Você deve usar um fundo cinza e uma cor de texto muito escura para isso. É nada mais do que uma sombra branca ou cinza claro, que é colocado 1px abaixo do texto. Você pode usar um Blur de 1px a torná-la mais redonda. Eu usei texto em negrito para tornar o efeito mais visível:

Este é um texto gravado em metal.

Isso funciona mesmo ao contrário em um fundo preto com texto cinza, ajustando apenas os valores de cor:

Este é um texto gravado em metal.

Ou você pode fazer de forma a aparentar que o texto se destaca do fundo:

Este é um texto gravado em metal.

Faça o seu texto brilhar

Ao utilizar o raio de desfoque (Blur), podemos obter alguns efeitos interessantes. Aqui está um texto brilhante sutil branco sobre um fundo negro:

Este é um texto brilhante.

Você também pode fazer o texto todo embaçado, usando a mesma cor de texto e de sombra, sem deslocamento:

Este é um texto muito brilhante.

Nós podemos usar a mesma cor para texto e fundo e tornar o texto visível apenas através da sombra de texto:

Este é um texto com impressão de luz.

Ou o contrário para dar a impressão de luz:

Este é um texto com impressão de luz.

Duplicando seu texto

Como text-shadow você pode fazer uma cópia duplicada de qualquer texto. Basta adicionar alguns pixels para o deslocamento vertical da sombra e usá-lo sem o Blur, dando assim um raio zero para ele:

Qual é a linha de texto, que é sombra?

Sombras múltiplas

O uso de múltiplas sombras parece incrível, e alcançamos esse efeito apenas colocando novamente a propriedade text-shadow separadas por vírgulas:

muito interessante, não?


FONTES DIVERSAS, PORÉM MUITAS INFORMAÇÕES FORAM TIRADAS DE SITES COMO HTTP://WWW.KREMALICIOUS.COM


Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

Nenhum comentário ainda.

Join the Conversation