X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Acesso Premium Free

Acesso a nossa biblioteca completa de artigos Hub Premium, arquivos de projeto e os primeiros 10% de cada Tutorial-Video da Biblioteca Tutorial on-line .

Criar sua conta gratuita agora!

Como criar sombras de texto no CSS3
Traduzido pelo Google Translate

Como mencionei no meu tutorial sobre como criar cantos arredondados, CSS3 está oferecendo um monte de incríveis novos recursos, como várias colunas, gradientes e, claro, efeitos, fronteira. Neste tutorial, vamos dar uma olhada em outra novidade, a criação de sombras no texto.

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

Passo 1

Para começar com este efeito, encontrar ou criar uma regra de CSS que você gostaria de aplicar a sombra texto. Provavelmente a melhor maneira de fazer uso disso seria criar uma regra de classe especificamente para aplicar este efeito. É isso que eu vou fazer de qualquer maneira. Eu também aplicado um pouco de formatação para o meu texto utilizando um elemento de parágrafo redefinido.

Passo 2

Em seguida, adicione o "text-shadow" propriedade à sua regra. Há quatro valores que podemos aplicar para o "text-shadow" propriedade. Primeiro, adicione em uma cor. Você pode usar qualquer cor que você gostaria, apesar de sombras são geralmente bastante escuro. Se você salvar o arquivo e verificar o seu trabalho em seu navegador, você verá que nada acontece. Isso é porque nós temos que definir algumas propriedades adicionais em primeiro lugar.

Passo 3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.


Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

O segundo valor controla a posição vertical da sombra. Um valor positivo aqui se moverá para baixo da sombra, enquanto um valor negativo move-o para cima.

O terceiro valor controla a quantidade de desfoque na sombra. Use um valor menor para uma maior sombra, ou um valor mais alto para uma sombra mais turva. Como você pode ver, eu prefiro usar valores bastante baixos.

E isso é tudo que existe para criar sombras no texto CSS3! Continuar a sua jornada de aprendizagem CSS marcando o tutorial abaixo:

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link