Legendas em imagens do post com CSS
Tuesday 07/08/2012 às 22:20 | Arquivado em: CSS, Tutoriais

Oi! Vim estrear a categoria de tutoriais aqui do blog. Na verdade são apenas algumas dicas de como deixar o blog mais bacana ^^

Vocês devem ter visto que agora é moda ter legendas estilizadas nas fotos do post. O legal é que a legenda ajuda a explicar e a adicionar alguma informação extra na imagem ou foto.
Há muitas maneiras de fazer isso, mas eu vou mostrar aqui a maneira que eu faço isso com um pequeno código que eu desenvolvi em CSS que combinado com o plugin de WordPress AddQuicktag fica super fácil de usar :) ~~ Mas, dá pra usar em qualquer plataforma.

O resultado ficará assim

Sua legenda aqui

1. Coloque no CSS do seu blog/site o código abaixo
[css]
.legend {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;color: white;
opacity: .7;
background-color: #000;
position:absolute;
margin-top: -60px;
margin-left: 90px;
padding: 9px;
}

[/css]

Explicando o CSS {

opacity – Altera a opacidade da legenda, nesse CSS ao mudar a opacidade ela altera também a opacidade da letra. Se você quiser mais transparente eu aconselho fazer uma imagem transparente e colocar como background.
background-color:#000; – É a cor do fundo da legenda! Lembre-se de contrastar com a cor do texto
position:absolute – Posição absoluta é importante para que a imagem fique posicionada em cima da foto.

Onde você deve editar

Sim, quando tem "position:absolute" é comum usar top e left pra alterar a posição, mas eu usei margin.
Essas medidas foram usadas para a legenda ficar na posição que eu escolhi e que ficaram boas no meu layout. Pode ser que varie em outros layouts por causa das medidas das imagens, etc..

margin-top: -60px; Para que a legenda fique acima da imagem é importante que esse número seja negativo e quanto maior depois do "-" mais para cima ficará a legenda.
margin-left: 90px; Quanto maior o número, mais para a esquerda ficará!

}

2. Usando no post.

No seu post, logo após o código da sua imagem, coloque o código da legenda e edite no local indicado.

[html]

Sua legenda aqui

[/html]

E prontinho ^^ Ficará lindo, organizado e informativo :D

Exemplo com cor clara

Sua legenda aqui

Tutorial escrito e desenvolvido por Helena Vieites para o blog MaCherry.org . Não copie, altere ou redistribua.
Ao utilizar qualquer conteúdo desse site você estará concordando com os Termos de Uso


Tags: , , , ,





8 Comentários em “Legendas em imagens do post com CSS”


Raquel | 08-08-2012 às 09:36 | Responder

Muito bem explicado. Estou querendo colocar egenda, achei que fosse bem mais complicadinho,gostei.
Obrigada por compartilhar. ^^

[Reply]

Lari | 09-08-2012 às 17:06 | Responder

Ei, Helena! Ahh, que maravilha esse tutorial <3
Nossa, acho essa legenda tão fofinha e discreta. Confesso que eu não sabia fazer, então obrigada! *-* Vou tentar agora mesmo.

Ahh, e sobre as ilustrações: Não sou eu quem faço. Amo desenhar (animes especificamente, apesar de não assistir a nenhum), mas acredita que ainda não sei desenhar no Illustrator? Mimimi.
Beeijos.

[Reply]

Renata | 10-08-2012 às 18:58 | Responder

Muito bacana o tutorial! Realmente vejo em vários blogs esse recurso!
Vou ver se uso no meu próximo tema (assim que eu criar coragem de arrumá-lo)
;*

[Reply]

alice | 11-08-2012 às 15:45 | Responder

seu blog é lindo, vi uma postagem sobre ele em um blog e vim dar uam conferida.
estou seguindo.

[Reply]

Lena Reply:

Obrigada de coração Alice!! Mas você poderia me falar qual blog, por favor?? Fiquei curiosa! Bjoss

[Reply]

Thaís Santana | 12-08-2012 às 19:06 | Responder

Tentei fazer isto uma vez mas não consegui, porque não coloquei a class (Eu sei…mas que menina idiota), haha!

Beijos♥

[Reply]

Vanda | 13-08-2012 às 21:13 | Responder

Adorei o efeito, já favoritei =)
Logo vou testar.
Beijo!

[Reply]

Cell | 23-01-2014 às 12:51 | Responder

No meu as imagens desalinharam :C tive que tirar .

[Reply]


Comentar