26 November 2006
by Magno Urbano
If you want to create shadows in letters just using CSS to put on your website — as the one shown on the image below —, follow the steps we show in this article:
1. Create a CSS for your page with the following contents:
<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>
Then, use the following sintax to insert the text on the source code of your HTML page:
<div id=”texto”><span>ABC</span>ABC</div>
Notice that the text ABC is repeated two times and that the tag <span> was put inside <div>.
This makes the browser draw two times the same letters — first the shadow followed by the orange text.
The only drawback of this method is that search engines will collect the information two times. Pay attention not to use this too much or search engines can interpret your site as spam and kick you out of the database.
| Se gostou desse artigo... | |
:: |
receba as novidades deste site por e-mail! |
Dê a sua opinião sobre este artigo
Ferramentas para webmasters | Os Segredos do AdSense | |
Verifique o Google PageRank do seu site | Optmize os seus sites e ganhe dinheiro com o Adsense (em vídeo) | |
PÁGINAS RECOMENDADAS | ARQUIVO (por mês e ano) | |
EfeitosVisuais.com Este é um site sobre grafismo, imagens, design, vídeos e demais assuntos relacionados à multimédia (Photoshop, Dreamweaver, Flash, Premiere, 3DS Max, Pinnacle Studio, etc.). Aqui encontrará tutoriais de Photoshop, Dreamweaver, Flash, edição de vídeo, Wordpress e muitos outros temas. Este site é também aberto ao leitor quee poderá contribuir com textos, dicas, artigos ou qualquer elemento que queira divulgar à comunidade. | ||