cursos photoshop, livros photoshop, tutoriais photoshop, tutoriais flash, tutoriais 3ds max
Tutoriais de Photoshop mais populares...
tutorial Photoshop - bola de basquetebol tutorial Photoshop - faca de churrasco tutorial Photoshop - como fazer cabelo tutorial Photoshop - marcar a ferro quente tutorial Photoshop - como fazer um escudo tutorial Photoshop - como fazer uma lata de refrigerante
26 Novembro 2006 - por Magno Urbano

por Magno Urbano

Para criar letras com sombra numa página web — como as que mostramos, de seguida —, normalmente, é preciso utilizar uma imagem previamente criada num programa gráfico como o Photoshop.

letras feitas com CSS

Entretanto, existe uma maneira de criar um efeito similar, utilizando apenas CSS.

Para criar um efeito igual ao que criámos, defina um estilo CSS para a sua página com os seguintes parâmetros:

<style type=”text/css”>
<!–
#texto {
color: #000000;
position: relative;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 36px;
}

#texto span {
color: #ffcc00;
display: block;
position: absolute;
top: -1px;
left: -1px;
}

–>
</style>

Ao inserir o texto, utilize a seguinte sintaxe no HTML da sua página:

<div id=”texto”><span>Efeitos Visuais</span>Efeitos Visuais</div>

Observe que há a repetição do termo Efeitos Visuais e que o tag <span> foi colocado dentro do <div>. Isso fará com que o texto seja escrito duas vezes pelo browser: primeiramente, a sombra e, posteriormente, o texto em laranja.

A única desvantagem desse método é ter o texto escrito duas vezes na página. Isso fará com que a informação seja, duplamente, registada nos motores de busca que classifiquem o site e lida nos leitores de ecrã — utilizados por pessoas com deficiências visuais, e não só.

 

 

 

 

Se gostou desse artigo...
::
receba as novidades deste site por e-mail!

 

o seu nome:
a mensagem:
 

 


Dê a sua opinião sobre este artigo

O seu nome

O seu e-mail

Opine sobre este artigo

Por favor copie o texto... pqPjyI na caixa seguinte:

CAPTCHA image

16 Opiniões

  1. dayana on Junho 1, 20072:03
    eu quero letras de photoshop
  2. gabrielle on Junho 16, 200723:06
    Muito bom, mas não sei o que fazer para criar esse efeito!
  3. anderson on Setembro 9, 200723:08
    Muito bom!!!
  4. Gerson China on Novembro 19, 20071:23
    Muito Bom Gostei Do site
  5. mjdhf on Dezembro 3, 200711:53
    qro saber como fazer letras com efeitos na fotos
  6. raphael on Dezembro 11, 20073:01
    muito BOM isso
  7. Lucas on Janeiro 5, 20085:16
    bom otimo gostei d mais
  8. priscila on Janeiro 8, 200814:09
    muito importante e bom para quem gosta de fazer montagens com fotos.
  9. luisa on Janeiro 15, 200821:37
    o site é espetacular e maravilhoso!
  10. DiOgO on Julho 9, 200818:29
    muito bom
  11. everton on Julho 14, 200821:57
    eu quero letras de photoshop
  12. reviane on Julho 30, 200820:39
    muito legalll
  13. flavia on Setembro 16, 20082:21
    gostei muito mas preciso de uma ajuda se puderem me ajudar quero fazer montagem com minhas fotos se souberem de algum saite que faça isso ou ate mesmo no picasa me mande a resposta pelo meu e-mail por favor desde ja obrigada
  14. sara on Dezembro 14, 200820:53
    q legal eu quero muitas letras
  15. Otavio on Agosto 18, 200918:15
    Não funciona no IE 6
  16. Magno Urbano on Agosto 18, 200920:45
    Os browswers da Microsoft não seguem o padrão especificado do W3C, nem no que se refere ao HTML nem ao CSS. De todas as versões do IE, a pior é a 6, que nem a Microsoft recomenda mais. A maioria dos sites internacionais está a banir a entrada de utilizadores com IE6. Nestes sites o utilizador vê uma mensagem carinhosa que convida-os a instalarem um browser moderno, como o Safari, Firefox, Ópera ou na pior das hipóteses - se o mundo acabar e não houver outro browser para escolher –, o IE8.
Curso Photoshop CC Curso Photoshop CC para iPad Curso Photoshop CC para iPhone Curso Photoshop CC para iPad Curso Photoshop CC para Mac Curso Photoshop CC para Apple TV

 

Ferramentas

Google PageRank
Conteúdo Duplicado

Categoriais

 ddddddd

Arquivos