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.
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ó.
| Tweetar |
| Se gostou desse artigo... | |
:: |
receba as novidades deste site por e-mail! |
Dê a sua opinião sobre este artigo
16 Opiniões
-
dayana on
Junho 1, 20072:03
eu quero letras de photoshop
-
gabrielle on
Junho 16, 200723:06
Muito bom, mas não sei o que fazer para criar esse efeito!
-
anderson on
Setembro 9, 200723:08
Muito bom!!!
-
Gerson China on
Novembro 19, 20071:23
Muito Bom Gostei Do site
-
mjdhf on
Dezembro 3, 200711:53
qro saber como fazer letras com efeitos na fotos
-
raphael on
Dezembro 11, 20073:01
muito BOM isso
-
Lucas on
Janeiro 5, 20085:16
bom otimo gostei d mais
-
priscila on
Janeiro 8, 200814:09
muito importante e bom para quem gosta de fazer montagens com fotos.
-
luisa on
Janeiro 15, 200821:37
o site é espetacular e maravilhoso!
-
DiOgO on
Julho 9, 200818:29
muito bom
-
everton on
Julho 14, 200821:57
eu quero letras de photoshop
-
reviane on
Julho 30, 200820:39
muito legalll
-
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
-
sara on
Dezembro 14, 200820:53
q legal eu quero muitas letras
-
Otavio on
Agosto 18, 200918:15
Não funciona no IE 6
-
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.
Google PageRank
Conteúdo Duplicado
- 2D
- 3D
- Adobe
- Apple
- Áudio
- Book & E-book
- Cinema
- Continuação
- Curso de Photoshop
- Cursos pela Internet
- Dicas
- e-learning
- Edição de Vídeo
- Fórum (2002-2005)
- Filmes - Making of
- Firefox
- Flash Catalyst
- Fotografia Digital
- Galeria de Imagens
- GIMP
- Ilustração
- Intel
- Linux
- Livro
- Microsoft
- Montagem de Fotos
- Nikon
- Pinnacle Studio
- Pixar
- Servidor Apache
- Software
- Tecnologias
- Tutoriais
- Ubuntu
- Vídeos
- Vídeos iPod
- Web
- Wordpress
- Yahoo!
- YouTube
ddddddd
- 2020: J - - - - - - - - - - D
- 2019: - - - - - - - - S - - -
- 2018: J - - - - - - - - - - -
- 2017: - - - - - - - - S - - -
- 2014: J - - - M - J - - - - -
- 2013: - - - A M - - - - - N -
- 2012: - F M - M - - A - - - -
- 2011: - - M A - - - - - O N -
- 2010: J - - A - J - - - - - -
- 2009: J F M A M J J A S O N D
- 2008: J F M A M J J A S O N D
- 2007: J F M A M J J A S O N D
- 2006: - F M - - J J A S O N D
- 2005: J - M - - J J - - - - -
- 2004: - F M A M J - - S - N D
- 2003: J F M A M J J A S O N D
- 2002: - - - - - - - - - - N D