Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 124
Sexo: Masculino

Como colocar marca d'agua nas imagens do site com CSS?

02-01-2013 18:16

Gente, há um tempo atrás eu tinha visto um site, era até um site todo em inglês que ensinava como usar o CSS para colocar uma logomarca.png sobreposta (em cima) em todas as imagens dos posts do blog ou do site.

Era tipo uma criação de uma classe, que todas as imagens que você pusesse no post, era só você colocar por exemplo um class="logo" e essa imagem do post do seu blog iria apresentar a logomarca colocada no canto direito inferior.

Sem a necessidade de ter que fazer isso com ações do Photoshop para colocar logo nas imagens.

A solução era online na própria folha de estilos do site, podendo você substituir a imagem logomarca.png a qualquer momento, e todas as imagens dos seus posts iriam ter a nova logomarca.

Esse método é fantástico! Pena que eu perdi o endereço do site que ensinava a fazer isso!

Quero muito aprender a fazer isso gente! Não parece ser muito difícil, e então, vocês poderiam me ajudar a fazer isso?

Encaram a missão? Estou disposta até a pagar para quem me mostrar uma solução nisso! Sério, não prometo que pagarei quantias absurdas, mas darei uma recompensa humilde de agradecimento em dinheiro mesmo! Farei uma doação pelo PagSeguro a quem me mostrar essa solução!

Por isso, pesquisem a fundo qual o meio mais próximo que eu posso fazer para chegar no que eu quero!
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como colocar marca d'agua nas imagens do site com CSS?

02-01-2013 19:10

Segue um exemplo

<style> #watermark{    background:url(marca.png) no-repeat;    width: 100px;    height: 100px;    position: relative;    top: 0;    left: 0; } #image{    width: 100px;    height: 100px;    position: relative;    top: 0;    left: 0; }       </style>


<div> <div id="image"><img src="foto.jpg" /></div> <div id="watermark"></div> </div>

É só você ajustar o tamanho e posição da marca d'água no style.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 124
Sexo: Masculino

Como colocar marca d'agua nas imagens do site com CSS?

02-01-2013 20:23

É quase isso!! Mas, não estou conseguindo colocar a Watermark no lado direito inferior da imagem, assim como fica uma logomarca nessa imagem por exemplo Imagem
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como colocar marca d'agua nas imagens do site com CSS?

02-01-2013 21:08

Se as figuras tiverem tamanho padrão, deixa o top e left do #watermark dessa forma

   top: 100px;    left: 100px;

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 124
Sexo: Masculino

Como colocar marca d'agua nas imagens do site com CSS?

02-01-2013 21:27

Mas se as imagens não tiverem tamanho padrão? Quero que o código sirva para imagens de vários tipos de tamanhos diferentes...


Ah, eu fiz uma página de teste e a imagem não está ficando bem centralizada, ela fica um pouco mais para a direita veja, queria ver como ajeitar isso...

http://tinyurl.com/teste-da-logo
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como colocar marca d'agua nas imagens do site com CSS?

02-01-2013 23:19

Testa esse código. Testei com duas imagens de tamanhos diferentes, e o posicionamento da imagem de marca dágua ficou na mesma posição em ambas fotos.

<style> #watermark_box { position:relative; display:block; } img.watermark { position: relative; top: -10px; left: -19%; } </style>


<div id="watermark_box"> <img src="foto1.jpg" alt="Your image"> <img src="marca.png" class="watermark"> </div>   <div id="watermark_box"> <img src="foto2.jpg" alt="Your image"> <img src="marca.png" class="watermark"> </div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 124
Sexo: Masculino

Como colocar marca d'agua nas imagens do site com CSS?

03-01-2013 14:57

Está quase... Só que a imagem que fica envolvida dentro da div "watermark_box" não fica bem centralizada na página. Quando a imagem está envolvida dessa div ela apresenta um deslocamento mais pra esquerda, ficando longe alguns pixels da direita, e isso no post do meu blog faz uma diferença na estética do layout...

Veja nessa página de teste com esse código novo que me mandou, a logomarca fica com imagens de tamanhos diferentes, mas ela apresenta um erro na centralização.

Ah, e eu quero declarada a imagem da logomarca em CSS, para não precisar colocar o endereço dela toda vez que postar uma nova imagem no post. Quero colocar só o endereço da imagem nova do post e não o endereço da logomarca.

http://tinyurl.com/teste-logo-2
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como colocar marca d'agua nas imagens do site com CSS?

03-01-2013 15:12

Tenta o seguinte:

<style> #watermark_box { width:100%; } img.watermark { position: relative; top: -50px; left: 11%; } </style>


<div style="text-align:center;">   <div id="watermark_box"> <img src="foto.jpg" width="600" height="600" alt="Your image"/> <br /> <img src="marca.png" class="watermark" alt="Watermark image" /> </div>   <div id="watermark_box"> <img src="foto.jpg" width="600" height="600" alt="Your image"/> <br /> <img src="marca.png" class="watermark" alt="Watermark image" /> </div>   </div>

1
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 124
Sexo: Masculino

Como colocar marca d'agua nas imagens do site com CSS?

03-01-2013 16:10

Deu certo, só mais uma coisa para finalizar... tem como colocar a imagem da logomarca declarada no próprio css e dar o mesmo resultado???
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como colocar marca d'agua nas imagens do site com CSS?

03-01-2013 17:06

Suponho que o método mais fácil é usar a imagem mesmo.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 124
Sexo: Masculino

Como colocar marca d'agua nas imagens do site com CSS?  #resolvido

06-01-2013 09:07

Kleber! Agradeço sua ajuda e todo acompanhamento que me deu desde o início do tópico! Consegui o resultado desejado graças a você!

Mandei um e-mail para você, não sei se recebeu. :clap:
1
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como colocar marca d'agua nas imagens do site com CSS?

06-01-2013 10:53

;)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado