Vamos ver como:
1. Imagem com texto escrito sobre ela
Para utilizar esta dica basta colocar uma div dentro de outra.
Vejam abaixo o código que utilizei no post para a imagem que aparece acima, e depois alterem-no de acordo com as vossas necessidades.
Penso que não apresenta dificuldade nenhuma.
código:
<DIV style="width:225px;height:363px;background: url(http://www.profelectro.info/Uploads/luisj/oTigreBranco.jpg) top right no-repeat;">
<div style="font-size:x-large;color:blue;padding:30px;">
<br>
<br>
<br>
<br>
<br>
<center><b>Este Livro É Muito Interessante!</b></center>
</div>
</DIV>
Dentro desta linha apresento abaixo mais alguns efeitos e o respectivo código, logo abaixo de cada um.
2. Caixa com fundo e texto sobre esse fundo
O livro "O Tigre Branco", de
ARAVIND ADIGA, é muito bom
ARAVIND ADIGA, é muito bom
código:
<DIV align="center">
<div style="width:300px;font-family: sans-serif;font-weight: bold;text-transform: uppercase;text-align: center;padding:10px;background:#E6E6D7;border:1px solid black;">O livro "O Tigre Branco", de
<span style="color:chocolate;font-weight: bolder;"><br>ARAVIND ADIGA</span> é, muito bom
</div>
</DIV>
3. Foto enquadrada, com legenda e com links
código:
<DIV align="center">
<DIV style="width:300px;height:400px;padding-left:15px;padding-right:15px;padding-bottom:60px;padding-top:15px;background:white;border:1px solid black;text-align:center;"><img style="border:1px solid black;" src="http://www.profelectro.info/Uploads/luisj/oTigreBranco.jpg" width="225" height="363">
<br><small>
O livro de <a href="http://en.wikipedia.org/wiki/Aravind_Adiga" target="_blank">Aravind Adiga</a> <a href="http://www.aravindadiga.com/" target="_blank">O Tigre Branco</a> é muito bom
</small>
</DIV>
</DIV>
Enjoy!
NB: Esta dica foi retirada e adaptada de Mandarin Design. THKS!
Tags:
Responda a este post
Enviar um comentário