A carregar...



Escrever Texto Sobre Imagem


Por vezes temos necessidade de escrever um texto sobre uma imagem postada. Em vez de usarmos o Photoshop ou outro qualquer software de edição de imagem, online ou não, é muito simples conseguir isso sem qualquer dessas ferramentas.
Vamos ver como:

1. Imagem com texto escrito sobre ela













Este Livro É Muito Interessante!






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



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





O livro de Aravind Adiga O Tigre Branco, é muito bom.




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>&nbsp; <a href="http://www.aravindadiga.com/" target="_blank">O Tigre Branco</a>&nbsp;é muito bom
</small>
</DIV>
</DIV>


Enjoy!
NB: Esta dica foi retirada e adaptada de Mandarin Design. THKS!










                         


Mensagens relacionadas (por Tags)






Responda a este post


Enviar um comentário