TextBox com fundo gradiente sobre imagens

[alexbecher 0]

Amigos bom dia,

 

 

Estou querendo fazer um efeito em meu site nas legendas que aparecem sobre as fotos , tipo aquelas que aparecem nas fotos de amigos no facebook .O texto aparece em branco com um fundo degradê transparente sobre a foto da pessoa.Alguém tem o conhecimento em css para fazer este efeito?

[Diéssica 140]

O texto aparece em branco com um fundo degradê transparente sobre a foto da pessoa.Alguém tem o conhecimento em css para fazer este efeito?

4 propriedades básicas: color ("o texto aparece em branco"), gradient (CSS3 — "fundo degradê"), opacity (CSS3 — "transparente") e position ("sobre a foto da pessoa").

 

Se ainda não sabe trabalhar com o gradient, antes de te recomendar a documentação oficial da W3C sobre o assunto, vou te sugerir o CSS3 Gradient Generator pra ti ver como é na prática:

:seta: http://gradients.glrzad.com/ [CSS3 Gradient Generator]

Documentação:

:seta: http://dev.w3.org/csswg/css3-images/#gradients

 

.legenda {
background: linear-gradient(bottom, rgb(189,189,189) 0%, rgb(143,142,141) 50%); /*  gradiente linear com cores em rgba - cinza escuro para cinza claro em 50% do elemento */
opacity:0.3; /* 0.3 de opacidade */
color:#FFF; /*  letra branca */
}

 

Depois é só trabalhar com o position em cima do elemento e a COMPATIBILIDADE. :thumbsup:

 

Apesar de eu preferir ferramentas como Prefixr nesse tipo de situação, o site prefixMyCSS vai te auxiliar bastante: :seta: http://prefixmycss.com/ (-moz, -o, -ms etc)

[alexbecher 0]

Amigo fiz com o com Gradient Generator e com sua dica , porém a caixa de testo que fica sobre a imagem não é transparente e com isso fica uma faixa em cima da imagem .Eu preciso que o efeito seja igual ao das legendas usadas no facebook quando você acessa seu perfil na timeline em cima das fotos dos seus amigos aparece uma caixa de texto com gradiente preto na parte de baixo e transparente na parte de cima e o nome do amigo em branco!!