|
|
|
|
|
Bem Vindo Ao Mundo Blog
Tutorial
-
Escrever
por cima das imagens
Vamos aprender a colocar texto em
cima de uma imagem, utilizando um pequeno truque com tabelas.
Como o leitor
saberá, as imagens ocupam um espaço na página que
não pode ser ocupada com texto, ou seja, se colocarmos uma
imagem em um lugar, à princípio, não poderia ser
colocado nem texto nem outros elementos em cima. Bom, isto não
é totalmente certo. Realmente, pode-se utilizar camadas para
realizar essa tarefa, mas o trabalho com camadas sempre é
complicado e pode chegar a dar problemas de compatibilidade com
diferentes navegadores.
Este
exemplo pode
ser útil para muitos casos. Por exemplo, para lidar com fundos
que tenham várias cores, ou para escrever texto decorado com um
fundo bonito de imagem que não tem porque se repetir em toda a
página.
O melhor é
visualizarmos
o efeito buscado em uma página a parte.
O código deste exemplo é o seguinte:
<table border=1 bordercolor=black align=center
width=159 cellpadding=3 cellspacing=2 background="huella.gif"
height="146">
<tr>
<td>
<font size=2 face="arial,verdana">
<br>
Esta é a digital do meu cachorro.
<br>
<br>
Estou muito contente de que se passeie de vez em quando por este site.
</font>
</td>
</tr>
</table>
Trata-se de uma tabela a qual colocamos uma imagem de fundo, utilizando
o atributo background. Para que apareça a imagem inteira, a
tabela se
dimensiona ao tamanho da imagem. O texto que quisermos escrever no
fundo da imagem se coloca, tal qual, na célula.
Outro exemplo de imagem de fundo na tabela
Outro efeito que fica muito atraente é criar ima imagem com uma
trama de duas cores, que pode ser utilizada de fundo, na página
ou
então em uma tabela.
Pode-se ver o exemplo aqui.
O código da tabela seria o seguinte:
<table align=center width=700 cellpadding=3
cellspacing=2 background="trama.gif" bgcolor="000000">
<tr>
<td>
<font size=2 face="arial,verdana" color="#ffffff">
Isto poderia ser uma barra de links | Link 2 | Outro link | Termino com
os links
</font>
</td>
</tr>
</table>
É um exemplo muito simples e pode se conseguir um efeito
bastante
elaborado. Se embelezarmos um pouco mais, poderia ser utilizado para
uma barra de navegação muito decente.
Observação: É importante que a cor das tabelas
(atributo bgcolor)
ou as células onde você for colocar as imagens de fundo
(atributo
background) seja o mais parecido à cor predominante da imagem.
Deste
modo, poderão ser vistos perfeitamente os textos que estiverem
escritos
na célula enquanto se carrega a imagem de fundo ou, inclusive,
se chega
a se carregar por qualquer problema.
fonte:
crieseuwebsite
|
|
|
|
|
